/* Fonts */
@font-face{
    font-family: font-1;
    src: url(./Assets/Fonts/tt_trailers_bold-webfont.woff2);
}
@font-face{
    font-family: font-2;
    src: url(./Assets/Fonts/SuisseIntl-Book.b94180ea.woff2);
}

/* Resetting Styles */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    cursor: none;
}

a{
    color: white;
    text-decoration: none;
}

:root{
    --color-text: #fff;
    --background-body: #070B04;
    --background-loader: #272b14;
    --color-loader-text: #f1f0ef;

    --scrollbar-track: var(--background-loader);
    --scrollbar-thumb: #6f7a34;
    --scrollbar-thumb-hover: #575f29;
}

/* Scrollbar */
::-webkit-scrollbar{
    width: 8px;
}
::-webkit-scrollbar-track{
    background-color: var(--scrollbar-track);
    margin-block: 6px;
    border-radius: 100vw;
}
::-webkit-scrollbar-thumb{
background-color: var(--scrollbar-thumb);
border: 1px solid var(--scrollbar-track);
border-radius: 100vw;
}
::-webkit-scrollbar-thumb:hover{
    background-color: var(--scrollbar-thumb-hover);
}

body{
    background: var(--background-body) url(./Assets/Images/background-tile.webp)repeat center;
    color: var(--color-text);
    font-family: font-1;
    letter-spacing: 1px;
}

/* Cursor */
.small-cursor{
    position: fixed;
    top: var(--small-cursor-top);
    left: var(--small-cursor-left);
    height: 10px;
    width: 10px;
    background-color: rgb(145, 214, 18);
    transform: translate(-50%,-50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    transition: all 0s ease;
}

.cursor{
    position: fixed;
    height: 60px;
    width: 60px;
    top:var(--cursor-top);
    left:var(--cursor-left);
    border: 2px solid rgb(130, 165, 65);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    transition: all .1s linear;
}

.cursor::after{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: rgb(145, 214, 18);
    scale: 0;
    pointer-events: none;
    transition: all .2s ease;
}

.cursor.clicked::after{
    scale: .9;
}

/* Loader */
.loader{
    display: flex;
    justify-content: center;
    align-items: center;
position: fixed;
/* inset: 0; */
height: 100%;
width: 100vw;
background-color: var(--background-loader);
z-index: 10;
}

.loader__ol{
    list-style: disc;
    font-size: clamp(1.5625rem, 0.6696rem + 4.4643vw, 7.8125rem); 
    color: var(--color-loader-text);
}

/* Header */
.header{
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.5em 2.7em;
}

.header > *{
    height: 100%;
}

.header__left{
    transition: all .1s ease;
width: min-content;
overflow: hidden;
}

.header__left__logo__cont{
    display: flex;
    gap: .6em;
    transform: translateX(-103%);
    transition: all .6s ease;
}

.header__left__logo__cont:hover{
    transform: translateX(0);
}

.header__left__logo__cont > a{
    flex-shrink: 0;
}

.header__left__logo{
height: 100%;
color: var(--color-text);
font-size: clamp(1.375rem, 0.9647rem + 2.0513vw, 4.375rem);
}

.header__right{
    display: flex;
    gap: 30px;
    letter-spacing: 7px;
    width: min-content;
}

.header__right__links{
    padding: .1em .2em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.375rem, 0.9647rem + 2.0513vw, 4.375rem);
    transition: all 0.1s ease;
}

/* Hero */
.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    color: transparent;
    position: relative;
    height: 100vh;
    width: 100%;
    background-position: center;
    background-size: cover;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.hero > img{
    z-index: -1;
    position: absolute;
    inset: 0;
    height: 100vh;
    width: 100%;
    filter: blur(1px);
    -webkit-mask-image: linear-gradient(green,green,green,green,green,green, transparent);
    mask-image: linear-gradient(green,green,green,green,green,green, transparent);
}

.hero__div{
    position: relative;
    text-align: center;
}

.hero__div  *{
    transition: all .3s ease;
}

.hero__div__intro{
    color: var(--color-text);
    text-transform: uppercase;
    font-size: clamp(2.75rem, 1.8098rem + 4.7009vw, 9.625rem);
    white-space: nowrap;
}

.hero__div__intro:hover{
   color: transparent;
   -webkit-text-stroke: 1px var(--color-text);
}

.hero__div__cta{
    position: relative;
    font-family: font-1;
    font-size: clamp(1.375rem, 0.9647rem + 2.0513vw, 4.375rem); 
padding: .5em 1em;
border-radius: 1em;
outline: none;
border: 1px solid var(--color-text);
margin-top: 1em;
background-color: transparent;
color: var(--color-text);
backdrop-filter: blur(5px);
letter-spacing: 6px;
overflow: hidden;
transition: all .001s ease;
}

.hero__div__cta::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: -100%;
    background-color: #ffffff;
    transition: all .5s ease;
    z-index: -1;
}

.hero__div__cta:hover::before{
  inset: 0;
}

.hero__div__cta:hover{
  color: #000;
}

.hero__div__cta > a{
    color: inherit;
}

.scroll-down{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 6%;
    left: 50%;
    translate: -50% 0;
    padding-right: 1.2em;
    border-radius: 1em;
    border: 1px solid var(--color-text);
    height: clamp(1.875rem, 1.6071rem + 1.3393vw, 3.75rem);
white-space: nowrap;
}

.scroll-down__svg{
height: 100%;
fill: #fff;
width: min-content;
}

.scroll-down__text{
color: rgb(255, 255, 255);
font-size: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.875rem);
font-weight: 100;
}

/* Page-2 */
.page{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 70px 100px;
}

.page-2{
   display: flex;
   flex-direction:column ;
   gap: 30px;
   padding: 100px 100px 200px 100px;
}

.page-2__div{
    position: relative;
    display: flex;
    justify-content: space-between;
    font-family: font-2;
    font-size: clamp(0.875rem, 0.6875rem + 0.8375vw, 2.1875rem);
    line-height: 1.6em;
    width: 100%;
    max-height: 100%;
    padding: 1.4em 1em 1em 1em;
    border-radius: 10px;
    background-color: #070b04c4;
}

.page-2__div__about{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: flex-start; */
    gap: 3em;
    font-weight: 100;
    flex-grow: 1;
    max-width: 55%;
    min-height: 100%;
    /* background-color: red; */
}

.page-2__div__about > h1::before{
    position: absolute;
    content: "About Me";
    color: red;
    z-index: -1;
    translate: -1% 2%;
}

.page-2__div__about > span{
    position: relative;
    z-index: 2;
}

.resume{
    text-align: center;
    background-color: #75B524;
    padding: 0.4em 2em;
    border-radius: 20px;
    border: 1px solid rgb(255, 255, 255);
    outline: none;
    transition: all .2s ease;
    box-shadow: 0 0 10px 1px rgba(118, 181, 36, 0.3);
}

.resume:hover{
    background-color: #619122;
    scale: 1.04;
    box-shadow: 0 0 10px 1px rgba(118, 181, 36, 0.7);
}

.page-2__div__skills{
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 15px;
width: fit-content;
height: 100%;
width: 30%;
line-height: inherit;
}

.page-2__div__skills > h1::before{
    position: absolute;
    content: "Skills";
    color: red;
    z-index: -1;
    translate: -2% 2%;
}

.skills__div{
    display: flex;
    align-items: center;
    gap: 10px;
}

.skills__svg{
width: 50px;
aspect-ratio: 1 / 1;
fill: white;
transition: all .3s ease;
}

.skills__div:hover > .skills__svg{
    fill: greenyellow;
}

.skills__to__learn__div{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    font-size: clamp(0.5rem, 0.3214rem + 0.8929vw, 1.75rem);
    line-height: inherit;
}

.back--titles{
    position: absolute;
   color: greenyellow;
    top: 0;
    left: 0;
    translate: -15% -130%;
    font-size: clamp(4.375rem, 4.1071rem + 1.3393vw, 6.25rem);
    opacity: 0.6;
    z-index: -1;
    font-weight: 999;
    letter-spacing: 2px;
}

/* Page 3 */
.page-3{
    position: relative;
justify-content: flex-start;
flex-direction: column;
gap: 60px;
height: 100%;
min-height: 100vh;
}

.page-3 > h1{
    position: absolute;
    color: greenyellow;
     top: 0;
     left: 50%;
     translate: -50% -50%;
     font-size: clamp(1.875rem, 0.3571rem + 7.5893vw, 12.5rem);
     opacity: 0.6;
     z-index: -1;
     font-weight: 999;
     letter-spacing: 2px;
}

.page-3 > h1::before{
    position: absolute;
    content: "My Projects";
    color: red;
    z-index: -1;
    translate: -1% 1%;
}

.page-3__div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px;
    height: 100%;
    width: 100%;
}

/* Cards */
.page-3__div__card{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex: 1;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 2px #ffffff52;
    overflow: hidden;
    transition: box-shadow .1s linear;
}

.page-3__div__card:hover{
    box-shadow: 0px 0px 25px 6px #97dd42;
}

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

/* Card Description */
.card__description{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 9px;
    position: absolute;
    height: 100%;
    width: 100%;
    padding: .65em 5.6em 3.8em 5.6em;
    /* background-color: rgba(0, 0, 0,0.2); */
    background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8));
    backdrop-filter: blur(30px);
    opacity: 0;
    overflow: hidden;
    transition: all .5s ease;
}

.page-3__div__card:hover > .card__description{
opacity: 1;
}

.visit-site{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 39%;
    width: 18%;
    translate: 35% -35%;
    background-color: white;
    border-radius: 50%;
    color: black;
    transition: all .2s ease;
    overflow: hidden;
}

.visit-site:hover{
    background-color: yellowgreen;
    scale: 1.1;
}

.visit-site:hover > .visit-site__svg{
    fill: white;
}

.visit-site::before{
    position: absolute;
    content: "";
    height: 120%;
    width: 120%;
    border-radius: inherit;
    border: 50px solid rgb(110, 5, 5);
    user-select: none;
   translate: -70% 70%;
   transition: all 1.1s ease;
}

.visit-site::after{
    position: absolute;
    content: "";
    height: 101%;
    width: 101%;
    border-radius: inherit;
    border: 50px solid rgb(5, 73, 19);
    user-select: none;
   translate: -140% 140%;
   transition: all 1.1s ease;
}

.visit-site:hover::before,.visit-site:hover::after{
    translate: 0;
}

.visit-site__svg{
    position: absolute;
    left: 40%;
    top: 60%;
    translate: -50% -50%;
    fill: black;
    font-size: clamp(1.5625rem, -0.6401rem + 3.9157vw, 5.625rem);
    transition: all .5s ease;
}

.description__info__div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.description__title{
    font-size: clamp(2.5rem, -2.9rem + 9.63vw, 12.5rem);
    color: #82cc27de;
}

.description__info{
max-width: 70%;
font-size: clamp(0.625rem, -0.3916rem + 1.8072vw, 2.5rem);
font-family: font-2;
font-weight: 100;
line-height: 2em;
text-wrap: balance;
}

.description__tags__div{
display: flex;
justify-content: space-between;
margin-top: 1em;
}

.description__tech{
width: 70%;
font-family: font-2;
font-size: clamp(0.625rem, -0.3916rem + 1.8072vw, 2.5rem);
}

.description__tech > h2{
margin-bottom: 10px;
color: #76B92B;
}

.description__links{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 30%;
}

.description__links > a{
    background-color: rgba(255, 255, 255, 0.123);
    padding: .6em 1.8em;
    border-radius: 100px;
    font-size: clamp(0.875rem, -0.8193rem + 3.012vw, 4rem);
    transition: all .3s ease;
}

.description__links > a:hover{
    background-color: #fff;
    color: black;
}

/* Footer */
.footer{
    padding: 50px 20px 10px 20px;
    background-color: #1b1e197c;
}

.footer__top__div{
    display: flex;
    flex-direction: column;
height: 100%;
padding: 10px 30px 30px 30px;
}

.top__div__cont{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: min-content;
    font-size: clamp(2.5rem, 0.4669rem + 3.6145vw, 6.25rem);
}

.top__div__left{
text-wrap:balance;
text-align: center;
}

.top__div__right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    height: min-content;
}

.footer__x{
    margin-right: 15px;
}

.footer__x:hover{
    background-color: #fff;
    fill: black;
}

.footer__insta:hover{
    background: linear-gradient(to top right, #FDA90C, #FF00DB);
}

.top__div__right__links svg{
    fill: #fff;
    padding: 10px;
    border-radius: 10px;
}

.bottom__div__cont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.bottom__div__image{
    height: 250px;
    width: 250px;
    translate: 25% 0;
    border-radius: 50%;
    background: url(./Assets/Images/footer-image.jpg);
    background-position: center;
    background-size: cover;
}

.footer__bottom__div{
    display: flex;
    justify-content: space-between;
    gap: 5px;
padding: 1em 0em .2em 0;
font-size: clamp(0.625rem, 0.4028rem + 1.1111vw, 2.25rem);
border-top: 1px solid #fff;
}

@media all and (max-width:900px){
    .page-2{
        padding: 70px 10px;
     }

    .page-2__div{
        gap: 5em;
        flex-direction: column;
    }

    .page-2__div__about{
      min-width: 100%;
    }

    .page-2__div__skills{
        min-width: 100%;
        margin-top: 2em;
      }

      .back--titles{
        top: 0;
        left: 50%;
        translate: -50% -150%;
        font-size: clamp(1.625rem, -0.0991rem + 8.6207vw, 4.75rem);
        opacity: 0.7;
        z-index: 1;
        font-weight: 999;
        letter-spacing: 2px;
    }

    .page-3{
        padding: 70px 20px;
    }

    /* div cards */
    .page-3__div__card{
        flex-direction: column;
    }
     
    .card__description{
        position: static;
        padding: 2em;
    }

    .visit-site{
        display: flex;
        justify-content: center;
        align-items: center;
        translate: 0;
        border-radius: 0;
        width: 4em;
        height: 4em;
        border-bottom-left-radius: 10px;
    }

    .visit-site::before{
        display: none
    }
    
    .visit-site::after{
      display: none
    }
    

    .visit-site__svg{
        position: static;
        translate: 0;
    }

    .card__description{
        opacity: 1;
    }

    .description__tags__div{
        flex-direction: column;
        gap: 2em;
    }

    .description__info{
        max-width: 100%;
    }

    .description__tech{
        width: 100%;
    }

    .description__tech > span{
        line-height: 2em;
    }

    .description__links{
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Footer */
    .footer__top__div{
        padding: 0;
    }

    .top__div__cont{
        flex-direction: column;
        gap: 1em;
        font-size: 40px;
    }

    .top__div__left {
       text-align: center;
    }

    .top__div__left > h2 br {
        content: "";
      }
      
      .top__div__left > h2 br:after {
        content: " ";
      }

    .top__div__right{
        align-items: center;
        text-align: center;
        color: #76B92B;
    }

    .bottom__div__cont{
        border: none;
    }

    .bottom__div__image{
        min-height: 100%;
        min-width: calc(100% + 40px);
        translate: 0 0;
        border-radius: 0%;
        background-size: cover;
    }

    .footer__bottom__div{
        border: none;
    }
}

@media all and (max-width:500px){
    .cursor, .small-cursor{
        display: none;
        }
    
    .header{
padding: 1em 1em;
    }

.header__right{
    gap: 0px;
}
}