@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');

body {
    margin: 0;
    background-color: #000000;
}

body::-webkit-scrollbar {
    display: none;
}

/* PC */
@media screen and (min-width:1024px) {
    canvas {
        position: absolute;
    }

    h1 {
        position: absolute;
        width: 100vw;
        margin: 0;
        margin-top: 2vh;
        text-align: center;
        font-size: 200px;
        font-family: "M PLUS 1p", serif;
        font-weight: 900;
        color: #FFFFFF;
        animation: opening 2s linear forwards;
        opacity: 0;
    }

    @keyframes opening {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .typing-animation {
        position: absolute;
        top: 73vh;
        width: 60vw;
        margin: 0;
        padding: 0 20vw;
        text-align: center;
        font-size: 50px;
        font-family: "M PLUS 1p", serif;
        font-weight: 900;
        color: #FFFFFF;
    }

    .typing-animation::after {
        content: '';
        border-right: 10px solid #FFFFFF;
        margin-left: 10px;
        animation: flashing 1s linear infinite;
        opacity: 0;
    }

    @keyframes flashing {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}

/* tablet */
@media screen and (min-width:768px) and (max-width:1024px) {
    canvas {
        position: absolute;
    }

    h1 {
        position: absolute;
        width: 100vw;
        margin: 0;
        margin-top: 5vh;
        text-align: center;
        font-size: 200px;
        font-family: "M PLUS 1p", serif;
        font-weight: 900;
        color: #FFFFFF;
        animation: opening 2s linear forwards;
        opacity: 0;
    }

    @keyframes opening {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .typing-animation {
        position: absolute;
        top: 73vh;
        width: 70vw;
        margin: 0;
        padding: 0 15vw;
        text-align: center;
        font-size: 50px;
        font-family: "M PLUS 1p", serif;
        font-weight: 900;
        color: #FFFFFF;
    }

    .typing-animation::after {
        content: '';
        border-right: 10px solid #FFFFFF;
        margin-left: 10px;
        animation: flashing 1s linear infinite;
        opacity: 0;
    }

    @keyframes flashing {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}

/* smartphone */
@media screen and (max-width:768px) {
    canvas {
        position: absolute;
    }

    h1 {
        position: absolute;
        width: 100vw;
        margin: 0;
        margin-top: 7vh;
        text-align: center;
        font-size: 100px;
        font-family: "M PLUS 1p", serif;
        font-weight: 900;
        color: #FFFFFF;
        animation: opening 2s linear forwards;
        opacity: 0;
    }

    @keyframes opening {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .typing-animation {
        position: absolute;
        top: 74vh;
        width: 70vw;
        margin: 0;
        padding: 0 15vw;
        text-align: center;
        font-size: 25px;
        font-family: "M PLUS 1p", serif;
        font-weight: 900;
        color: #FFFFFF;
    }

    .typing-animation::after {
        content: '';
        border-right: 5px solid #FFFFFF;
        margin-left: 5px;
        animation: flashing 1s linear infinite;
        opacity: 0;
    }

    @keyframes flashing {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}