body{
    margin: 0;
    background-color: black;
}

html{
    scroll-behavior: smooth;
}


a:link{
    text-decoration: none!important;
    -webkit-tap-highlight-color: transparent;
}

.img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.hidden {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(100%);
    transition: all 0.80s;
}

.show {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0%);
}

.logo:nth-child(1) {
    transition-delay: 40ms ;
}

.logo:nth-child(2) {
    transition-delay: 100ms ;
}

.logo:nth-child(3) {
    transition-delay: 230ms ;
}

.logo:nth-child(4) {
    transition-delay: 400ms ;
}

.logo:nth-child(5) {
    transition-delay: 500ms ;
}
.logo:nth-child(6) {
    transition-delay: 600ms ;
}

.logo:nth-child(7) {
    transition-delay: 700ms ;
}











/*DESKTOP VIEW ONLY*/
.desktop{
    background-color: rgb(0, 0, 0);
    width: 100%;
    
    .content{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-container{
            width: fit-content;
            height: fit-content;

            .title{
                font-family: inter;
                font-weight: 600;
                font-size: 18px;
                color: white;
                text-align: center;
            }

            .gridbox{
                display: grid;
                width: fit-content;
                margin-top: 22px;
                gap: 12px;

                .nav{
                    text-align: center;
                    font-family: inter;
                    font-weight: 300;
                    font-size: 14px;
                    color: #E5E5E7;
                }

                .nav:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}

.mobile{
    display: none;
    background-color: rgb(0, 0, 0);

    .content{
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        padding: 0 32px;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-container{
            width: 100%;
            max-width: 360px;

            .title{
                font-family: inter;
                font-weight: 600;
                font-size: 20px;
                color: white;
                text-align: center;
            }

            .gridbox{
                display: grid;
                width: 100%;
                margin-top: 28px;
                gap: 14px;

                .nav-link{
                    .nav{
                        width: 100%;
                        box-sizing: border-box;
                        padding: 16px 20px;
                        border: 1px solid #E5E5E7;
                        border-radius: 6px;
                        text-align: center;
                        font-family: inter;
                        font-weight: 400;
                        font-size: 15px;
                        color: #E5E5E7;
                    }
                }
            }
        }
    }
}






@media only screen and (max-width:750px) {
    .desktop{
        display: none;
    }

    /*MOBILE VIEW ONLY*/
    .mobile{
        display: block;
    }
}