* {
    box-sizing: border-box;
}

.border {
    width: 80%;
    aspect-ratio: 1.8;
    margin: 5% auto;
    border: 6px solid;
    border-radius: 4vw;
    position: relative;
}

.out.border {
    aspect-ratio: 2;
    margin: 10% auto;
}

#logo {
    margin: 5% 20%;
    width: 60%;
}

.button {
    z-index: 1;
    text-align: center;
    cursor: pointer;
    font-size: 4vw;
    font-family: fantasy;
    line-height: 8vw;
    background: linear-gradient(to top, rgb(181, 228, 140), rgb(82, 182, 154));
    transform: translate(120%);
    width: 30%;
    aspect-ratio: 3.5 / 1;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5)
}

.button::before,
.button::after {
    content: "";
    position: absolute;
    background: inherit;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.button::before {
    left: -15%;
}

.button::after {
    right: -15%;
}

.button:hover {
    background: rgb(62, 201, 168);
}

#setting-btn {
    margin-top: 5%;
}

.out {
    animation: start-border 1.2s ease-in-out;
}

.out #logo {
    animation: start-title 1.2s ease-in-out forwards;
}

.out #start-btn {
    animation: start-button 1s forwards;
}

.out #setting-btn {
    animation: start-setting 1s forwards;
}

@keyframes start-button {
    from {
        transform: translate(120%);
    }

    100% {
        transform: translate(18%, -345%);
    }
}

@keyframes start-setting {
    from {
        transform: translate(120%);
    }

    100% {
        transform: translate(218%, -495%);
    }
}

@keyframes start-border {
    0% {
        border-color: rgb(0, 0, 0);
    }

    20% {
        border-color: rgba(0, 0, 0, 0);
    }

    60% {
        border-color: rgba(0, 0, 0, 0);
    }

    100% {
        border-color: rgb(0, 0, 0);
    }
}

@keyframes start-title {
    20% {
        transform: translateY(50px);
    }

    99% {
        transform: translateY(-500px);
    }

    100% {
        transform: translateY(-10000px);
    }
}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#count {
    position: absolute;
    font-size: 7vw;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    top: -8vw;
    margin: 0 45%;
    display: none;
}

.out #count {
    display: inline-block;
    animation: count 1.5s ease-in-out;
}

@keyframes count {
    from {
        color: rgba(0, 0, 0, 0);
    }
    to {
        color: black;
    }
}

#score {
    position: absolute;
    width: 40%;
    aspect-ratio: 1.8;
    border: 1px solid blue;
    font-weight: bold;
    border-radius: 3vw;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to top, rgb(181, 228, 140), rgb(82, 182, 154));
    top: -1000px;
    left: 30%;
    font-size: 6vw;
    text-align: center;
    z-index: 1;
}

.end {
    animation: end 1s ease-in-out forwards;
}

@keyframes end {
    0% {
        top: -1000px;
    }
    80% {
        top: 20vw;
    }
    100% {
        top: 15vw;
    }
}

#setting {
    position: relative;
    width: 40%;
    aspect-ratio: 1.8;
    border: 1px solid blue;
    font-weight: bold;
    border-radius: 3vw;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to top, rgb(181, 228, 140), rgb(82, 182, 154));
    left: 30%;
    font-size: 3.5vw;
    text-align: center;
    transform: translateY(-300vw);
    z-index: 2;
}

svg {
    cursor: pointer;
    position: relative;
    width: 7vw;
    height: 7vw;
    background-color: rgb(160, 219, 143);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.left-btn {
    transform: translateX(-4vw);
}

.right-btn {
    transform: translateX(4vw);
}

img {
    position: relative;
    width: 11vw;
    height: 11vw;
    transform: translateY(1vw);
}

#confirm-btn {
    cursor: pointer;
    z-index: 1;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    font-size: 2.9vw;
    width: 18vw;
    height: 6vw;
    margin: 1vw auto;
    background: linear-gradient(to top, rgb(128, 237, 153), rgb(56, 163, 165));
    line-height: 6vw;
}

#confirm-btn::before,
#confirm-btn::after {
    content: "";
    position: absolute;
    background: inherit;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

#confirm-btn::before {
    left: -15%;
}

#confirm-btn::after {
    right: -15%;
}

#confirm-btn:hover {
    background: rgb(62, 201, 168);
}

#setting.up {
    animation: up 1.5s ease-in-out backwards;
}

#setting.down {
    animation: down 1.5s ease-in-out forwards;
}

@keyframes up {
    0% {
        transform: translateY(-50vw);
    }
    10% {
        transform: translateY(-40vw);
    }
    100% {
        transform: translateY(-300vw);
    }
}

@keyframes down {
    0% {
        transform: translateY(-300vw);
    }
    90% {
        transform: translateY(-40vw);
    }
    100% {
        transform: translateY(-50vw);
    }
}