body {
    margin: 0;
    background: #ffffff;
}

.page {
    width: 350px;
    margin: 20px auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 40px;

    position: relative;
    transform: scale(0.75);
    transform-origin: top center;
}

.page::before {
    content: "";

    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    top: 200px;

    width: 40px;

    height: calc(200vh - 200px);

    background: #68b4b7;

    z-index: -1;
}

.logo {
    width: 300px;

    display: block;
}

.welcome {
    width: 100%;

    display: block;
}

.info-container {
    position: relative;

    width: 100%;
}

.info-bg {
    width: 100%;

    display: block;
}

.info-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 78%;

    text-align: center;

    color: #68b4b7;

    font-family: monospace;

    line-height: 1.6;
}

.buttons {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.info-container {
    width: 100%;

    position: relative;
}

.info-bg {
    width: 100%;

    display: block;
}

.info-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 78%;

    text-align: center;

    color: #68b4b7;

    font-family: monospace;

    line-height: 1.6;
}

.secret-code {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    font-size: 3px;

    color: white;
    top: calc(200vh - 300px);
    
}

.button {
    width: 100%;

    display: block;

    transition: transform 0.15s ease;
    padding-bottom: 40px;
}

.button:hover {
    transform: scale(1.02);
}