body {
    color:white;
    background: black;
    font-size: 15pt;
}
    

span{
    color: lime;
}
h2{
  color: aqua;
}
#content{
border:none;
}
#image{
    width:200px;
    height:200px;
    margin-top:30%;
    border-radius:50%;
    border:3px solid limegreen;
    box-shadow: 0 0 30px lime;
  margin-left:23%;
   
}
#content p{
font-size: 20px;

}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  background: #111;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; 
  position: fixed; 
}

  
.lists {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  top:60px; 
  left: 0;
  width: 100%;
  background: rgba(17, 17, 17, 0.95);
  overflow: hidden;
  max-height:0; 
  max-width: 100px;
  opacity: 0;
  transition: all 0.9s ease;
  z-index: 999;
}


.lists.show {
  max-height: 300px;
  max-width: 100px;
  opacity: 1;
}
.lists a {
  text-decoration: none;
  color: white;
  transition: color 0.2s;
  padding: 10px;
  display: block;
  text-align: center;
}

.lists a:hover {
  color: aqua;
}


.nav-toggle {
  margin-top:40px;
  font-size: 30px;
  color: whitesmoke;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

 #projects{
     
     display:flex;
     flex-direction:column;
     gap:20px;
    
 }
 #projects p {
     padding-left:3%;
     font-size:15px;
     padding-right:3%;
 }
 #projects img{
     width:80%;
     height:300px;
     border:none;
     overflow: hidden;
    padding-left:10%;
   
 }
 #projects button{
     color: skyblue;
     background: none;
     font-size:15px;
     width:100px;
   margin-bottom:5%;
   margin-left:3%;
     height:30px;
     text-align: center;
     border:2px solid slategrey;
     border-radius:40px;
     text-decoration:underline;
 }
 #projects button:hover{
   transform: scale(0.8);
 }
 #projects h2,h3,h4{
     color: whitesmoke;
     text-align: center;
     font-size: 20px;
     font-weight: bold;
 }
#fluxion,#music,#moviemax{
    position:relative;
    width: 90%;
    height: Auto;
    overflow: hidden;
    margin-left: 6%;
    background:transparent;
    box-shadow: 0 0 10px white;
    border-radius: 10px;
    z-index: 1;
}
#moviemax::before {
  content: "";
  position:absolute;
  top: -50%;
  left: -50%;
  width:200%;
  height:200%;
  overflow: hidden;
  background: conic-gradient(from 0deg, #ff00ff, #00ffff, #2ADC15);
  animation: rotate 6s linear infinite;
  z-index:-1;
}
#moviemax::after {
  content: "";
  position: absolute;
  overflow: hidden;
  inset: 4px;
  background: #0b0b18;
  border-radius: 18px;
  z-index: -1;
}
#fluxion::before {
  content: "";
  position:absolute;
  top: -50%;
  left: -50%;
  width:200%;
  height:200%;
  overflow: hidden;
    background: conic-gradient(from 0deg,magenta,aqua,lime);
    
  animation: rotate 6s linear infinite;
  z-index:-1;
}
#fluxion::after{
    content: "";
    position: absolute;
    inset:4px;
    background:black;
    border-radius: 18px;
   z-index: -1;
}
#music::before{
    content:"";
    position: absolute;
    top:-50%;
    left:-50%;
    height:200%;
    width:200%;
    background: conic-gradient(from 0deg, magenta,aqua,lime);
    animation: rotate 6s linear infinite;
    z-index: -1;
}
#music::after{
    content:"";
    position:absolute;
    inset:4px;
    background: black;
    border-radius: 18px;
    z-index: -1;
}
#skills{
 width: 90%;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 5% 0 5%;
  
}
#langs{
  list-style:none;
  padding-left:3%;
  padding-top:15px;
  line-height:50px;
  position:relative;
   
    height:200px;
    
    overflow: hidden;
    margin:0 5% 0 5£;
    background:transparent;
    box-shadow: 0 0 10px white;
    border-radius: 10px;
    z-index: 1;
}
/*#langs::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  overflow: hidden;
  background: conic-gradient(from 0deg, magenta,aqua,lime);
  animation: rotate 6s linear infinite;
  z-index: -1;
}
#langs:after{
 content:""; 
 position: absolute;
 inset:4px;
 background: black;
 border-radius: 18px;
 z-index: -1;
 
}*/

footer{
font-size:18px;
float:right;
}
@keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
#contacts{
  background: linear-gradient(to bottom,black, grey);
  margin-left:5%;
  margin-right:5%;
  border-radius: 18px;
  padding-top: 5px;
}
.contact-icons {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding-top:5px;

}

.contact-icons a {
  color: #00ffcc;
  font-size:1.3rem;
  transition: transform 0.3s ease, color 0.3s ease;
  text-shadow:0 0 8px lime;
}

.contact-icons a:hover {
  color: #fff;
  transform: scale(1.2);
}
@media (min-width: 768px) {
  .contact-icons a{
    font-size: 4.3rem;
  }
 
  .nav-togle {
   
    display:none;
  }

   .lists{
    position: sticky;
    display:flex;
    flex-direction: row;
    justify-content:center;
    gap: 20px;
    max-height:none;
  margin-top:0;
  margin-left:0;
    opacity: 1;
    background: none;
   
  }
 

  .lists{
    max-height:100px;
    max-width: 500px;
    
  }
  #image{
    width: 400px;
    height: 400px;
    margin-left: 30%;
  }
   #projects p{
   font-size:40px;
  }
  #projects img{
    height: 600px;
  }
 #content p{
   font-size: 40px;
   padding-left: 5%;
 }
 #projects h2,h3,h4{
   font-size: 60px;
 }
 #projects button{
   width: 300px;
   height: 70px;
   font-size:40px;
 }
 #projects{
   gap:80px;
 }
 #contacts p,i{
   font-size: 40px;
 }
 #langs{
   height:300px;
   font-size: 40px;
   line-height:70px;
 }
footer{
font-size:30px;

 
}