@font-face {
    font-family: uncut;
    src: url(assets/Uncut.ttf);
}

@media (min-device-width: 800px){

html{
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0;
    font-family: uncut;
    font-weight: 450;
    font-size: clamp(5px, 1.8vw, 20px);
    color: #005eff;
}

body{
    margin: 0;
    padding: none;
}

#noise{
    position: absolute;
    width: 100vw;
    height: 100svh;
    z-index: 10000;
    opacity: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
    margin: 0;
}


.loader{
    font-family: uncut;
    font-weight: 450;
    font-size: clamp(5px, 1.8vw, 20px);
    background-color: white;
    height: 100svh;
    width: 100vw;
    opacity: 1;
    position: absolute;
    z-index: 100;
    align-items: center;
    display: grid;
    transition: opacity 600ms;
}

.gone{
    opacity: 0;
}

.loader p{
    position: relative;
    color: #005eff;
    text-align: center;
}


.loader img{
    width: 13vw;
    position: relative;
    margin-left: 42.5vw;
    margin-top: 2vh;
}




#mains{
    font-family: uncut;
    font-weight: 450;
    font-size: clamp(5px, 1.8vw, 20px);
    display: flex; /* Use flexbox for layout */
    padding: 50px;
    height: 70vh; /* Full viewport height */
    background-color: #ffffff;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally (optional) */
}


.linksection {
    flex: 1; /* Each section takes equal width */
    margin: 0; /* Space between sections */
    box-sizing: border-box; /* Include padding and border in width */
}


#video iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#design iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}


#video {
    position: relative;
    padding-bottom: 28.125%;
}

#design {
    position: relative;
    padding-bottom: 28.125%;
}


#video a{
    text-decoration: none;
    color: #005eff;
    position: absolute;
    bottom: 0px;
    margin-bottom: -30px;
    text-align: center;
    width: 50%;
    padding-top: 50vh;
    margin-left: 25%;
    z-index: 99;
}

#design a{
    padding-top: 50vh;
    text-decoration: none;
    color: #005eff;
    position: absolute;
    bottom: 0px;
    margin-bottom: -30px;
    text-align: center;
    width: 50%;
    margin-left: 25%;
    z-index: 99;
}


a img{
    height: clamp(5px, 1.5vw, 14px);
}

#basediv img{
    height: clamp(5px, 1.5vw, 14px);
}


#arrow{
    margin-left: -20px;
    opacity: 0;
    transition-duration: 300ms;
}


#link:hover #arrow{
    opacity: 100;
    margin-left: 0px;
    transition-duration: 300ms;
}

#videoframe{
    margin-top: 0px;
    transition-duration: 300ms;
}

#link:hover ~ #videoframe {
    margin-top: -20px;
    transition-duration: 300ms;
}

#copyright{
    font-size: medium;
    width: 100%;
    margin-bottom: -2vh;
    text-align: center;
    bottom: 10vh;
    z-index: 99;
    position: absolute;
    color: #005eff;
    text-decoration: none;
    font-size: clamp(5px, 1.8vw, 20px);
}

#copyright a{
    font-size: larger;
    font-size: clamp(5px, 1.8vw, 20px);
    color: #005eff;
    margin-top: -10vh;
    text-decoration: none;
}

#copyright a:hover{
    color: #005eff;
    text-decoration: underline;
}


}




/* 
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
MOBILE CSS
*/












@media (max-device-width: 800px){



    html{
        overflow-y: hidden;
        overflow-x: hidden;
        overflow: hidden;
        font-family: uncut;
    font-weight: 450;
    font-size: clamp(10px, 1.8vw, 24px);
    color: #005eff;
    }
    
body{
    overflow: hidden;
    height: 100%;
    margin: 0;
}

    #noise{
        overflow: hidden;
        position: absolute;
        width: 100vw;
        height: 99svh;
        z-index: 10000;
        opacity: 1;
        pointer-events: none;
        mix-blend-mode: multiply;
    }




    .loader{
        overflow: hidden;
        font-family: uncut;
        font-weight: 450;
        font-size: clamp(10px, 1.8vw, 24px);
        background-color: white;
        height: 100svh;
        width: 100vw;
        opacity: 1;
        position: absolute;
        z-index: 100;
        align-items: center;
        display: grid;
        transition: opacity 600ms;
    }
    
    .gone{
        opacity: 0;
    }
    
    .loader p{
        color: #005eff;
        text-align: center;
    }
    
    .loader img{
        width: 15vw;
        position: relative;
        margin-left: 42.5vw;
        margin-top: 2vh;
    }


    #mains{
        overflow: hidden;
        font-family: uncut;
        font-weight: 450;
        font-size: clamp(10px, 1.8vw, 24px);
        display: flex; /* Use flexbox for layout */
        flex-direction: column;
        padding: 50px;
        height: 70vh; /* Full viewport height */
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally (optional) */
    }
    
    
    .linksection {
        flex: 1; /* Each section takes equal width */
        margin: 0; /* Space between sections */
        box-sizing: border-box; /* Include padding and border in width */
    }
    
    
    #video iframe {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
    
    #design iframe {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
    
    
    #video {
        position: relative;
        padding-bottom: 28.125%;
    }
    
    #design {
        position: relative;
        padding-bottom: 28.125%;
    }
    
    
    #video a{
        padding-top: 200px;
        text-decoration: none;
        color: #005eff;
        position: absolute;
        bottom: 0px;
        margin-bottom: 30px;
        text-align: center;
        width: 80%;
        margin-left: 10%;
        z-index: 99;
    }
    
    #design a{
        padding-top: 200px;
        text-decoration: none;
        color: #005eff;
        position: absolute;
        bottom: 0px;
        margin-bottom: 30px;
        text-align: center;
        width: 80%;
        margin-left: 10%;
        z-index: 99;
    }

    
    
    a img{
        height: clamp(5px, 1.5vw, 14px);
    }
    
    #basediv img{
        height: clamp(5px, 1.5vw, 14px);
    }
    
    
    #arrow{
        margin-left: -20px;
        opacity: 0;
        transition-duration: 300ms;
    }
    
    
    #link:hover #arrow{
        opacity: 100;
        margin-left: 0px;
        transition-duration: 300ms;
    }


    #copyright{
        position: absolute;
        overflow: hidden;
        margin-top: 8vh;
        width: 100%;
        text-align: center;
        color: #005eff;
        text-decoration: none;
        z-index: 99;

    }

    #copyright a{
        color: #005eff;
        text-decoration: none;
        z-index: 99;
    }




}