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



@font-face {
    font-family: Neue Kaine Variable;
    src: url('../font/Neue Kaine Variable.ttf');
  }

  
  .archivo-uniquifier {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }


*{
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

:root {

    --black: #121212;
    --primary: #c1c1bd;
    --secondary: #B3B2AE;
    --white: #000000;
    --accent: #505fff;
    --abcwght: 900;


 /*

    --black: #2e2e2e;
    --primary: #f1f1f1;
    --secondary: #e0e0e0;
    --white: #100008;
    --accent: #505fff;;
    --abcwght: 900;

    /*
        --black: #606060;
        --primary: #efefef;
        --secondary: #cccccc;
        --white: #303030;
        --accent: #505fff;;
        --abcwght: 900;


*/

}
[data-theme="dark"] {
    --black: #121212;
    --primary: #c1c1bd;
    --secondary: #B3B2AE;
    --white: #000000;
    --accent: #505fff;
}

html{
    scrollbar-width: none;
 }


body{
    font-family: Neue Kaine Variable;
    font-size: 32px;
    font-weight: 483;
    background-color:var(--secondary) ;
    color: var(--black);
    margin: 0px;
    transition: color 0.5s;
    transition: background-color 0.5s;

}  

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

.loading-screen{
    opacity: 1;
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.8, 0.01, 0.2, 1);
    border-radius: 0%;
    background-color: var(--secondary);
}



.loading-screen-fade{
    transform: translateY(150%);
    border-radius: 100% 100% 0% 0%;
}


.loading-screen-disabled{
    display: none;
}

.loading-text{
    font-size: 64px;
    font-weight: 900;
    letter-spacing: -4px;
    height: 100%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    cursor: default;
}


.ldot-1{
    animation: loadingAnim 1.5s infinite 0s ease-in-out;
}

.ldot-2{
    animation: loadingAnim 1.5s infinite 0.2s ease-in-out;
}

.ldot-3{
    animation: loadingAnim 1.5s infinite 0.4s ease-in-out;
}

@keyframes loadingAnim {
    0%{
        transform: translateY(0px);
    }
    10%{
        transform: translateY(-15px);
    }
    20%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(0px);
    }
}
.vh-screenx{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.1s cubic-bezier(0.8, 0.01, 0.2, 1);
}
.vh-screenx2{
    height: 60vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 1s cubic-bezier(0.8, 0.01, 0.2, 1);
    
}


.vh-screenx3{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
}



#top{
    background-color: var(--primary);
}

.nav-bar{
    position: fixed;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    z-index: 2;
    color: var(--black);
    transition: all 0.3s ease-in-out;
}

.nav-bar-inactive{
    opacity: 0.2;
}


.nav-bar-alt{
    position: fixed;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    z-index: 3;
    color: var(--primary);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.nav-bar-alt-active{
    opacity: 1;
    pointer-events: auto;
}

.nav-bar-alt > div{
    margin: 0px 20px;
}

.nav-bar > div{
    margin: 0px 20px;
}

.logo{
    text-align: left;
    font-size: 32px;
    font-weight: 900;
    line-height: 0.8em;
    cursor: pointer;
}


.switch-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    transition: all 0.2s;      
}


#switch-box:hover{
    cursor: pointer;
    background-color: var(--secondary);
}

.switch-box:hover > div{
    height: 6px;
}

.switch-box div{
    width: 40px;
    height: 2px;
    background-color: var(--black);
    transition: all 0.2s ease-in-out;
}

.switch-box-alt div{
    background-color: var(--primary);
}

.hero-container{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.scrolldownbox{
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    width: 100%;
}

.scrolldown-el{
    background-color: var(--primary);
    height: 100px;
    width: 320px;
    border: var(--secondary) 2px solid;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.scrollsticks-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 30%;
}



.scrollsticks{
    background-color: var(--accent);
    height: 2px;
    width: 100%;
}


.scrolltext-box{
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 65%;
    font-weight: 900;
    letter-spacing: -2px;
}


.ss2{
    opacity: 0;
    animation: scrollSticksAnim 3s infinite 0.3s;
}

.ss3{
    opacity: 0;
    animation: scrollSticksAnim 3s infinite 0.2s;
}

.ss4{
    opacity: 0;
    animation: scrollSticksAnim 3s infinite 0.1s ;
}

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

    40%{
        opacity: 0;
    }

    50%{
        opacity: 1;
    }

    60%{
        opacity: 0;
    }
} 

.welcome-pattern{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.welcome-box{
    position: fixed;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transform: rotate(-10deg);
}

.w-row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 20px;
    font-size: 145px;
    font-weight: 900;
    color: var(--secondary);
    letter-spacing: -5px;
    animation: heroAnim 30s linear infinite;
    white-space: nowrap;
}

.r-2{
    margin-right: -560px;
}

.r-1{
    margin-right: -520px;
}

.r0{
    margin-right: -480px;
}

.r1{
    margin-right: -440px;
}

.r2{
    margin-right: -400px;
}

.r3{
    margin-right: -360px;
}

.r4{
    margin-right: -320px;
}

.r5{
    margin-right: -280px;
}

.r6{
    margin-right: -240px;
}

.r7{
    margin-right: -200px;
}

.r8{
    margin-right: -160px;
}

.r9{
    margin-right: -120px;
}

.r10{
    margin-right: -80px;
}

.r11{
    margin-right: -40px;
}

.r12{
    margin-right: 0px;
}

.r13{
    margin-right: 40px;
}

.r14{
    margin-right: 80px;
}

.r15{
    margin-right: 120px;
}

.welement{
    height: 120px;
    line-height: 1em;
    width: 840px;
    
}

@keyframes heroAnim {
    0%{
        transform: translateX(+0px);
    }
    100%{
        transform: translateX(+860px);
    }
}

@keyframes heroAnimAlt {
    0%{
        transform: translateX(+0px);
    }
    100%{
        transform: translateX(+1720px);
    }
}

.whitewelcome-row{
    animation: heroAnimAlt 60s linear infinite;
}

.whitewelcome{
    color: var(--white);
}

.to-my{
    font-size: 40px;
    color: var(--white);
}

/*bg

background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23D69E01" stroke-width="1"/></svg>');

bg save*/

.double-vh-screen{
    position: relative;
    height: 400vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    background-color: var(--secondary);
    transition: background-color 0.5s;
    padding: 80px;
}

.square-bg-box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.square-bg-rot{
    width: 100%;
    height: 200%;
    transform-origin: left bottom;
    transform: rotate(-10deg);
    padding-left: 0px;
}

.square-bg{
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23d69e01" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23202020" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23CCCCCC" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23E0E0E0" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23B3B2AE" stroke-width="1"/></svg>');
    background-size: 60px 60px;
    background-color: var(--primary);
    height: 100%;
    width: 5000px;
    animation: squareBgAnim 5s linear infinite;
}


@keyframes squareBgAnim {
    0%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(60px);
    }
}
 /* HAMBURGER MENU START */

.menu-container{
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.7s cubic-bezier(0.8, 0.01, 0.2, 1);
    pointer-events: all;
    border-radius: 0% ;

}


.menu-relative{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--primary);
}

.menu-container-disabled{
    transform: translateY(-100%);
    pointer-events: none;
    border-radius: 0% 0% 100% 100%;
}

.menu-bg-box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.menu-bg-rot{
    width: 100%;
    height: 200%;
    transform-origin: left top;
}

.menu-bg{
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23d69e01" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23202020" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23CCCCCC" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23E0E0E0" stroke-width="1"/></svg>');
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="59.5" height="59.5" stroke="%23B3B2AE" stroke-width="1"/></svg>');
    background-size: 60px 60px;
    margin-left: -60px;
    height: 100%;
    width: 200%;
    animation: squareBgAnim 5s linear infinite;
}

.menu-fullscreen{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    overflow: hidden;


}

.menu-box{
    display: flex;
    width: 60%;
    height: 100%;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    margin: 0px 0px 50px 0px;

}

.menu-socials{
    display: flex;
    width: 300px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 400px;
    background-color: var(--primary);
    border: var(--secondary) 2px solid;

}

.hsocials{
    font-weight: 900;
    font-size: 40px;
    letter-spacing: -3px;
    margin-bottom: 40px;
    padding: 20px 0px 0px 20px;
}


.menu-socials-box{
    display: flex;
    width: 25%;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.menu-socials-list{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    padding: 0px 20px 20px 20px;
}

.menu-socials-list > a{
    text-decoration: none;
    color: var(--black);
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.6em;
    width: 100%;
    border: var(--secondary) 2px solid;
    background-color: var(--secondary);
    height: 40px;
    text-align: center;
    transition: all 0.1s ease-in-out;
}

.menu-socials-list > a:hover{
    background-color: var(--accent);
    color: var(--white);

}

.menu-close-box{
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: end;
    height: 100px;
    padding: 30px 20px 0px 0px;
}

/* Yoink Start */

.close-button {
    display: flex;
    width: 40px;
    height: 40px;
    border: var(--black) 2px solid;
    border-radius: 50% ;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

.close-button > div {
    width: 0%;
    height: 0%;
    background-color: var(--black);
    transition: all 0.2s cubic-bezier(0.8, 0.01, 0.2, 1);
    transform: rotate(-10deg);
}

.close-button:hover > div{
    width: 100%;
    height: 100%;
    transform: rotate(10deg);
}


/* YOINK END*/

.select-effect-box{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    height: 400px;
    width: 600px;
    transform-origin: right center;
    perspective-origin: right center;
    transition: transform 0.5s ease-in-out;

}

.select-effect-box-open{
    transform: rotateY(60deg);
}

.menu-effect{
    width: 5%;
    height: 20%;
    background-color: var(--secondary); 
    transform-origin: right center;
    transition: all 0.2s cubic-bezier(.12,.6,.53,.97);
}

.menu-effect-active{
    width: 100% !important;
    transition: all 0.7s cubic-bezier(.12,.6,.53,.97);
    background-color: var(--accent) !important; 

}

.menu-effect-active-alt{
    width: 20%;
}


.menu-el-box{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    height: 400px;
    width: 600px;
    color: var(--white);
    transform-origin: left center;
    perspective-origin: left center;
    transition: transform 0.5s ease-in-out
}

.menu-el-box-open{
    transform: rotateY(-40deg);
}

.mel-box{
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
    width: 100%;
    height: 20%;
    background-color: transparent;
    overflow: hidden;
    transition: transform 0.3s ease-out;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    -ms-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;

}

.mel-text{
    transition: transform 0.7s ease-out;
}

.mel-text-hidden{
    transform: translateY(100%); /* IMPORTANT */
}

.menu-effect-active{
    width: 100%;
}

.mel-box > a{
    text-decoration: none;
    color: var(--white);
    font-size: 100px;
    font-weight: 900;
    font-optical-sizing: auto;
    letter-spacing: -5px;
    line-height: 0.8em;
    margin-bottom: -3%;
    cursor: pointer;
    

}

.shadow-active{
    background-color: var(--accent);
    -webkit-transition: background-color 0.7s linear;
    -moz-transition: background-color 0.7s linear;
    -o-transition: background-color 0.7s linear;
    -ms-transition: background-color 0.7s linear;
    transition: background-color 0.7s linear;
}

 /* HAMBURGER MENU END */

.double-vh-main{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.sel-works-box{
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-box{
    display: flex;
    width: 100%;
    height: 300vh;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    z-index: 1;
}

/* 

.about-text-box{
    display: flex;
    font-size: 100px;
    font-weight: 900;
    color: var(--white);
    letter-spacing: -5px;
    line-height: 0.7em;
    margin-left: 20px;
    margin-bottom: 120px;
}

.about-info-box{
    display: flex;
    align-items: center;
    justify-content: start;
    height: 100px;
}

.about-lv{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 160px;
    background-color: var(--black);
    color: var(--secondary);
    font-weight: 900;
    padding-top: 5px;
    letter-spacing: -2px;
    text-align: center;
}

.about-name-box{
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-size: 43px;
    font-weight: 500;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 230px;
    color: var(--black);
    padding-top: 5px;
    line-height: 0.8em;
}

.about-info{
    display: flex;
    align-items: start;
    justify-content: start;
    height: 100px;
    width: auto;
    padding: 0px 20px;
    background-color: var(--primary);
    border: var(--secondary) 2px solid;
}

.about-info-text-box{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    height: 100%;
    width: 100%;
    font-family: "Archivo", sans-serif;
}

.skills-box{
    display: flex;
    justify-content: start;
    align-self: start;
    column-gap: 20px;
    margin: 20px 0px 0px 20px;
}

.about-list-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 10px;
    width: 400px;
}

.a-title{
    font-weight: 900;
    color: var(--white);
    width: 100%;
    border: var(--secondary) 2px solid;
    background-color: var(--primary);
    line-height: 1.2em;
    padding: 0.15em 0em 0em 0.3em;
}

.skill-t{
    font-weight: 900;
    color: var(--black);
    width: 100%;
    border: var(--secondary) 2px solid;
    background-color: var(--primary);
    line-height: 1.2em;
    padding: 0.15em 0em 0em 0.3em;
}

.a-list{
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    font-size: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.a-list > div{
    width: 100%;
    border: var(--secondary) 2px solid;
    background-color: var(--secondary);
    line-height: 1.2em;
    padding: 0em 0em 0em 0.3em;
    transition: 0.1s all ease-in-out;
}

.a-list > div:hover{
    font-weight: 700;
}

.software-l{
    color: var(--white);
}

*/

.sel-works-content-box{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    row-gap: 20px;
}

.sel-works-text-effect{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100px;
    transform-origin: left;

}


.sel-works-text{
    font-size: 100px;
    color: var(--white);
    font-weight: 900;
    letter-spacing: -5px;
    line-height: 1.4em;
    padding-left: 40px;
    transition: all 0.7s ease-out;
    transform-origin: left;
    cursor: default;
}

.sel-works-text-inactive{
    transform: translateY(100%);
}

.sel-works-img-box{
    display: flex;
    align-items: center;
    justify-content: end;
    height: 500px;
    width: 98%;
    background-color: var(--secondary);
    padding: 20px;
    column-gap: 20px;
    overflow: hidden;


}

.sw-img{
    height: 100%;
    aspect-ratio: 16/9;
    background-color: gray;
    background-image: url(https://i.pinimg.com/564x/0f/62/39/0f6239364f9dbf967d09d54b3aaf2467.jpg);
    background-position: center center;
    background-size: auto 100%;
    filter: grayscale(0%);
    display: flex;
    align-items: end;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.8, 0.01, 0.2, 1);
    transform-origin: center bottom;
    text-decoration: none;
}

#swi1{
    background-image: url(/assets/hero1.webp);
    background-position: left center;
}

#swi2{
    background-image: url(/assets/hero2.webp);
}

#swi3{
    background-image: url(/assets/hero3.webp);
}



.sw-img:hover{
    filter: grayscale(100%);
    background-size: auto 120%;
    transform: perspective(800px) rotateX(0deg);

}


.sw-title{
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    color: var(--primary);
    padding-left: 2%;
    transition: 0.2s transform ease-in-out;
    transform: translateY(100%);
    width: 100%;
    backdrop-filter: blur(5px)  ;
    text-decoration: none;
}


.sw-img:hover > .sw-title{
    transform: translateY(0);

}


.sel-works-info-box{
    display: flex;
    align-items: start;
    justify-content: start;
    height: 100px;
    width: 60%;
    background-color: var(--primary);
    border: var(--secondary) 2px solid;
    margin-left: 40px;

}


.hinfo{
    font-weight: 900;
    font-size: 40px;
    letter-spacing: -3px;
}

.info-text-box{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    height: 100%;
    width: 50%;
    font-family: "Archivo", sans-serif;
}

.viewall-btn-box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 50%;

}

.viewall-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: -2px;
    width: 80%;
    height: 50px;
    background-color: var(--secondary);
    border: var(--secondary) 2px solid;
    transition: 0.1s all;
    cursor: pointer;
    text-decoration: none;
    color: var(--black);
    cursor: pointer;
}

.viewall-btn div{
    text-decoration: none;
    cursor: pointer;
}

.viewall-btn:hover{
    background-color: var(--accent);
    border: var(--accent) 2px solid;
    color: var(--primary);
}

.viewall-btn div{
    padding-top: 0.2em;
    line-height: 1em;
}

.sel-works-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: visible;
    display: flex;
    flex-direction: row-reverse;

}

.sw-animbox{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(70%) translateY(50%);
}
    

.sw-arrow{
    offset-path: ellipse(60px 100px at 20% 80%);
    animation: circleAnim 70s infinite linear;
    offset-rotate: auto -90deg;
}

.sw-circle{
    offset-path: ellipse(100px 60px at 50% 50%);
    animation: circleAnim 40s infinite linear;
    offset-rotate: 0deg;
}

@keyframes circleAnim {
    0%{
        offset-distance: 0%;
    }
    100%{
        offset-distance: 100%;
    }
}

.footer{
    position: relative !important;
    display: flex;
    padding: 100px 30px 0px 30px;
    overflow: hidden;
    background-color: var(--black);
}

.contact-container{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.contact-pattern{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: var(--secondary) 2px solid;
    background-color: var(--primary);
}

.contact-box{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transform: rotate(-10deg);
}

.c-row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 20px;
    font-size: 145px;
    font-weight: 900;
    color: var(--secondary);
    letter-spacing: -5px;
    animation: footerAnim 30s linear infinite;
    white-space: nowrap;
}

.fr-1{
    margin-right: -520px;
}

.fr0{
    margin-right: -480px;
}

.fr1{
    margin-right: -440px;
}

.fr2{
    margin-right: -400px;
}

.fr3{
    margin-right: -360px;
}

.fr4{
    margin-right: -320px;
}

.fr5{
    margin-right: -280px;
}

.fr6{
    margin-right: -240px;
}

.fr7{
    margin-right: -200px;
}

.fr8{
    margin-right: -160px;
}

.fr9{
    margin-right: -120px;
}

.fr10{
    margin-right: -80px;
}

.fr11{
    margin-right: -40px;
}

.fr12{
    margin-right: 0px;
}

.fr13{
    margin-right: 40px;
}

.fr14{
    margin-right: 80px;
}

.celement{
    height: 120px;
    line-height: 1em;
    width: 1110px;
    
}

.sel-break{
    display: none;
    height: 0;
    flex-basis: 100%;
}

@keyframes footerAnim {
    0%{
        transform: translateX(+0px);
    }
    100%{
        transform: translateX(+1130px);
    }
}

@keyframes footerAnimAlt {
    0%{
        transform: translateX(+0px);
    }
    100%{
        transform: translateX(+2260px);
    }
}

.whitecontact-row{
    animation: footerAnimAlt 60s linear infinite;
}

.whitecontact{
    color: var(--white);
}

.footer-socials-box{
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    width: 100%;
}

.footer-socials{
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: row;
    column-gap: 20px;
    width: 90vw;
    height: 100px;
    background-color: var(--primary);
    border: var(--secondary) 2px solid;
    margin-bottom: 30px;
}

.social-links-box{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
}

.social-links-hey{
    text-decoration: none;
    color: var(--black);
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.6em;
    width: 200px;
    border: var(--secondary) 2px solid;
    background-color: var(--secondary);
    height: 40px;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.social-links-box > a:hover{
    background-color: var(--accent);
    color: var(--primary);
    border: var(--accent) 2px solid;

}
.social-links-hey-active{
    color:var(--black) ;
    background-color: var(--accent);
    border: var(--accent) 2px solid;
    transition: all 0.4s ease-in-out;

}

.info-text a{
    color: var(--accent);
    font-weight: 700;
}

.about-me-screen{
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.about-me-left{
    display: flex;
    width: 60%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.about-me-desc{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 740px;
    height: auto;
    background-color: var(--primary);
    border: var(--secondary) 2px solid;
    padding: 40px 80px ;
    font-family: "Archivo", sans-serif;
    font-size: 22px;
    color: var(--black);


}


.about-me-right{
    display: flex;
    width: 40%;
    height: 100%;
    justify-content: center;
    align-items: start;
    flex-direction: column;
}

.about-me-text{
    font-size: 100px;
    font-weight: 900;
    letter-spacing: -6px;
    height: 100px;
    overflow: hidden;
    transition: all 0.4s ease-out;
    cursor: default;
}

.about-me-effect-box{
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.about-me-effect{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: start;
    background-color: var(--secondary);
    padding: 20px;
    transition: all 0.2s linear;
}

.about-me-text-text{
    transition: all 0.7s ease-out;
}

.about-me-text-text-inactive{
    transform: translateY(100%);
}

.about-me-effect img{
    width: 500px;
}

.cool-wave-box{
    display: flex;
    width: 740px;
    height: 40px;
    margin-top: -1px;
}

.cool-wave-box div{
    height: 0%;
    width: 10%;
    background-color: var(--secondary);
    transition: all 0.3s ease-out;
}

.cool-wave-active{
    height: 100% !important;
    background-color: var(--accent) !important;
}


.what-ido-screen{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.what-ido-text-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    font-size: 100px;
    color: var(--black);
    font-weight: 900;
    letter-spacing: -6px;
    overflow: hidden;


}

.what-ido-text{
    transition: all 0.4s ease-out;
    cursor: default;

}

.what-ido-text-inactive{
    transform: translateY(100%);
}

.what-ido-cards-box{
    display: flex;
    width: 100%;
    height: auto;
    column-gap: 20px;
}

.what-ido-cards-box-left{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    height: auto;
    width: 50%;
    row-gap: 20px;
}

.what-ido-cards-box-right{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    height: auto;
    width: 50%;
    row-gap: 20px;
}

.ido-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 500px;
    height: auto;
    background-color: var(--primary);
    border: var(--secondary) 2px solid;
    padding: 10px;
    color: var(--black);
    transition: margin 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: default;
}

.ido-box:hover{
    background-color: var(--accent);
    border: var(--accent) 2px solid;
    color: var(--primary);
}

.ido-box-active{
    margin: 0px 20px;
}

.ido-title{
    font-size: 36px;
    font-weight: 900;

    width: 100%;
    line-height: 1.2em;
    letter-spacing: -3px;
    cursor: default;
}

.ido-list{
    font-family: "Archivo", sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1em;
}


.softwares-screen{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.soft-title-box{
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    font-size: 100px;
    color: var(--black);
    font-weight: 900;
    letter-spacing: -6px;
    overflow: hidden;
}

.soft-title{
    transition: all 0.4s ease-out;
    cursor: default;
}

.soft-title-inactive{
    transform: translateY(100%);
}

.soft-container{
    display: flex;
    row-gap: 20px;
    column-gap: 20px;
    width: 100%;
    padding: 20px;
    background-color: var(--secondary);
    justify-content: center;
    align-items: center;

}

.soft-title span{
    font-size: 22px;
    letter-spacing: 0px;
    font-family: "Archivo", sans-serif !important;
    font-weight: 500;
    margin-left: 20px;
}

.soft-box{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 400px;
    height: 100%;
    background-color: var(--primary);
    border: var(--secondary) 2px solid;
    padding: 10px;
    color: var(--black);
    transition: margin 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: default;
}

.soft-box:hover{
    background-color: var(--accent);
    border: var(--accent) 2px solid;
    color: var(--primary);
}

.soft-group{
    font-size: 36px;
    font-weight: 900;
    width: 100%;
    line-height: 1.2em;
    letter-spacing: -3px;
    cursor: default;
}

.soft-list{
    font-family: "Archivo", sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1em;
}

@media screen and (min-width: 2560px) {
    .sel-works-img-box{
        height: 350px;
    }


    .sw-animbox{
        transform: translateX(70%) translateY(100%);
    }

}


@media screen and (max-width: 1900px) {

    .footer-socials{
        flex-direction: column;
        height: auto;
        justify-content: space-between;
    }

    .social-links-box{
        padding: 20px;
        height: auto;
        justify-content: space-between;
    }

}

@media screen and (max-width: 1440px) {


    .sel-works-img-box{
        width: 100%;
    }


    .social-links-hey{
        font-size: 22px;
        height: 30px;
        width: 165px;
    }

    .footer-socials{
        height: auto;
    }



}

@media screen and (max-width: 1330px) {
    .menu-socials{
        margin-right: 80px;
    }

    .sel-works-info-box{
        width: 90%;
    }

    .sel-works-img-box{
        column-gap: 5px;
    }
    
}
@media screen and (max-width: 1366px) {
    body{
        font-size: 24px;
    }

    .break{
        display: none;
    }

    .hinfo{
        font-size: 30px;
    }



    .menu-socials-list > a{
        font-size: 22px;
        line-height: 1.4em;
        height: 30px;
    }

    .hsocials{
        padding: 10px 0px 0px 10px;
    }

    .menu-socials-list{
        justify-content: space-between;
        padding: 0px 10px 10px 10px;
    }

    .m-break{
        display: none;
    }

    .menu-socials{
        width: 200px;
        height: 300px;
    }

    .hsocials{
        font-size: 30px;
    }

    .mel-box > a{
        font-size: 70px;
    }

    .menu-el-box{
        height: 350px;
    }

    .select-effect-box{
        height: 350px;
    }


    

    .social-links-hey{
        font-size: 22px;
        height: 30px;
        width: 165px;
        line-height: 1.4em;
    }

    .footer-socials{
        height: auto;
    }

    .sel-works-text{
        font-size: 100px;
    }

    .info-text-box{
        font-size: 22px;
        width: 60%;
    }

    .viewall-btn-box{
        width: 40%;
    }

    .viewall-btn{
        height: 30px;
    }

    .about-me-effect img{
        width: 400px;
    }

    .about-me-desc{
        width: 600px;
        padding: 40px;
    }

    .cool-wave-box{
        width: 600px;
    }

    .soft-box{
        width: 300px;

    }

    .ido-box{
        margin: 0px !important;
    }

    .logo{
        font-size: 22px;
        line-height: 1em;
    }

    .nav-bar{
        height: 80px;
    }

    .nav-bar-alt{
        height: 80px;
    }

    .switch-box{
        height: 25px;

    }
    .switch-box div{
        width: 35px;

    }

    .menu-close-box{
        height: 80px;
        padding: 0px 20px;
        align-items: center;
    }
    
}

@media screen and (max-width: 1240px) {

    .footer-socials{
        width: 700px;
    }

    .social-links-box{
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .break{
        flex-basis: 100%;
        height: 0;
    }

    .menu-fullscreen{
        flex-direction: column-reverse;
    }
    
    .menu-socials-box{
        flex-direction: row-reverse;
        width: 100%;
        align-items: start;
        height: auto;
    }

    .menu-socials{
        margin-right: 0px;
        width: 685px ;
        height: auto;
        margin-top: 40px;
    }

    .menu-close-box{
        width: 100px;
    }

    .m-break{
        flex-basis: 100%;
        height: 0;
    }

    .menu-socials-list{
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 20px;
        justify-content: space-between;
        width: auto;
    }

    .menu-socials-list > a{
        width: 200px;
    }

    .hsocials{
        margin-bottom: 20px;
    }

    .menu-effect-active-alt{
        width: 20%;
    }

    .ido-box{
        width: 470px;
    }

}

@media screen and (max-width: 1105px) {

    .about-me-screen{
        flex-direction: column-reverse;
    }
    
    .about-me-left{
        height: 20%;
        width: 80%;
        margin-top: 10px;
        align-self: flex-end;
        align-items: start  ;
    }

    .about-me-right{
        height: auto;
        width: 80%;
        align-self: flex-end;
    }

    .about-me-effect img{
        width: 370px;
    }

    .sel-works-img-box{
        flex-direction: column;
        height: auto;
        row-gap: 20px
    }

    .sw-img{
        width: 100%;
        height: auto;
        background-size: 100% auto;
    }

    .sw-img:hover{
        filter: grayscale(100%);
        background-size: 120% auto;
        transform: perspective(800px) rotateX(0deg) translateZ(0px);
    
    }

    .double-vh-screen{
        height: 450vh;
    }

    .sel-works-box{
        height: 150vh;
    }

    .sw-title{
        transform: translateY(0);
        color: var(--primary);
        backdrop-filter: none;
        text-align: right;
        padding-right: 1%;
        mix-blend-mode: difference;
    }

    .sel-works-text-effect{
        height: 130px;
    }
}

@media screen and (max-width: 1024px) {
    .sel-works-text{
        line-height: 1em;
        padding-left: 20px;
    }

    .skills-box{
        column-gap: 30px;
    }

        /* BIG FIX*/

        .double-vh-screen{
            height: 4700px;
        }

        .sel-works-box{
            height: 1600px;
            margin-top: 100px;
        }

        .about-box{
            height: 3000px;
        }
        
            .about-me-screen{
                height: 1000px;
            }

            .what-ido-screen{
                height: 1000px;
            }

            .softwares-screen{
                height: 1000px;
            }

}

@media screen and (max-width: 1020px) {
    .ido-box{
        width: 400px;
    }

    .soft-container{
        flex-direction: column;
        row-gap: 10px;
        padding: 10px;
        transition: all 1.4s ease-in-out;
    }

    .soft-box{
        width: 50%;
    }

    .soft-title-box{
        align-items: start;
        padding-left: 20px;
    }

    .sel-works-text-effect{
        margin-bottom: -60px;
    }

    .sel-works-text{
        font-size: 85px;
    }

    .about-me-text{
        font-size: 85px;
    }

    .what-ido-text{
        font-size: 85px;
    }

    .soft-title{
        font-size: 85px;
    }

    .about-me-text{
        height: 80px;
    }





}

/*
@media screen and (max-width: 1020px) {
    .what-ido-cards-box{
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }

    .what-ido-cards-box-left{
        width: 100%;
        align-items: center;
    }

    .what-ido-cards-box-right{
        width: 100%;
        align-items: center;
    }
}*/

@media screen and (max-width: 900px) {



    .scrolldown-el{
        width: 200px;
        height: 70px;
    }


    .sel-break{
        display: flex;
        width: 0px;
    }





    /* FONT SIZES */

    body{
        font-size: 22px;
    }

    .hinfo{
        font-size: 26px;
    }

    .footer-socials{
        width: 580px;
    }

    .menu-socials-list > a{
        font-size: 22px;
        height: 30px;
        line-height: 1.3em;
        letter-spacing: -1px;
        width: calc(50% - 20px);
    }

    .menu-socials-list{
        justify-content: start;
        padding: 0px;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;
        width: 100%;
        flex-direction: column;

        
    }

    .menu-box{
        justify-content: flex-end;
        width: 90%;

    }

    .m-break{
        display: none;
    }

    .menu-socials{
        width: 600px;
        height: 192px;
        padding: 20px;
    }

    .hsocials{
        font-size: 26px;
        margin-bottom: 10px;
        padding: 0px;
    }

    .mel-box > a{
        font-size: 65px;
    }

    .menu-el-box{
        height: 350px;
        width: 800px;
    }

    .select-effect-box{
        height: 350px;
    }



    .social-links-hey{
        font-size: 22px;
        height: 30px;
        width: 165px;
        line-height: 1.3em;
        letter-spacing: -1px;
    }
/*
    .footer-socials{
        height: auto;
        width: 400px;
    }

    .social-links-box{
        flex-direction: column;
        height: 150px;
        row-gap: 10px;
    }
*/
    .sel-works-text-effect{
        height: auto;
        margin-bottom: -20px;
 
    }

    .sel-works-text{
        line-height: 0.9em;
    }

    .sel-works-info-box{
        justify-content: space-around;
    }

    .viewall-btn{
        height: 30px;
        width: 80%;
    }

    .viewall-btn-box{
        width: 30%;
    }

    .what-ido-cards-box{
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }

    .what-ido-cards-box-left{
        width: 100%;
        align-items: center;
    }

    .what-ido-cards-box-right{
        width: 100%;
        align-items: center;
    }

    .about-me-right{
        width: 90%;
    }

    .about-me-left{
        width: 90%;
    }

    .soft-title-box{
        height: 110px;
        padding-top: 30px;
        margin-bottom: 0px;
    }

    .soft-title{
        line-height: 0.4em;
        
    }

    .soft-title span{
        line-height: 1em;

    }

    .scrolltext-box{
        font-size: 26px;
    }
    
    .scrolldown-el{
        width: 300px;
    }

    .about-me-effect img{
        width: 320px;
    }

    .sel-works-text{
        transition: all 0.3s ease-out;
    }
}

@media screen and (min-width: 900px) {
        .line-break{
            display: none;
        }
}

@media screen and (max-width: 700px) {

    .info-text-box{
        font-size: 19px;
        width: 100%;
    }

    .sel-works-info-box{
        flex-direction: column;
        margin-left: 20px;
        height: auto;
        padding: 20px;
        row-gap: 20px;
        align-items: end;
        width: 400px;
    }

    .viewall-btn{
        width: 100%;
    }
    
    .viewall-btn-box{
        width: 160px;
    }

    .about-me-desc{
        font-size: 19px;
        width: 500px;
    }

    .cool-wave-box{
        width: 500px;
    }

    .about-me-left{
        width: 96%;
    }
    .about-me-right{
        width: 96%;
    }

    .footer-socials{
        width: 400px;
    }

    .social-links-box{
        flex-direction: column;
        height: 150px;
        column-gap: 20px;
    }

    .soft-title-box{
        justify-content: start;
    }

    .soft-box{
        width: 63% ;
    }

    .loading-text{
        font-size: 36px;
    }

    .double-vh-screen{
        padding: 40px;
    }
}

@media screen and (max-width: 570px) {

    .menu-socials{
        display: none;
    }

    .sel-works-text{
        font-size: 70px;
    }

    .about-me-text{
        font-size: 70px;
    }

    .what-ido-text{
        font-size: 70px;
    }

    .soft-title{
        font-size: 70px;
    }

    .about-me-text{
        height: 70px;
    }

    
    .soft-box{
        width: 70% ;
    }
}

@media screen and (max-width: 550px) {

    .about-me-desc{
        width: 370px;
        padding: 20px;
    }

    .cool-wave-box{
        width: 370px;
    }
    .about-me-left{
        justify-content: start;
        margin-top: 20px;
    }

    .soft-box{
        width: 80% ;
    }

    .menu-effect{
        width: 20%;
    }
    
    .menu-effect-active-alt{
        width: 70%;
    }

}

@media screen and (max-width: 510px) {

    .social-links-box{
        height: auto;
    }

    .footer-socials{
        width: auto;
    }

}

@media screen and (max-width: 465px) {

.soft-box{
    width: 100% ;
}

.sel-works-text{
    font-size: 60px;
}

.about-me-text{
    font-size: 60px;
}

.what-ido-text{
    font-size: 60px;
}

.soft-title{
    font-size: 60px;
}

.sel-works-info-box{
    width: calc(100% - 40px);
    margin-left: 20px;
}

.ido-box{
    width: calc(100% - 40px);
}

.about-me-desc{
    width: calc(100% - 20px);
}

.cool-wave-box{
    width: calc(100% - 20px);

}

.menu-box{
    width: 100%;
}



}

@media screen and (max-width: 380px) {

            /* BIG FIX*/

            .double-vh-screen{
                height: 3600px;
            }
    
            .sel-works-box{
                height: 1200px;
                margin-top: 0px
            }
    
            .about-box{
                height: 2400px;
            }
            
                .about-me-screen{
                    height: 800px;
                }
    
                .what-ido-screen{
                    height: 800px;
                }
    
                .softwares-screen{
                    height: 800px;
                }

    .sel-works-text{
        font-size: 55px;
    }

    .about-me-text{
        font-size: 55px;
    }

    .what-ido-text{
        font-size: 55px;
    }

    .soft-title{
        font-size: 55px;
    }
}