html{
  scroll-behavior: smooth;
}
::selection{
  background-color:rgb(220,220,240,0.8);
}
body{
  margin:0px;
  background:url('https://cdn.leonardo.ai/users/3c82f8d7-3e6b-414c-9b07-9bc1801be25f/generations/025d070d-2b0d-470c-8dc5-74a8f4b8fa02/segments/4:4:1/Lucid_Origin_create_a_stunning_highresolution_animestyle_mount_3.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
}
a{
  text-decoration:none;
}
header{
  display:flex;
  background-color:rgb(40,40,60);
  padding:4px;
}
header h1{
  font-size:28px;
  font-family: "Libertinus Keyboard", system-ui;
  font-weight: 401;
  color:rgb(225,225,250);
  transition:color 0.4s;
  margin-left:20px;
}
header h1:hover{
  color:orange;
  cursor:pointer;
}
header #m_menu{
  display:none;
  position:fixed;
  left:0px;
  top:0px;
  width:0px;
  height:100vh;
  background-color:white;
}
header #m_menu #menu{
  margin-top:50px;
}
header #m_menu #menu a{
  color:black;
}
header #m_menu #menu p{
  margin:0px;
  font-weight:1000;
  font-size:20px;
  transition:transform 0.2s,background-color 0.4s,color 0.4s;
  padding:5px;
  text-align:center;
}
header #m_menu #menu p:hover{
  transform:scale(1.1);
  background-color:rgb(100,100,80);
  color:rgb(240,240,240);
  cursor:pointer;
}
header nav #icon{
  position:fixed;
  z-index:6;
  left:0px;
  top:5px;
  width:40px;
  background-color:rgb(255,255,255,0.2);
  padding:2px;
  border-radius:10px;
}
header nav #icon .bar{
  color:black;
  height:3px;
  background-color:antiquewhite;
  border-radius:10px;
  border-style:solid;
  border-width:2px;
  margin-top:3px;
  margin-bottom:3px;
  transition:transform 0.4s;
}
header nav #icon:hover{
  cursor:pointer;
  :nth-child(odd){
    transform:rotateZ(-40deg);
  }
  :nth-child(even){
    transform:rotateZ(40deg);
  }
}
header nav{
  flex-grow:1;
}
header #p_menu{
  display:flex;
  gap:40px;
  color:white;
  height:100%;
  justify-content:center;
}
header #p_menu a{
  height:fit-content;
  margin-top:24px;
}
header #p_menu p{
  color:white;
  font-weight:1000;
  margin:0px;
  font-size:20px;
  align-self:center;
  transition:transform 0.2s,color 0.4s;
}
header #p_menu p:hover{
  cursor:pointer;
  transform:scale(1.1);
  color:yellow;
}

/*section */

section{
  opacity:0;
  margin-top:100px;
  position:relative;
  right:20px;
  transition:transform 0.4s;
}
#education h2{
  background-color:yellow;
  padding:4px;
}
#education #cont #bca{
  background-color:orange;
}
#education #cont #bca p :nth-child(odd){
  display:block;
  font-weight:1000;
  font-size:15px;
  padding-bottom:5px;
  margin-right:255px;
}
#education #cont #bca p :nth-child(even){
  display:block;
  font-weight:1000;
  font-size:15px;
  padding-bottom:5px;
  margin-right:132px;
}
#education  p{
  margin:0px;
  font-weight:1000;
  font-size:18px;
  background-color:bisque;
  padding-top:10px;
}
#education #cont #icse p span{
  display:block;
  font-weight:1000;
  font-size:15px;
  margin-right:282px;
}
#education #cont #isc p span{
  display:block;
  font-weight:1000;
  font-size:15px;
  margin-right:105px;
}

/* skills section */

#skills h2{
    color:white;
    font-size:25px;
    background-color:transparent;
}
#skills #cont{
  display:flex;
  color:white;
  flex-wrap:wrap;
  gap:100px;
  justify-content:center;
}
#skills #cont .s{
  border-style:solid;
  border-width:2px;
  border-color:white;
  padding:5px;
  width:110px;
  border-radius:12px;
  transition:background-color 0.4s,transform 0.4s;
}
#skills #cont .s p{
  margin:0px;
  padding:40px 0px 40px 0px;
  color:white;
  font-size:20px;
  font-weight:1000;
  text-align:center;
  transition:color 0.4s;
}

/* media query */

@media screen and (min-width:800px){
  nav #m_menu{
    display:none;
  }
  nav #icon{
    display:none;
  }
  
  #education{
    padding:10px;
  }
  #education h2{
    color:white;
    font-size:40px;
    background-color:transparent;
    text-align:center;
  }
  #education #cont{
    display:block;
  }
  #education #cont #bca{
    width:500px;
    background-color:antiquewhite;
    justify-self:center;
    transition:width 0.4s;
    box-sizing:border-box;
    text-align:center;
  }
  #education #bca p{
    font-size:20px;
    background-color:antiquewhite;
  }
  #education #cont #bca:hover{
    width:100%;
    cursor:pointer;
  }
  #education #cont #icse{
    margin-top:10px;
    width:500px;
    justify-self:center;
    transition:width 0.4s;
    box-sizing:border-box;
    text-align:center;
  }
  #education #cont #icse p{
    font-size:20px;
    padding:15px 0px 15px 0px;
    background-color:antiquewhite;
  }
  #education #cont #icse p span{
  display:block;
  font-weight:1000;
  font-size:15px;
  margin-right:282px;
  }
  #education #cont #icse:hover{
    cursor:pointer;
    width:100%;
  }
  #education #cont #isc{
    margin-top:10px;
    width:500px;
    justify-self:center;
    transition:width 0.4s;
    box-sizing:border-box;
    text-align:center;
  }
  #education #cont #isc p{
    font-size:20px;
    padding:20px 0px 20px 0px;
    background-color:antiquewhite;
  }
  #education #cont #isc p span{
  display:block;
  font-weight:1000;
  font-size:15px;
  margin-right:105px;
  }
  #education #cont #isc:hover{
    cursor:pointer;
    width:100%;
  }
/* Skill section */
  #skills h2{
    font-size:40px;
    text-align:center;
  }
  #skills #cont .s:hover{
    background-color:orange;
    cursor:pointer;
    transform:scale(1.1);
    p{
      color:black;
    }
  }
/*Project Section*/
  #projects h2{
    color:white;
    font-size:40px;
    text-align:center;
  }
  #projects #cont{
    display:flex;
    justify-content:center;
    gap:100px;
  }
  #projects .proj{
    background:linear-gradient(to right,orange,violet,skyblue);
    background-position:0px 0px;
    background-size:200%;
    animation:gradient 4s linear infinite;
    width:400px;
    padding:10px;
    border-style:solid;
    border-color:white;
    border-radius:10px;
    overflow:hidden;
  }
  #projects .proj div{
    background-color:rgb(255, 243, 223);
    border-radius:10px;
    border-style:solid;
    border-color:white;
    transition:border-color 0.4s;
    padding:4px;
    height:100%;
    box-sizing:border-box;
    
  }
  #projects .proj:hover{
    cursor:pointer;
    div{
    border-color:rgb(40,40,60);
/*     transform:scale(1.025); */
    }
  }
  @keyframes gradient{
    0%{background-position:0px 0px;}
    50%{background-position:-400px 0px;}
    100%{background-position:0px 0px;}
  }
  #projects .proj h4{
    font-size:24px;
    text-align:center;
    margin:0px;
    font-weight:1000;
  }
  .proj p{
    font-weight:600;
    font-size:18px;
  }
  .proj span{
    display:block;
    background-color:rgb(240, 221, 246);
    margin-top:20px;
    font-weight:600;
  }
  .proj ol{
    margin:0px;
    font-size:18px;
  }
/*Contact styling*/
  #contact{
    margin-top:100px;
    padding-bottom:20px;
    background-color:rgb(25,45,55);
  }
  #contact h2{
    color:white;
    font-size:40px;
    text-align:center;
  }
  #contact #email{
    width:fit-content;
    border-style:solid;
    border-color:black;
    border-radius:10px;
    justify-self:center;
    overflow:hidden;
    transition:transform 0.2s,box-shadow 0.2s;
  }
  #contact #email p{
    margin:0px;
    padding:10px;
    background-color:antiquewhite;
    font-weight:1000;
    font-size:20px;
  }
  #contact #email:hover{
    cursor:pointer;
    transform:scale(1.015);
    box-shadow:0px 2px 4px white;
  }
}
@media screen and (max-width:800px){
  body{
    background:url('https://cdn.leonardo.ai/users/3c82f8d7-3e6b-414c-9b07-9bc1801be25f/generations/1bf506dc-3363-4cdb-973a-7f8d8c759827/segments/1:4:1/Lucid_Origin_create_a_stunning_Sakura_tree_garden_under_a_clea_0.jpg');
    background-position:center;
    background-attachment:fixed;
  }
  header nav{
    flex-grow:0;
  }
  nav #p_menu{
    display:none;
  }
  header{
    justify-content:center;
  }
  header h1{
    font-size:22px;
  }
  #education h2{
    color:black;
    font-family:cursive;
    font-size:25px;
    text-align:left;
    background-color:antiquewhite;
    width:fit-content;
    margin:0px;
    margin-bottom:10px;
    padding:5px 8px 5px 8px;
    border-radius:10px 0px 10px 0px;
  }
  #education #cont #bca p{
    padding:5px;
  }
  #education #cont #icse p{
    padding:5px;
  }
  #education #cont #isc p{
    padding:5px;
  }
  #skills h2{
    color:black;
    font-family:cursive;
    font-size:25px;
    text-align:left;
    background-color:antiquewhite;
    width:fit-content;
    margin:0px;
    padding:5px 8px 5px 8px;
    border-radius:10px 0px 10px 0px;
  }
  #skills #cont{
    padding:10px;
  }
  #skills #cont .s{
  border-color:black;
  padding:4px;
  width:95px;
  border-radius:12px;
  background-color:rgb(240,180,120);
    box-shadow:2px 4px 8px black;
  }
  #skills #cont .s p{
   color:black; 
   font-size:15px;
    font-weight:1000;
   padding:34px 0px 34px 0px;
  }
  /* projects styling */
  #projects{

  }
  #projects h2{
    color:black;
    font-family:cursive;
    font-size:25px;
    text-align:left;
    background-color:antiquewhite;
    width:fit-content;
    margin:0px;
    padding:5px 8px 5px 8px;
    border-radius:10px 0px 10px 0px;
  }
  #projects #cont{
    display:block;
  }
  #projects .proj{
    padding:10px;
  }
  #projects .proj div{
    background-color:rgb(255, 243, 223);
    border-radius:10px;
    border-style:solid;
    border-color:white;
    padding:10px;
  }
  #projects .proj h4{
    font-size:22px;
    text-align:center;
    margin:0px;
    font-weight:1000;
  }
  .proj p{
    font-weight:600;
    font-size:15px;
  }
  .proj span{
    display:block;
    margin-top:20px;
    font-weight:600;
    background-color:rgb(109, 53, 112);
    color:white;
    width:fit-content;
    border-radius:10px;
    padding:5px;
  }
  .proj ol{
    margin:0px;
    font-size:15px;
  }
  /* contact styling */
  #contact{
    background-color:rgb(25,45,55);
    padding-bottom:20px;
    padding-top:4px;
  }
  #contact h2{
    color:white;
    text-align:center
  }
  #contact #email{
    width:fit-content;
    border-style:solid;
    border-color:black;
    border-radius:10px;
    justify-self:center;
    overflow:hidden;
  }
  #contact #email p{
    margin:0px;
    padding:10px;
    background-color:antiquewhite;
    font-weight:1000;
  }
}
@media screen and (max-width:1000px){
  #projects #cont{
    gap:10px;
  }
}