:root{
     --forground-color: #ff9100;
}
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     scroll-behavior: smooth;
   }

   ::-webkit-scrollbar {width: 5px; height: 5px;}
::-webkit-scrollbar-track {border-radius: 5px;background: transparent;}
::-webkit-scrollbar-thumb {background: linear-gradient(180deg,#ff9100 0%, rgba(255, 140, 0, 0.75) 100%);border-radius: 2px; transition: all 0.3s;}
::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg,rgba(255, 140, 0, 0.75) 0%, rgba(133, 53, 0, 0.75) 100%);border-radius: 50px;}

   
   html, body {
     background: black;
     background-size: cover;
     color: white;
     overflow:hidden;
     cursor: url('cursors/pointer32.png'), auto;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   
   a{text-decoration: none;color: white;cursor: url('cursors/link32.png'), pointer;   }
   img{-webkit-user-drag: none;}
   h1 { color: rgba(150, 150, 150, 0.75);}

   .material-symbols-rounded {
     font-variation-settings:
     'FILL'0,
     'wght' 600,
     'GRAD' 0,
     'opsz' 48
   }

main{
     background: url('https://uploads-ssl.webflow.com/6384db3d7b4dd356473d0489/6388a95c066e0ed4a8e4a148_wallpaperbetter.com_1920x1080%20(5).jpg');
     position: fixed;
     overflow: hidden;
     width: 100%;
     height: 100%;
     background-position: center;
     background-size: cover;
}

.wrapper{
     position: inherit;
     overflow: inherit;
     width: inherit;
     height: inherit;
     backdrop-filter: blur(45px) saturate(150%) brightness(40%);
}
.content{transition: all 0.3s;}
header{
     width: 100%;
     height: 4.75em;
     padding: 15px;
     position: relative;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     background-color: rgba(200, 200, 200, 0.1);
     border-bottom: 1px solid  rgba(240, 248, 255, 0.2);
     position: fixed;    
     display: flex; 
     top: -5em;
     z-index: 2;
     transition: all 0.5s;
}

header .logo{
     position: relative;
     width: fit-content;
     margin-left: 1em;
     top: 0px;
     transition: scale 0.5s ease;
}
header .logo:hover{scale: 1.05;}
header .logo img{width: 9.75em;}

header .vrt{
     height: 2.75em;
     width: 2px;
     background-color: rgba(240, 248, 255, 0.15);
     border-radius: 5px;
     margin-left: 2em;
}

button{
     align-items: center;
     display: flex;
     padding: 5px;
     border-radius: 5px;
     border: none;
     color: rgba(240, 248, 255, 0.75);
     font-size: 1em;
     transition: all 0.3s;
     border: 1px solid  rgba(240, 248, 255, 0);
     background-color: transparent;
     cursor: url('cursors/link32.png'), pointer;
}
button:hover{     background-color: rgba(240, 248, 255, 0.15);}
button:active{    background-color: rgba(240, 248, 255, 0.1);      border: 1px solid  rgba(240, 248, 255, 0.1);}

button span{
   margin-top: -2.5px; padding: 2px; margin-right: 2.5px; scale: 0.9;
}

header button{
     padding-right: 10px;padding-left: 5px;
     margin-left: 1em; min-width: 5.75em;
}

header .active{
     color: var(--forground-color);
     background-color: rgba(240, 248, 255, 0.1);   
}
header .active:hover{     background-color: rgba(240, 248, 255, 0.15);}
header .active:active{    background-color: rgba(240, 248, 255, 0.1);      border: 1px solid  rgba(240, 248, 255, 0.1);}
.headerCont{display: flex; margin-top: 0.15em;}

header .right-header{
     position: absolute;
     right: 1.25em;
}
header .right-header button{
     min-width: fit-content; padding-right: 5px;
}
header .right-header button span {margin-right: 0; }
header .right-header .ham span {margin-top: -15px; transform: translateY(6.5px);}
header .right-header .ham{padding: 7.5px; padding-right: 10px; margin-top: 5px; margin-left: 10px;}
.containerHome{
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%) scale(0);
     transform: translate(-50%, -50%) scale(0);
     width: 50%;
     height: 20em;
     background-color: rgba(200, 200, 200, 0.05);
     border: 1px solid  rgba(240, 248, 255, 0.2);
     border-radius: 8px;
     transition: all 0.5s;
     padding: 20px;
     display: flex;
}
.containerHome h1{line-height: 1;}
.containerHome #imH{font-size: 1.5em;}
.containerHome #hed{
     font-size: 2.5em;
     color: var(--forground-color);
}
.containerHome .hedA{
     font-size: 2.5em;
     color: var(--forground-color);
}
.containerHome .img{
     width: 77.5%; 
     position: relative; 
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-57.5%, -52.5%);
     transform: translate(-57.5%, -52.5%);
}
.containerHome p{
     color: rgba(150, 150, 150, 0.9);
     font-weight: 500;
     width: 120%;
     margin-top: 0.5em;
}
.containerHome #HInfo{margin-top: auto; margin-bottom: auto; width: calc(100% / 2.25);}
.containerHome button{
     margin: 15px; margin-left: 0; padding: 7.5px; width: 115%; margin-right: 0;
     background-color: rgba(240, 248, 255, 0.1);      border: 1px solid  rgba(240, 248, 255, 0.1);
}
.containerHome button:hover{background-color: rgba(240, 248, 255, 0.15);}
.containerHome button:active{background-color: rgba(240, 248, 255, 0.1);}

.right-turn{
     position: absolute;
     top: 0;
     right: -5em;
     width: 5em;
     cursor: url('cursors/link32.png'), pointer;
     height: 100%;
     transition: all 0.5s;
     background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

.right-turn button{
     position: relative;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);
}
.right-turn button span{
     font-size: 2em;
}

.left-turn{
     position: absolute;
     top: 0;
     left: -5em;
     width: 5em;
     height: 100%;
     cursor: url('cursors/link32.png'), pointer;
     transition: all 0.3s;
     background: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

.left-turn button{
     position: relative;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);
}
.left-turn button span{
     font-size: 2em;
}

.wrapper .cc{
     color:  rgba(240, 248, 255, 0.3);   ;
     font-weight: 500;
     position: absolute;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     bottom: 1em;
     opacity: 0;
     transition: all 0.5s;
     text-align: center;
     z-index: 2;
}

.page1{
     transition: all 0.5s;
     opacity: 1;
     pointer-events: all;
}
.page2{
     transition: all 0.5s;
     opacity: 0;
     pointer-events: none;
}

#timelineCont{
     transform: translate(-50%, -45%) scale(1);
     width: 65%;
     height: 72.5%;
     overflow: hidden;
     display: block;
     padding: 0;
}

#timelineCont iframe{
     width: 100%;
     height: 100%;
}
.ham{display: none;}

#contAbout{
     width: 85%;
     height: 75%;
     -webkit-transform: translate(-50%, -45%) scale();
     transform: translate(-50%, -45%) scale(0);
}

#AboutMore{
     overflow: hidden;
     overflow-y: scroll;
     width: 100%; height: 100%;
     padding-right: 10px;
     padding-top: 25px;
}

#AboutMore p{width: 100%; padding: 10px;text-align: justify;}
#AboutMore button{width: 100%;}

hr{
     border: 1px solid rgba(240, 248, 255, 0.1); 
     margin-top: 2em; margin-bottom: 2em;
}

.block{
     font-size: 20px;  
     padding: 20px;
     padding-left: 0;
     padding-top: 0;
}

.stats-container {
     width: 100%; border-radius: 8px;
     background-color: rgba(221, 221, 221, 0.15);
     transition: all 0.5s;
     color: white;
     font-weight: 500;
     }
     
     .skills {
     width: 1%;
     height: 50px;
     border-radius: 8px;
     background-color: #ffffff;
     font-size: 13px;
     padding: 17.5px; padding-left: 15px; text-align: right;
     transition: all 0.5s;
     background-color: rgba(240, 248, 255, 0.05);
     border: 1px solid  rgba(240, 248, 255, 0.1);
     }
     
     #stats p {padding: 10px;
          font-weight: 500;
          width: auto;
          margin-top: 0em;
     }
     
     .Art {width: 85%; }
     .Coding {width: 60%;}
     .Athletics {width: 50%; }
     .Poetry {width: 70%; }
     .srijan {width: 100%; }
.histBtn{margin: 0;}

#contArts{
     width: 85%;
     height: 75%;
     -webkit-transform: translate(-50%, -45%) scale(0);
     transform: translate(-50%, -45%) scale(0);
     overflow: hidden;
     overflow-y: scroll;
     display: none;
}
#contArts h1{margin-bottom: 2rem; border-bottom: 1px solid  rgba(240, 248, 255, 0.2); padding-bottom: 2rem;}
#contArts img{width: 100%; height: auto;}
#contArts .card{width: 100%; height: auto; margin-bottom: 2rem; box-shadow: 0 0 1rem #000;}
#contArts .card:hover {transform: translateY(0px);}

   .container {
     position: absolute;
     height: 100%;
     width: 95%;
     top: 57.5%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
     gap: 3rem;
     opacity: 0;
     transition: all 0.5s;
   }
   .container h1{
     position: absolute;
     top: 7.5%;
     left: 50%;
     transform: translateX(-50%);   
}
   
   .card {
     display: flex;
     height: 62.5%;
     width: calc(100%/4);
     background-color: rgba(200, 200, 200, 0.05);
     border: 1px solid  rgba(240, 248, 255, 0.2);
     border-radius: 10px;
     box-shadow: -1rem 0 3rem #000;
     transition: 0.4s ease-out;
     position: relative;
     overflow: hidden;
   }
   
   .card:hover {
     transform: translateY(-20px);
     transition: 0.4s ease-out;
   }
   .card:active {
     transform: translateY(0px);
     transition: 0.4s ease-out;
   }
   
   .title {
     color: white;
     font-weight: 300;
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100%;
     font-weight: 600;
     height: 8rem;
     padding: 10px;
     padding-left: 20px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 25%, transparent);
     transition: 0.5s;     
     font-size: 20px;
     filter: drop-shadow(0px 0px 5px black);
   }
   .card:hover .title{
     transition: 0.5s;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 25%, transparent);
   }
   .title p{
     border-top: 1px solid #ffffff6a;
     transform: translateY(21px); opacity: 0; font-size: 16px; font-weight: normal; color: rgba(255, 255, 255, 0.5); padding-top: 6px; transition: all 0.3s ease-out;}
   .card:hover .title p{transform: translateY(11px);opacity: 1;}
   
   .circle {
    width: 100%;
    height: 100%;
    overflow: hidden;
   }

   .circle img{
     width: 100%;
     height: 100%;
     border-radius: 10px;
   } 

   #DeskProjectsOnArtBtn{
     position: absolute;
     right: 2.5%;
     bottom: 1.75%;
     opacity: 0;
     transition: all 0.5s;
}
#DeskProjectsOnArtBtn button{
     border-radius: 7.5px;
      padding: 7.5px;
      padding-right: 10px;
      transition: all 0.5s;
     background-color: rgba(240, 248, 255, 0.1);      border: 1px solid  rgba(240, 248, 255, 0.1);
}
#DeskProjectsOnArtBtn button:hover{background-color: rgba(240, 248, 255, 0.15);}
#DeskProjectsOnArtBtn button:active{background-color: rgba(240, 248, 255, 0.1);}

   @media screen and (max-width: 1250px){.container {gap: 1rem;}}

   @media screen and (max-width: 800px) {
     .container {display: none;}
     #contArts{display: block;}
     #DeskProjectsOnArtBtn{display: none;}
   }

@media screen and (max-width: 1200px) {
.containerHome{width: 60%;}
#timelineCont{width: 75%;}
}

.phone-nav {
     display: none;
     position: absolute;
     left: 50%;top: 5rem;
     transform: translateX(-50%);
     width: 91%;
     border-top: 1px solid #ffffff6a;
     padding-top: 1.5rem;
     overflow: hidden;
}

.phone-nav a button{
     margin-bottom: 1rem;
     padding: 11px;
     width: 100%;
     margin-left: 0;
}

@media screen and (max-width: 865px) {
     .stats-container {border-radius: 5px;}
     #stats p {font-size: 16px;}
     .skills {height: 35px; border-radius: 5px; padding: 5px; padding-right: 15px;}
     .containerHome .hedA{font-size: 2em;}
}
@media screen and (max-width: 1020px) {
     .headerCont{display: none;}
     .histBtn{display: none;}
     header .vrt{display: none}
     .ham{display: block;}
     header{overflow: hidden;}
     #timelineCont{width: 85%; height: 77.5%;transform: translate(-50%, -47.5%) scale(1);}
     .containerHome{
          width: 75%;
          height: 40%;
          display: flex;
     }
     .containerHome img{ width: 77.5%; }

     .phone-nav {
          display: block;
          opacity: 0;
          transition: all 0.5s;
          transform: translateX(-50%) translateY(-20px);
     }
     header .logo:hover{scale: 1;}

}

#social-links img {width: 28px; transition: all 0.3s; filter: brightness(60%);}
#social-links img:hover{scale: 1.1; filter: brightness(80%);}
#social-links img:active{scale: 1;}
#social-links a{padding: 2.5px; }

@media screen and (max-width: 625px) {
     .containerHome{
          width: 75%;
          height: max-content;
          display: block;
     }
     .containerHome #HInfo{width: 100%;}
     .containerHome .img{display:none;}
     .containerHome p{width: 100%;}
     .containerHome button{ width: 100%;}
     .page2{display: none;}
     .right-turn{display: none;}
     .left-turn{display: none;}
     #social-links img {width: 24px}
     #AboutMore p{padding: 0; margin-top: 10px; margin-left: 5px; width: 95%; margin-bottom: 5px;}
}