* {
    margin:0;
    padding:0;
}

html {
	scroll-behavior: smooth;

}


:root{
    --main-bg: #000a25;
    --main-bg2: #603772;
    --main-bg3:#2B5DB3;
    --main-bg4:#020529;
    --color1: #ffb205;
    --dark: #110037;
    --main-bg-tr: #ffeabf90;
    --fat-border: 10px solid black;
    --font-color: white;
    --light: #400e89;
    --nav-btn: linear-gradient(135deg,#41154a,#372278);
    --pink-nav-btn: linear-gradient(135deg, #41154a, #ca2b66);
    --strings-color: linear-gradient(90deg, #9662e1, #33A6cc);
    --purple-var:#4364e3;
    --light-pink: #fd5ff9;
    --red-pink: #ca2b66;
    --red-pink-transparent: #ca2b6612;
    --purple: #6d2ccd;
    --purple-transparent:#6d2ccd12;
}
body{
    background:var(--main-bg);
    font-family:'Poppins', sans-serif;;
    border:var(--fat-border);
    box-sizing: border-box;
    color: var(--font-color);
    overflow:auto;
    z-index: 9;
    position:relative; 

}

.main{
    font-size:max(18px,1.2vw);
    overflow:hidden
}

h2{
    font-size:max(30px,4vw);
    padding-bottom:5px;
}




.nav {
    display:flex;
    justify-content: space-between;
    align-items: center;
    position:sticky;
    top:0;
    min-height: 8svh;
    gap:1.5rem;
    padding:0.5rem 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(3px);
    z-index: 9999;
    box-shadow: 1px 0 7px #00000014;
    background-color: #00000079;

}

.nav_links{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    gap:1.5rem;
    transition: 0.5s;
    align-items: center;
}

.nav_opened{
    transform: translateX(0) !important;
}

#burger{
    display: none;
    z-index:999;
    font-weight: bold;
    font-size: 7vw;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:0;
    cursor: pointer;
    background: linear-gradient(var(--light), var(--main-bg2));
    border-radius: 10px;
    height:40px;
}


.languages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 100%;
    }

.languages img{
    height:max(30px,1.5vw)
}

a:visited{
    color:var(--font-color);
}
a:hover, a:active{
    color:var(--font-color);
}

.nav a, .btn-zone a {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color:var(--font-color);
    text-decoration: none;
    font-weight: bold;
    font-size:max(20px,1.3vw);
    transition:0.2s;
    border:1px solid transparent;

}


.nav a:hover, .nav a:active{
    background: var(--nav-btn) !important;
    position:relative;
    z-index:0;
    border-radius: 20px;
    box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 0.4);
    transition: 0.1s;
}
.selected {
    background: var(--nav-btn) !important;
    position:relative;
    z-index:0;
    border-radius: 20px;
    box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 0.4);
    transition: 0.1s;
}

.selected:hover, nav a:active {
    box-shadow: none !important;
    transform: translate(2px, 2px) !important;
}

#home {
    background: var(--main-bg);
    background: radial-gradient(var(--main-bg2),var(--light),#000a25 60%);
    height:90svh;
    position: relative;
    display:flex;
    align-items: center;
    scroll-margin-top: 8svh;

    justify-content: center;
    
}

.flex-box{
    display:flex;
    flex-direction: column;
    transform:translateY(-4rem);
    padding: 4vw 12vw;
    margin-top:4vw;
    box-sizing: border-box;
    gap:10px;
    z-index:1;
    backdrop-filter: blur(2px);
    position: relative;

    align-items: center;
}

.flex-box::before{
    content: "";
  position: absolute;
  height: 10%;
  width: 10%;
  top: 0;
  right: 0;
  border-top: 3px solid var(--main-bg2);
  border-right: 3px solid var(--main-bg2);
}

.flex-box::after {
  content: "";
  position: absolute;
  height: 10%;
  width: 10%;
  bottom: 0;
  left: 0;
  border-bottom: 3px solid var(--main-bg2);
  border-left: 3px solid var(--main-bg2);
}

.flex-box h1{
    font-size:max(6vw,50px);
    position:relative;
    font-family:'Lilita One', sans-serif;
    background: var(--strings-color);
    color:transparent;
    background-clip:text;

}

.flex-box p{
    position: relative;
    padding-bottom: 10px;
    width: max-content;
}

.flex-box p::after{
    width:20%;
    height:5px;
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    background: var(--strings-color);
    filter:blur(1px);
    transition: 1s;

}

.flex-box p:hover::after, .flex-box p:active::after{
    width:100%;
}

.btn-zone{
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.btn-zone a{
    padding: 0.8rem 2rem;
    border-radius: 10px;
    transition:0.4s;
    overflow: hidden;

}

.btn-zone a:first-child {
    border:none;
    position: relative;
    z-index: 0;
}

.btn-zone a:first-child::after {
    background: linear-gradient(90deg,#130a89dd, #4364e3 20%,#fd5ff9);
    border:none;
    content:"";
    position: absolute;
    inset:0;
    width:130%;
    height:100%;
    transition: 0.3s;
    z-index:-1;
    border-radius: 10px;;
    transform: translateX(-20%);}



.btn-zone a:first-child:hover::after {
    opacity: 1;
    transform: translateX(0);
}


.btn-zone a:last-child{
    border:1px solid white;
    background-color: rgba(0, 0, 0, 0.542);
    position: relative;
}

.btn-zone a:last-child::after{
    content: "";
    position: absolute;
    width: 150px;
    height: 80px;
    top: -60%;
    right: -20%;
    background: radial-gradient(var(--main-bg3) , transparent 90%);
    border-radius: 50px;
    filter: blur(10px);
    opacity: 0;
    transition: 0.3s;;
}

.btn-zone a:last-child:hover::after{
    opacity: 1;
}


.medias{
    display:flex;
    gap:1rem;
    width:max(18vw,200px)
}

.medias img {
    width:100%;
    box-sizing: border-box;
    padding:1vw;
    border-radius: 100%;
    border:1px solid white;
    transition:0.2s;
    background: rgba(0, 0, 0, 0.505);
}

.medias a {
    flex: 1
}

.medias img:hover, .medias img:active{
    transform:translateY(-5px)
}

.img-box{
    position:absolute;
    bottom:-5px;
    right:5vw;
    z-index:0;
    display: flex;
    justify-content: center;


}
#bobby {
    height:70svh;
    width:auto;
    animation: slide-in-up 1s forwards;
}

.img-box::after{
    content: "";
  position: absolute;
  width: 100%;
  height: 120%;
  background: radial-gradient(#443072,transparent 70%);
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  transform: translate(-30px, -30px);
  opacity: 0.8;
  filter: blur(5px);

}

hr {
    z-index:5;
    position: relative;
}

.hr2 {
    height: 3px;
    width:50%;
    left:0;
    transform: translateX(50%);
    background-color: rgba(255, 192, 203, 0.626);
    box-shadow: 0 0 5px rgba(255, 192, 203, 0.605);
    border:none;
    position: absolute;
}

/*** About ***/

#about {
    background:linear-gradient( var(--main-bg) 10% 90%, var(--main-bg2));
    padding:8svh 2rem;
    position:relative;
    height:100svh;
    box-sizing: border-box;
}
#about::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 60%;
  background: linear-gradient(var(--main-bg2),transparent 5%);
  clip-path: polygon(8.2% 0px, 91.7% 0px, 150% 100%, -50% 100%);
}

#about h1, h2{
    margin:0 10px 1rem 10px;
    padding:5px 0 10px 0;
    position:relative;
    width:max-content;
}

#about h1::after, h2::after, .cover h3::after{
    width:60%;
    height:5px;
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    background: var(--strings-color);
    filter:blur(1px);
    transition: 0.3s;
}

#about h1:hover::after, h2:hover::after, #about h1:active::after, h2:active::after{
    width:100%;
}


.about_container{
    height:75%;
    display: flex;
    position:relative;
    overflow:visible;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    z-index:1

}



.about_block{
    width:33%;
    height:100%;
    padding:10px;
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    border-radius:15px;
    transition:1s;
    background: var(--purple-transparent);
    border: 1px solid var(--purple);
    box-shadow: 0 0 5px var(--purple);    
    font-size: clamp(14px,1.3vw,22px);
    box-sizing: border-box;
    z-index:0;
}

.about_block:nth-child(2), .about_block:nth-child(3){
     background: var(--red-pink-transparent);
    border: 1px solid var(--red-pink);
    box-shadow: 0 0 5px var(--red-pink); 
}

.about_block::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:var(--nav-btn);
    z-index:-1;
    transition:0.3s;
    border-radius: 15px;
}

.about_block:nth-child(2)::after, .about_block:nth-child(3)::after{
    background: var(--pink-nav-btn)
}



.about_block:hover::after{
    opacity:0.5
}

.certif{
    background: #00000045;
    padding: 5px 10px;
    border-radius: 50px;
    font-size:small
}


/* @keyframes dragon{
    0%,40%{
        transform: translateY(20px);
    } 20%{
        transform:translateY(-20px)
    }
} */


.about_container #chronology_bar{
    margin:1.5rem 0;
    height:5px;
    width:80%;
    background-color: white;
    inset:0;
    border:none;
    position:relative
}

#chrono_arrow{
    position: absolute;
    top: 0;
    right: -1rem;
    width: 20px;
    transform: translateY(-50%);
}

.top {
    display: flex;
    justify-content: end;
    gap:15%;
    height:50%;
    width:80%;
    position: relative;
}

.bottom{
    display:flex;
    height:50%;
    width:80%;
    gap:15%;
    position:relative;
}

.top .about_block::before, .bottom .about_block::before{
    position:absolute;
    content:"";
    width:5px;
    height:1.5rem;
    bottom:-1.5rem;
    left:50%;
    transform:translateX(-50%);
    background-color: white;

}

.bottom .about_block::before{
    top:-1.5rem;
}

/*** ABOUT VERSION 2 ***/

    .about_block{
        width:90% 
    }

    .top .about_block::before, .bottom .about_block::before{
        inset:0;
        top: 50% ;
        transform: translateY(50%);
        right:-1rem ;
        left:auto ;
        width:1rem ;
        height:5px ;
    }

    .bottom .about_block::before{
        left:-1rem ;
    }

    .bottom{
        margin-bottom:5rem;
    }

    .top{
        margin-top:5rem;
    }

    .top, .bottom {
        flex-direction: column;
        padding:0;
        justify-content:center ;
        gap:20% ;
    }

    .top{
        align-items: end;
    }
    #about{
        height:100svh;
    }

    #about h2{
        margin-bottom: 0;
    }

    .about_container #chronology_bar{
        width:5px;
        height:90%;
        margin: 0 1rem
    }

    .about_container{
        flex-direction: row;
        height:90%
    }


    #chrono_arrow{
        position: absolute;
        top: -1rem;
        left: 50%;
        width: 20px;
        transform: rotate(-90deg) translateY(-40%);
    }

/*** Projects ***/
#projects {
    display:flex;
    overflow-x: hidden;
    overflow-y:hidden;
    scroll-snap-type: x mandatory;
    height:100svh;

}
#projects h2{
    z-index:5;
    position:relative;
    font-size: max(30px,4vw);
    text-shadow:0px 0px 10px black
}


#web_projects h2::after, #net_projects h2::after{
    width:30% !important
}
#projects_main {
    position:relative;
    overflow:hidden;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:5%;
    padding: 2rem 3rem;
    flex: 0 0 80vw;
    transition:opacity 2s, flex 5s;
    scroll-snap-align: center;
    box-sizing: border-box;
    scroll-behavior: smooth;

    background: linear-gradient(90deg, #2a0480,var(--light));
    background: var(--main-bg4);
}

#projects_main h2::after{
    width:100% !important;
}

#pro_small {
    display:none
}

.main_text{
    display: flex;
    justify-content: center;
    align-items: center;
    width:50%;
    flex-direction: column;
    text-align: center;
}

.project_main_btn {
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    z-index:5;
    min-height:50svh;
}

.btn:last-child img{ /* Right-btn*/
    background:linear-gradient(45deg, var(--purple),var(--main-bg4));
    border:1px solid var(--purple)

}

.btn:last-child span{ /* Right-btn*/
    background: linear-gradient(45deg, var(--purple),var(--main-bg4));
    border:1px solid var(--purple)

}

.btn:last-child hr{ /* Right-btn*/
     background: radial-gradient(var(--purple) 20%,transparent);
}

.btn:last-child { /* Right-btn*/
    border:1px solid var(--purple);
    box-shadow: 0 0 5px var(--purple);
}

.btn:last-child::after{  /* Right-btn*/
    box-shadow: inset 0 0 5px var(--purple);
}



.btn{
    display:flex;
    align-items: center;
    flex-direction: column;
    border:1px solid var(--main-bg3);
    box-shadow: 0 0 3px var(--main-bg3);
    min-height:80%;
    width:40%;
    padding:1rem;
    border-radius: 15px;
    position: relative;
}

.btn::after{
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 10px var(--main-bg3);
    border-radius: 15px;
    opacity: 0;
    transition: 0.3s;
    z-index:-1;
}

.btn:hover::after{
    opacity:1
}

.btn_text_wrapper{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
    text-align: center;
    flex:7;
}

.btn hr{
    height:3px;
    width:30%;
    border:none;
    background: radial-gradient(var(--main-bg3) 20%,transparent);
}

.project_img_wrapper {
    flex:3;
}

.project_img_wrapper img{
    height:100px;
    box-sizing: border-box;
    border-radius: 50px;
    padding:10px;
    background:linear-gradient(45deg, var(--main-bg3),var(--main-bg4));
    border:1px solid var(--main-bg3)
}


.btn_text_wrapper span{
    border-radius: 50px;
    padding:5px 1rem;
    background: linear-gradient(45deg, var(--main-bg3),var(--main-bg4));
    border:1px solid var(--main-bg3);
    cursor:pointer;
}



#projects_main::after{
    content: "";
  position: absolute;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(var(--dark),transparent 90%);
  border-radius: 50px;
  bottom: -25%;
  left: -25%;
  z-index: 0;
}

#projects_main::before{
    content: "";
  position: absolute;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(var(--light),transparent 75%);
  border-radius: 50px;
  top: -25%;
  right: -25%;
  z-index: 0;
}

#lwave{
    position:absolute;
    height:100%;
    display: block;
  
    transition:1s;
    right:0%;
    z-index:5;
    transform: translateX(35%);
}
#lwave path{
    fill:var(--dark);
}
#rwave{
    position: absolute;
    left:0;
    top:0;
    transform:scale(-1,1) translateX(35%);
    height:100%;
}

#rwave path{
    fill: var(--light);
}


/* 
.project_btn:hover{
    transform:translate(12px,12px);
    box-shadow:none;
} */

/* 
.project_btn::after{
    content:"";
    position: absolute;
    width:100%;
    height:100%;
} */


#web_projects, #net_projects {
    position:relative;
    background:var(--dark);
    min-height:100svh;
    display:flex;
    align-items: center;
    gap: 2rem;
    flex: 0 0 85vw;
    scroll-snap-align:center;
    width:90vw;
    transition:0.3s;
    box-sizing: border-box;
}
#web_projects{
    z-index:2;
}

#net_projects{
    background:var(--light);
    padding-left:5rem;
    justify-content: end;
}

.arrows{
    position:absolute;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    width:100%;
    bottom:5%;
    padding-right:10vw;
    box-sizing: border-box;
}


.arrows svg{
    fill:white;
    height:30px;
    cursor:pointer;
}


#net_projects .projects_content{
    padding-left:6vw
}

#web_projects .projects_content{
    padding-right:9vw
}
.projects_content {
    /*background-color: #90e0f964;*/
    flex:9;
    display:flex;
    justify-content: center;
    height:100%;
    padding:1rem 2rem;
    box-sizing: border-box;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.projects_content h2{
    margin-bottom: 2rem;
}
.projects_content * {
    z-index:6
}
.projects_list{
    position: relative;
    display:flex;
    align-items: center;
    width:100%;
    height:60%;
    overflow:auto;
    gap:2rem;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: white;
    opacity: 0;
    transition:1s;
    padding-bottom: 2rem;
    
  
} 

.pro_box {
    height:100%;
    flex:0 0 30%;
    scroll-snap-align: center;
    position:relative;
    border-radius: 10px;
    box-sizing: border-box;
    border:2px solid var(--main-bg3);
    box-shadow: 0 0 10px var(--main-bg3);
    background-color: #0003;
    padding:1rem;
    transition: 0.3s;
    overflow-y: auto;
    overflow-x:hidden;


    line-height: 1.5rem;
}


.cover{
    position:absolute;
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    inset:0;
    padding:1rem;
    box-sizing: border-box;
    transition:0.3s;
    z-index:0;
}


.pro_box img{
    position: relative;
    box-sizing: border-box;
    height: 100%;
    width: 60%;
    object-fit: contain;
}

#web_projects img {
    width:100%;
}

.cover h3{
    position: relative;
    padding-bottom: 0.5rem;
}

.cover h3::after{
    height:2px;
    width:130%;
    left:50%;
    transform: translateX(-50%);
}

.cover_img{
    flex:5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

.cover_text{
    flex:5;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    text-align: center;
    min-height: 0;
}

.vignettes {
    display:flex;
    justify-content: center;
    align-items: center;
}

.vignettes span{
    font-size:max(12px,1.2vw);
    background-color: var(--main-bg3);

}



.pro_box:hover .cover, .pro_box:active .cover, .pro_box:hover img, .pro_box:active img{
    opacity: 0.3;
}

.pro_box:hover .span_box, .pro_box:active .span_box{
    opacity: 1;
}

.span_box li{
    margin: 1rem 0;
    font-size:max(15px,1.2vw);
}

.span_box ul{
    list-style-type: disc;
    margin-left: 1.2rem;
}

.span_box{
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    opacity: 0;
    transition: 0.3s;
}





/*** Skills ***/
#skills {
    display:flex;
    background:linear-gradient(#000b29,black);
    position:relative;
    overflow: hidden;
    min-height:100svh;
    padding:3rem 4rem;
    box-sizing: border-box;
    flex-direction: column;
    gap:1rem;
}

#skills h2{
    margin-left:0
}


.skills_content{
    display: flex;
    flex-wrap: wrap;
    height:100%;
    width:90%;
    gap:1rem;
    margin:0 auto;
    z-index:1
}

.domain_block{
    border: 1px solid #363359;
    background-color: #00000010;
    backdrop-filter: blur(5px);
    flex:49%;
    display: flex;
    gap:0.5rem;
    align-items: center;
    padding:1rem;
    box-sizing: border-box;
    border-radius: 15px;
    transition: 0.3s;
}

.domain_block h3{
    transition: 0.3s;
}
.domain_block:hover{
    border-color:var(--main-bg3);
    box-shadow: 0 0 5px var(--main-bg3);
}
.domain_block:hover h3{
    color:var(--main-bg3);
}
.domain_block:hover .vignette{
    background-color: #2b1d51cf;
}

.full{
    flex:100%;
}

.subleft img{
    height:75px;
    width:75px;
    background: linear-gradient(45deg,var(--main-bg3),var(--dark));
    border-radius: 50px;
    padding:1rem;
    box-sizing: border-box;
}

.vignettes_box{
    margin-left:5px;
    display:flex;
    flex-wrap: wrap;
    gap:5px;
    box-sizing: border-box;
}

.vignette{
    background-color: #2b1d5178;
    border-radius: 50px;
    padding:2px 1rem;
    transition:0.3s
}


#box-left{
		width: 100%;
		clip-path: polygon(0px 0px, 80% 0px, 20% 100%, 0px 100%);
		background:radial-gradient(#1f144f,#060226);
		text-align: center;
        z-index:1;
        position: absolute;
        z-index:3;
        inset:0;
	}

   
#box-right{
    position:absolute;
    height:100%;
    width:100%;

} 

#polygon-sep {
  position: absolute;
  height: 100%;
  width: 100%;
  clip-path: polygon(20% 100%, 21% 100%, 81% 0%, 80% 0%);
  border: none;
  box-shadow: 0 0 10px 2px #9b4fd2;
  background: radial-gradient(#9b4fd2, transparent);
  border-radius: 20px;
}



#box-left .row{
    gap: 30vw;
}
.row {
    width:100%;
    display:flex;
    justify-content: space-around;
    align-items: center;
    height:15svh;
}

.row img{
    width:100px;
    transform:translateX(-100vw);
    animation: cloud infinite 45s linear;
}

@keyframes cloud{
    0%{
        transform:translateX(-100vw)
    }
    100%{
        transform:translate(80vw);
        opacity:50%;
    }
}

.star {
        width:30px;
        height:30px;
        filter:blur(1px);
        transition:1s;
        animation: light 10s infinite linear;
        opacity:0;
        transform:scale(0);
        background: transparent;
        position:relative
}

.star::after{
    position: absolute;
    inset:0;
    content:'';
    width:100%;
    height: 100%;
    background: #01f6e5;
    z-index:-1;
    clip-path: polygon(55% 22%, 48% 44%, 24% 50%, 45% 57%, 54% 75%, 62% 60%, 79% 50%, 62% 43%, 63% 43%);
}

@keyframes light{
    0%,75%,100%{
        opacity:0;
        transform:scale(0);
        background: transparent;

    }
    50%{
        transform:scale(1);
        opacity:1;
        background: radial-gradient(#01f6e5,transparent 70%);
    }
}


.items-left{
    flex:0 0 50%;
    width:50%;
    display: flex;
    flex-direction: column;
    justify-content: start;
   
}

.items-left li::marker{
    color:#8e56f6;
}

.items-right{
     flex:0 0 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        width:60%;;
        align-self: end;
}

.items-right li::marker{
    color:#01f6e5
}



/*** Contact ***/
#contact {
    height:35svh;
    display:flex;
    align-items: center;
    justify-content: space-evenly;
    background: linear-gradient(var(--main-bg2), transparent 10%)
}

#contact .img_box{
    text-align: center;
    height:100%;
}

.img_box img{
    transform: translateY(-15px);
    height:80%
}

.box{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
}

.box span{
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:5px;
    background-color: black;
    border-radius:15px;
    padding:5px;
    filter:invert(1);
    width:100%;
    font-size: max(16px,1.2vw);
    flex-wrap: wrap;
}

.box span img{
    height:30px;
}

.box span a{
    font-style: italic;
    color:rgb(162, 161, 161);
}




#bonus_zone{
    position: relative;
    transition:2s;
    height:0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background: linear-gradient(var(--main-bg2),transparent 5%)
}

#shell_box{
    height:70%;
    width:80%;
    border:1px solid var(--light);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding:1rem;
    overflow: auto;
    white-space: pre-wrap;
    box-sizing: border-box;
    transition:2s;
    background-color: rgba(0, 0, 0, 0.304);
}

.hide{
    transform:scale(0);
}
.output_wrapper{
    display: flex;
    flex-direction: column;
}


#shell_input {
    background-color: transparent;
    color:white;
    border:none;
    outline:none;
    padding: 0 0.3rem;
    font-size: max(18px,1.2vw);
    width:100%;
}


.input_wrapper{
    display: flex;
    align-items: center;;
}

#bat {
    position: absolute;
    bottom:0;
    left:20%;
    z-index:999;
    opacity:80%;
    transform: translateY(100%);
    animation:vibrate_stop 1.5s infinite;
    padding:0 3rem 3rem 3rem;
    background:radial-gradient(var(--light-pink),transparent 70%);
    cursor:pointer
}

#bat:hover{
    animation: vibrate 0.5s infinite
}

.expend {
    height:50vh !important;
}

#bonus_zone:has(#bat:hover){
    height:35px
} 

#ctf_box{
    height:90%;
    width:90%;
    display: flex;
    position: absolute;
    justify-content: space-evenly;
    align-items: center;
    transition:2s;
}

.ctf_wrapper{
    position:relative;
    padding:1rem;
    box-sizing: border-box;
    cursor: pointer;
    transition:2s;
}

.ctf_wrapper::after{
    content:"";
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background: radial-gradient(var(--light), transparent 60%);
    z-index:0;
    transition:0.5s;

}

.ctf_wrapper img{
    height:100%;
    max-height: 150px;
    width:100%;
    z-index:1;
    position:relative;
}

.ctf_wrapper:hover::after{
    transform:scale(1.2)
}


@keyframes vibrate {
  0% { transform: rotate(0deg) translateY(100%); }
  10% { transform: rotate(-1deg) translateY(100%); }
  20% { transform: rotate(1deg) translateY(100%); }
  30% { transform: rotate(0deg) translateY(100%); }
  40% { transform: rotate(1deg) translateY(100%); }
  50% { transform: rotate(-1deg) translateY(100%); }
  60% { transform: rotate(0deg) translateY(100%); }
  70% { transform: rotate(-1deg) translateY(100%); }
  80% { transform: rotate(1deg) translateY(100%); }
  90% { transform: rotate(0deg) translateY(100%); }
  100% { transform: rotate(-1deg) translateY(100%); }
}

@keyframes vibrate_stop {
  0% { transform: rotate(0deg) translateY(100%); }
  10% { transform: rotate(-1deg) translateY(100%); }
  20% { transform: rotate(1deg) translateY(100%); }
  30% { transform: rotate(0deg) translateY(100%); }
  40% { transform: rotate(1deg) translateY(100%); }
  50% { transform: rotate(-1deg) translateY(100%); }
  60% { transform: rotate(0deg) translateY(100%); }

 
  100% { transform: translateY(100%); }
}



@keyframes slide-in-up {
    from {transform: translateY(100%);}
    to {transform:translateY(0)}
}


@media (max-width: 767px){
    .nav{
        backdrop-filter: none;
    }
    .nav_links{
        flex-direction: column;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        padding:0.5rem;
        right:0;
        top:0px;
        padding-top:calc(40px + 0.5rem);
        transform: translateX(100%);
        height:100svh;
        width:50vw;
        text-align: center;
        justify-content:start;
    }

    #burger {
        display:block;

    }

    #bobby{
        height:40svh;
    }


    /* ABOUT */
  
    .about_block{
        width:100% 
    }

    .top .about_block::before, .bottom .about_block::before{
        inset:0;
        top: 50% ;
        transform: translateY(50%);
        right:-1rem ;
        left:auto ;
        width:1rem ;
        height:5px ;
    }

    .bottom .about_block::before{
        left:-1rem ;
    }

    .bottom{
        margin-bottom:5rem;
    }

    .top{
        margin-top:5rem;
    }

    .top, .bottom {
        flex-direction: column;
        padding:0;
        justify-content:center ;
        gap:20% ;
    }

    #about{
        height:80svh;
    }

    #about h2{
        margin-bottom: 0;
    }

    .about_container #chronology_bar{
        width:5px;
        height:90%;
        margin: 0 1rem
    }

    .about_container{
        flex-direction: row;
        height:90%
    }




    /* PROJECTS */

    #projects {
        flex-direction: column;
        height:auto;
    }
    .projects_list{
        opacity: 1;
        flex-wrap: wrap;
        height:75%;
        padding:0;
        justify-content: center;


    }

    #pro_small{
        display:block;
        margin-top:2rem;
        position:absolute !important;
        top: 0;
        left:0;
    }

   

    .projects_content{
        align-items:center ;
        padding:0 !important;
    }

    .projects_content *{
        transition:0.3s;
    }

    .pro_box{
        flex: 100vw;
        height:200px;
    }

    #net_projects .cover img{
        width: 80% !important;
    }

    #web_projects .cover img {
        object-fit: fill;
    }

    .cover{
        flex-direction: row;
    }

    .cover_text{
        padding:0.5rem
    }

    #web_projects h3::after{
        width:80%
    }

    #projects_main, #rwave, #lwave, .arrows{
        display:none
    }

 

    #web_projects, #net_projects {
        flex-direction: column;
        padding:0;
        padding: 2rem 1rem;
        width:100%;

    }

    #net_projects .projects_content{
        padding: 2rem 1rem

    }

    .about_block::after{
    opacity:0.5
    }


    #skills{
        padding:3rem 0;
    }



    .pro_box.touched .cover,
    .pro_box.touched img {
        opacity: 0.3;
    }

    .pro_box.touched .span_box {
        opacity: 1;
    }

    #contact{
        padding-top:125px;
    }
}