@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Cabin';
    -webkit-tap-highlight-color: transparent;
}

@media screen and (width <= 37.5rem){
    body, html{
        /* position: relative; */
        min-height: 100vh;
        max-height: 100vh;
        background-color: rgb(21, 36, 36);
        background-image: url(img/bgphn.png);
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        display: flex;
    }

    .logo{
        margin: 0 auto;
        max-height: 10vh;
        position: absolute;
    }
    .csoki{
        max-height: 35vh;
        text-shadow: black 5px 5px 5px;
        align-self: flex-end;
        transform: translateY(2vh)
        /* position: absolute; */
        /* transform: translateY(25vh) */
    }

    .csoki-container{
        padding: 0;
        margin: 0;
        align-self: flex-end;
        display: flex;
    }

    #menu{
        margin: 0 2vw;
        display: flex;
        flex-direction: column;
        padding-top: 15vh;
        max-height: 90vh;
        transition: .7s ease;
        width: 100vw;
    }

    #btn{
        opacity: 0;
        margin: 10vh auto 0 auto;
        animation: btnAppear .3s ease-in forwards;
        animation-delay: 3.4s
    }

    .dialogue{
        padding-left: 4vw;
        width: 70vw;
        margin-top: 5vh;
    }

    .dialogue h1{
        margin-top: 1vh;
        /* margin-left: 1vw */
    }

    #menu-sec{
        margin: 0 .2vw;
        display: none;
        flex-direction: column;
        padding-top: 15vh;
        width: 100vw;
        max-height: 90vh;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transition: 1s
    }

    #menu-sec h1{
        color: rgb(177, 185, 255);
        text-shadow: black 1px 1px 4px;
        align-self: center;
    }

    #menu-sec button{
        background: rgba(122, 255, 120, 0.116);
        border: 1px solid rgba(181, 181, 181, 0.444);
        
        width: 70vw;
        margin: 10vh auto 0 auto;
        height: 5vh;
        border-radius: .5rem;
        cursor: pointer;
        color: white;
        text-shadow: black 1px 1px 7px;
    }

}

.dialogue span{
    display: inline-block;
    animation: jump 1s alternate;
    animation-delay: calc(.18s * var(--i));
    color: rgb(177, 185, 255);
    text-shadow: black 1px 1px 4px
}

#btn{
    height: 10vh;
    width: 10vh;
    background: transparent;
    border: none;
}

#btn span{
    font-size: 5vh;
    color: rgb(228, 231, 255);
    text-shadow: black 1px 1px 4px;
    transition: .1s ease;
    cursor: pointer;
    overflow: hidden;
    position:relative;
    z-index: 0;
    border-radius: 100%
}

#btn span::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.304);
    transform: scale(0);
    transition: transform .2s ease;
    z-index: -1;
}

#btn span:hover{
    font-size: 6vh;
    text-shadow: grey 1px 1px 3px;
}

#btn span:hover::before{
    transform: scale(1.1)
}

@keyframes jump {
    0%,40%,100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-20px);
        color: white
    }
}

@keyframes btnAppear {
    from {opacity: 0;}
    to {opacity: 1;}
}