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


*,
*::after,
*::before{
    box-sizing: border-box;
}
::-webkit-scrollbar {
    width: 10px;
    border-radius: 30px;
}
::-webkit-scrollbar-track {
    background: #1A1A1D;
    border-radius: 30px;
}
::-webkit-scrollbar-thumb {
    background: #1d1d1a;
    border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover {
    background: #1d1d1a;
    border-radius: 30px;
}
a{
    text-decoration: none;
    color: white;
}
html{
    scroll-behavior: smooth;
    font-size: clamp(14px, 0.9vw, 18px);

}
*::selection{
    background-color: white;
    color: #1A1A1D;
}
body{
font-size: clamp(0.5rem, 1rem, 2rem);
    margin: 0 auto;
    background-color: #1A1A1D;
    color: white;
    overflow: hidden;
    transition: transform 0.5s ease; /* smooth zoom */
    transform-origin:top center;
}

h1, h2, h3 {
  font-weight: 700;
}



p {
  font-size: clamp(1rem, 1vw, 1.25rem);
}

.zoomed-out {
      transform: scale(0.20) translateX(-150px); 
        transform-origin: 22vw 100px /* ensures movement is predictable */
/* 80% zoom */
    }

.index{
    display: block;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left:100vw;
    overflow: hidden;
    transition: transform 1s ease-in-out;
    border-left: white solid 4px;
    border-top:  white solid 4px;
    border-right:  white solid 4px;

}
.index-title{
    font-family: "Kalam", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(2rem, 3.5rem, 4rem);
    width: fit-content;
    margin: 100px auto;
    color: white;
    padding: 0rem clamp(1rem, 2vw, 3rem);
    border-radius: clamp(0.4rem, 0.75vw, 1rem);
}


                .index_b{
                    width: 20px;
                    margin: 13vh auto;
                }
                .index_b_arrows
                {
                display: block;
                -ms-transform: rotate(45deg); /* IE 9 */
                -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
                transform: rotate(45deg);
                border-right: 2px solid white;
                border-bottom: 2px solid white;
                margin: 0 0 3px 4px;
                width: 20px;
                height: 20px;
                }
                .one
                {
                margin-top: 1px;
                }

                .one, .two, .three
                {
                    -webkit-animation: arrow-anim 1s infinite;
                    -moz-animation: arrow-anim 1s infinite;
                    animation: arrow-anim 1s infinite;
                
                }

                .one
                {
                -webkit-animation-delay: .1s;
                -moz-animation-delay: .1s;
                -webkit-animation-direction: alternate;
                
                animation-direction: alternate;
                animation-delay: alternate;
                }

                .two
                {
                -webkit-animation-delay: .2s;
                -moz-animation-delay: .2s;
                -webkit-animation-direction: alternate;
                
                animation-delay: .2s;
                animation-direction: alternate;
                
                margin-top: -6px;
                }

                .three
                {
                -webkit-animation-delay: .3s;
                -moz-animation-delay: .3s;
                -webkit-animation-direction: alternate;
                
                animation-delay: .3s;
                animation-direction: alternate;
                
                
                margin-top: -6px;
                }
                @-webkit-keyframes arrow-anim {

                    0%   { opacity: 0;}
                    50%  { opacity: .5;}
                    100% { opacity: 1;}
                }
                @-moz-keyframes arrow-anim {
                
                    0%   { opacity: 0; }
                    50%  { opacity: .5; }
                    100% { opacity: 1; }
                }
                @-o-keyframes arrow-anim {
                
                    0%   { opacity: 0; }
                    50%  { opacity: .5; }
                    100% { opacity: 1; }
                }
                @keyframes arrow-anim {
                
                    0%   { opacity: 0; }
                    50%  { opacity: .5; }
                    100% { opacity: 1; }
                }
                



.skills_r {
    position: absolute;
    top: 50%;
    left: 96.5%;
    transform: translate(-50%, -50%);
    transform: rotate(270deg);
    cursor: pointer;
    z-index: 1;
}

.skills_r span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.skills_r span:nth-child(2) {
    animation-delay: -0.2s;
}

.skills_r span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}

.skills_l {
    position: absolute;
    top: 50%;
    left: 3.5%;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
}

.skills_l span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.skills_l span:nth-child(2) {
    animation-delay: -0.2s;
}

.skills_l span:nth-child(3) {
    animation-delay: -0.4s;
}

.skills_u {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(180deg);
    cursor: pointer;
}

.skills_u span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.skills_u span:nth-child(2) {
    animation-delay: -0.2s;
}

.skills_u span:nth-child(3) {
    animation-delay: -0.4s;
}



.skills_b {
    position: absolute;
    top: 91.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
    cursor: pointer;
}

.skills_b span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.skills_b span:nth-child(2) {
    animation-delay: -0.2s;
}

.skills_b span:nth-child(3) {
    animation-delay: -0.4s;
}

:root {  
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
}

@keyframes background-pan {
from {
    background-position: 0% center;
}

to {
    background-position: -200% center;
}
}
  
@keyframes scale {
from, to {
    transform: scale(0);
}

50% {
    transform: scale(1);
}
}

@keyframes rotate {
from {
    transform: rotate(0deg);
}

to {
    transform: rotate(180deg);
}
}
    
.one-liner h1 {
    color: white;
    font-family: "Rubik", sans-serif;
    font-size: clamp(2em, 2vw, 4em);
    font-weight: 400;
    margin: 0px;
    padding: 20px;
    text-align: center;
}

.one-liner h1 > .magic {
    display: inline-block;
    position: relative;
}

.one-liner h1 > .magic > .magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(
      to right,
      var(--purple),
      var(--violet),
      var(--pink),
      var(--purple)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}
.skills{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 0;
    left: 100vw;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Orbitron", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    border-right: white solid 4px;
}
.skills_bar{
    width: 40vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 10vw;
    margin-top: 10vh;
}
.python{
    display: flex;
    flex-direction: wrap;
    width: 375px;
    justify-content: space-between;
}
.html_css{
    display: flex;
    flex-direction: wrap;
    width: 375px;
    justify-content: space-between;
}
.cpp{
    display: flex;
    flex-direction: wrap;
    width: 375px;
    justify-content: space-between;
}
.django{
    display: flex;
    flex-direction: wrap;
    width: 375px;
    justify-content: space-between;
}
.gml{
    display: flex;
    flex-direction: wrap;
    width: 375px;
    justify-content: space-between;
}
.js{
    display: flex;
    flex-direction: wrap;
    width: 375px;
    justify-content: space-between;
}
.skills-car{
    z-index: 999999999;
    animation-delay: 0.5s;
    margin: 100vh;
}
@keyframes carAnim{
    0% {margin: 50vh 200vw}
    100% {margin:100vh 70vw}       
}
.skill-bar{
    width: 243px;
    height: 20px;
    border: 3px solid white;
    display: flex;
    flex-direction: row;
}
.bar-1{
    width: 80px;
    height: 16px;
    border-right: 2.5px solid white;
    z-index: -100;
}
.bar-2{
    width: 80px;
    height: 16px;
    border-right: 2.5px solid white;
    z-index: -100;
}
.bar-3{
    width: 80px;
    height: 16px;
    z-index: -100;
}
.orange{
    background-color:#FFD700 ;
    width: 100%;
    height: 100%;
    z-index:0;
}
.green{
    background-color: #32CD32;
    width: 100%;
    height: 100%;
    z-index:0;
}
.purple{
    background-color: #9B30FF;
    width: 100%;
    height: 100%;
    z-index:0;
}
.skills img{
    margin: -25vw 124vh;
    z-index: 99999999999;
}
/* okay so the problem is with the top being displaced and the position being fixed, they both seem to be clashing. also try to download the font for it to work "offline". */

.chess{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}



.chess_r {
    visibility: hidden;
    position: absolute;
    top: 48.5%;
    left: 96.5%;
    transform: translate(-50%, -50%);
    transform: rotate(270deg);
    cursor: pointer;
}

.chess_r span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.chess_r span:nth-child(2) {
    animation-delay: -0.2s;
}

.chess_r span:nth-child(3) {
    animation-delay: -0.4s;
}


.chess_l {
    position: absolute;
    top: 50%;
    left: 3.5%;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
}

.chess_l span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.chess_l span:nth-child(2) {
    animation-delay: -0.2s;
}

.chess_l span:nth-child(3) {
    animation-delay: -0.4s;
}

.chess_u {
    visibility:hidden;
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(180deg);
    cursor: pointer;
}

.chess_u span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.chess_u span:nth-child(2) {
    animation-delay: -0.2s;
}

.chess_u span:nth-child(3) {
    animation-delay: -0.4s;
}



.chess_b {
    position: absolute;
    top: 91.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
    cursor: pointer;
}

.chess_b span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.chess_b span:nth-child(2) {
    animation-delay: -0.2s;
}

.chess_b span:nth-child(3) {
    animation-delay: -0.4s;
}
.chess_container{
font-size: clamp(0.5rem, 2rem, 3rem);    
}
.chessboard_container{
    width: 35vw;
    height: 70vh;
    border-radius: 30px;
    border: 3px white solid;
    margin: 20vh 15vw;
}
.chessboard_inner_container{
    padding: 20px;
    margin-top: 5px;
}
.box{
    width: 55px;
    height: 55px;
    border: 1px solid white;
    margin-left: -1px;
    
}
.row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
.live-stats{
    width: 35vw;
    height: 25vh;
    border-radius: 30px;
    margin: -75vh 55vw;
}
.chess_table_title{
font-size: clamp(0.5rem, 1.2rem, 1.7rem);
    padding-left: 20px;
    padding-right: 20px;
    padding-left: 20px;
}
.bullet{
    border:2px solid white;
    border-radius: 10px;
font-size: clamp(0.5rem, 1.2rem, 1.7rem);
    padding-left: 20px;
    padding-right: 20px;
}
.blitz{
    border:2px solid white;
    border-radius: 10px;
font-size: clamp(0.5rem, 1.2rem, 1.7rem);
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
.rapid{
    border:2px solid white;
    border-radius: 10px;
font-size: clamp(0.5rem, 1.2rem, 1.7rem);
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
.col{
    display: flex;
    flex-direction: column;
}
.row{
    display: flex;
    flex-direction: row;
}
.white{
    background-color: white;
}

.projects{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 0;
    left: 100vw;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    border-right:  white solid 4px;
}

.projects_r {
    position: absolute;
    top: 50%;
    left: 96.5%;
    transform: translate(-50%, -50%);
    transform: rotate(270deg);
    cursor: pointer;
}

.projects_r span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.projects_r span:nth-child(2) {
    animation-delay: -0.2s;
}

.projects_r span:nth-child(3) {
    animation-delay: -0.4s;
}


.projects_l {
    position: absolute;
    top: 50%;
    left: 3.5%;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
}

.projects_l span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.projects_l span:nth-child(2) {
    animation-delay: -0.2s;
}

.projects_l span:nth-child(3) {
    animation-delay: -0.4s;
}

.projects_u {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(180deg);
    cursor: pointer;
}

.projects_u span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.projects_u span:nth-child(2) {
    animation-delay: -0.2s;
}

.projects_u span:nth-child(3) {
    animation-delay: -0.4s;
}



.projects_b {
    position: absolute;
    top: 91.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
    cursor: pointer;
}

.projects_b span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.projects_b span:nth-child(2) {
    animation-delay: -0.2s;
}

.projects_b span:nth-child(3) {
    animation-delay: -0.4s;
}









.projExtLink:hover{
    color: #1A1A1D;
    background-color: white;;
}

















.photography{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 200vh;
    left: 0;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.photography_r {
    position: absolute;
    top: 50%;
    left: 96.5%;
    transform: translate(-50%, -50%);
    transform: rotate(270deg);
    cursor: pointer;
    visibility:hidden;
}

.photography_r span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.photography_r span:nth-child(2) {
    animation-delay: -0.2s;
}

.photography_r span:nth-child(3) {
    animation-delay: -0.4s;
}


.photography_l {
    position: absolute;
    top: 50%;
    left: 3.5%;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
}

.photography_l span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.photography_l span:nth-child(2) {
    animation-delay: -0.2s;
}

.photography_l span:nth-child(3) {
    animation-delay: -0.4s;
}

.photography_u {
    visibility: hidden;
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(180deg);
    cursor: pointer;
}

.photography_u span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.photography_u span:nth-child(2) {
    animation-delay: -0.2s;
}

.photography_u span:nth-child(3) {
    animation-delay: -0.4s;
}



.photography_b {
    position: absolute;
    top: 91.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
    cursor: pointer;
}

.photography_b span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.photography_b span:nth-child(2) {
    animation-delay: -0.2s;
}

.photography_b span:nth-child(3) {
    animation-delay: -0.4s;
}


.image-track-container{
    height: 25vh;
    width: 25vw;
    margin: auto;
    position:absolute;
    top:0;
    left: 0;
    
}
#image-track {
  display: flex;
  gap: 4vmin;
  position: absolute;
  left: 0%;
  top: 0%;
  transform: translate(0%, -50%); 
  user-select: none; /* -- Prevent image highlighting -- */
}




.certs{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.certs_b {
    visibility: hidden;
    position: absolute;
    top: 91.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
    cursor: pointer;
}

.certs_b span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.certs_b span:nth-child(2) {
    animation-delay: -0.2s;
}

.certs_b span:nth-child(3) {
    animation-delay: -0.4s;
}


.certs_r {
    visibility: hidden;
    position: absolute;
    top: 49%;
    left: 96.5%;
    transform: translate(-50%, -50%);
    transform: rotate(270deg);
    cursor: pointer;
    z-index: 1;
}

.certs_r span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.certs_r span:nth-child(2) {
    animation-delay: -0.2s;
}

.certs_r span:nth-child(3) {
    animation-delay: -0.4s;
}

.experience{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 200vh;
    left: 0;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.experience_r {
    visibility: hidden;
    position: absolute;
    top: 48.5%;
    left: 96.5%;
    transform: translate(-50%, -50%);
    transform: rotate(270deg);
    cursor: pointer;
}

.experience_r span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.experience_r span:nth-child(2) {
    animation-delay: -0.2s;
}

.experience_r span:nth-child(3) {
    animation-delay: -0.4s;
}


.experience_b {
    visibility: hidden;
    position: absolute;
    top: 91.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
    cursor: pointer;
}

.experience_b span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.experience_b span:nth-child(2) {
    animation-delay: -0.2s;
}

.experience_b span:nth-child(3) {
    animation-delay: -0.4s;
}



.image {
width: 40vmin;
position: absolute;
transform: translate(-50%, -50%);
}

.image[data-status="inactive"] {
display: none;
}

.image[data-status="active"] {
display: block;
}


.cli{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}


.cli_l {
    position: absolute;
    top: 50%;
    left: 3.5%;
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
}

.cli_l span {
    display: block;
    width: 1vw;
    height: 1vw;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.cli_l span:nth-child(2) {
    animation-delay: -0.2s;
}

.skills_l span:nth-child(3) {
    animation-delay: -0.4s;
}


.finalCard{
    display: block;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    position:absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    transition: transform 1s ease-in-out;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.dot-card{
    position: absolute;
    top: 200vh;
    left: -100vw;
}
.circle-dot{
    width: 80vh;
    height: 80vh;
    position: absolute;
    top: 5vw;
    right: -75vw;
    border-radius: 50%;
    background-color: white;
}

.podium{
    position: relative;
    top:5vw;
    left:20vw;
    height:60vh;
    width: 60vw; 
    display:flex;
    justify-content: center;
    align-items: flex-end;
    gap:2vw
}
.projectOne{

}
.projectTwo{

}
.projectThree{

}
.cardProjectOne{
    border:2px solid white;
    border-radius: 30px;
    height: 40vh;
    width:20vw;
    margin-bottom:1vw
}
.cardProjectTwo{
    border:2px solid white;
    border-radius: 30px;
    height: 45vh;
    width:20vw;
    margin-bottom:1vw
}
.cardProjectThree{
    border:2px solid white;
    border-radius: 30px;
    height: 35vh;
    width:20vw;
    margin-bottom:1vw
}
.baseProjectOne{
    align-content: center;
    width:20vw;
    height:7vh;
    border:3px solid white;
    border-radius: 40px;
}
.baseProjectTwo{
    color:white;
    align-content: center;
    isolation: isolate; 
    margin: auto;
    width:20vw;
    height:9vh;
    border:3px solid white;
    border-radius: 40px;
    position: relative;
    overflow:hidden;
    transition: color 0.3s;
}


.baseProjectTwo::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:0; height:100%;
  background:white;
  mix-blend-mode:difference;
  z-index:2;                 /* <- MUST be above the text */
  pointer-events:none;
  transition:width .35s ease;
}

.baseProjectTwo:hover::before {
  width: 90%; /* highlight up to this percent */
}

.baseProjectTwo * {
  position: relative;
  z-index: 1;
}




.baseProjectThree{
    align-content: center;
    width:20vw;
    height:6vh;
    border:3px solid white;
    border-radius: 40px;
}

.githubExtProj{
    color:white;
    background: transparent;
    width: clamp(140px, 10vw, 400px);
    height:7vh;
    border:2px solid white;
    border-radius:30px;
    margin:auto;
    display:flex;
    flex-direction: row;
    padding: 20px;
    justify-content: space-between;
    align-items:center;
}
.githubExtProj:hover{
    background-color: white;
    color:black;

}

.managerExtProj{
    color:white;
    background: transparent;
    width: clamp(200px, 16vw, 600px);
    height:7vh;
    border:2px solid white;
    border-radius:30px;
    margin:auto;
    display:flex;
    flex-direction: row;
    padding: 20px;
    justify-content: space-between;
    align-items:center;
}
.managerExtProj:hover{
    background-color: white;
    color:black;

}
.projExtContainer{
    display: flex;
    flex-direction: row;
    gap:2vw;
    position: relative;
    top:15vh;
    margin: 0 auto;
    width:22vw;
    height:7vh;
}
.githubExtProjcontainer{
    width: 16vw;
}


.linksIndex{
    display: flex;
    flex-direction: row;
    width: fit-content;
    margin:0 auto;
    margin-top: 10vh;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.thank-you{
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
font-size: clamp(3rem, 5rem, 7rem);
    width: fit-content;
    margin: 10vh auto;

}
.contact-container{
 width: fit-content;
 margin: 0 auto;
 text-align: center;
}
#final{
    background-color: transparent;
    border: 5px white solid;
    width: min-content;
font-size: clamp(2rem, 3em, 4rem);
    border-radius: 50%;
    margin: 10vh auto;
    color: white;
}

.certificate{
    width: 11vw;
    height: 13vw;
    margin: 0 auto;
    border-left: 2px solid white;
    border-bottom-left-radius: 25%;
    border-top-right-radius: 25%;
    border-style: solid;
    position: relative;
}
.certs-display{
    width: 30vw;
    height: 30vh;
    margin: 40vh auto;
    display: flex;
    flex-direction: row;
}
.cert_desc{
font-size: clamp(0.5rem, 0.8rem, 1rem);
    padding-left: 10px;
    z-index: 9999;
    height: 7vh;

}

.experience-container{
    width: 80vw;
    height: 70vh;
    border: 2px solid white;
    border-radius: 30px;
    margin: 10vh auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.education{
    width:45%;
    margin-top:2.5%; 
    height: 90%;
    border:2px solid white;
    border-radius: 30px;
font-size: clamp(0.3rem, 0.5rem, 0.8rem);
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.work{
    width:45%;
    margin-top:2.5%; 
    height: 90%;
    border-radius: 30px;
font-size: clamp(0.3rem, 0.5rem, 0.8rem);
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.cli-container{
    width: 85vw;
    height: 90vh;
    margin: 5vh auto;
    background-color: black;
    color: green;
    border-radius: 30px;
}
#terminal {
  background-color: #000;
  color: #0f0;
  font-family: monospace;
  height: 80vh;
  width: 80vw;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}

#output {
  white-space: pre-wrap;
  overflow-y: auto;
  flex-grow: 1;
}
input {
    background: black; /* or your CLI bg */
    color: white;
    caret-color: white;
}

#input-line {
  display: flex;
  align-items: center;
}

.prompt {
  color: #0f0;
  margin-right: 5px;
}

#command {
  background: none;
  border: none;
  color: #0f0;
  font-family: monospace;
font-size: clamp(0.5rem, 1rem, 2rem);
  outline: none;
  width: 100%;
}
.projectIntTitle{
    width: fit-content;
    margin: 3vh auto;
}
.projectStack{
    display: flex;
    flex-direction: row;
    width: fit-content;
    position: relative;
    top: 5vh;
    margin-left: auto;
    margin-right: auto;
}
.projDesc{
font-size: clamp(0.5rem, 0.8rem, 1rem);
    margin-left: 1vw;
}
.project2Stack{
    display: flex;
    flex-direction: row;
    width: fit-content;
    position: relative;
    top: 8vh;
    margin-left: auto;
    margin-right: auto;
}
.project3Stack{
    display: flex;
    flex-direction: row;
    width: fit-content;
    position: relative;
    top: 1vh;
    margin-left: auto;
    margin-right: auto;
}
.row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left:1vw;
}
.row3{
    display: flex;
    flex-direction: row;
    
}
.col{
    display: flex;
    flex-direction: column;
    width: 49%;
    
}

.uni{
    height: 30%;
}
.high-school{
    height:30%;
}
.middle-school{
    height: 30%;
}
.col2{
    display: flex;
    flex-direction: column;
}
.col2 + .col2{
    margin-left: 1vw;
    margin-right: 1vw;
}

.exp_edu_container{
    border-top: 2px white dotted;
}

.greenCircle{
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    background-color: green;
    margin-left: 1vw;
    margin-top: 0.2vh;
   
}
.red{
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    background-color: red;
    margin-left: 1vw;
    margin-top: 0.2vh;
}
.row2{
    display: flex;
    flex-direction: row;
}
.certs-key{
    width: 10vw;
    height: 5vh;
    position: absolute;
    top: 90vh;
    left: 5vw;
}