*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    

}
.intro{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12,4,6),rgba(12, 4, 6));
    position: relative;
    padding:0 5%;
    display: flex;
    align-items: center;
    justify-content:center;
    overflow: hidden;
  


}
nav{
    width: 100%;
    position:absolute;
    top: 0;
    left: 0;
    padding: 20px 8px;
    display: flex;
    align-items: center;
    justify-content:space-between;
}
nav .logo{
    width: 50px; 
    height: 50px;
    margin-right: 700px;
    
    
}
nav ul li{
    list-style: none;
    display:inline-block;
    margin-left: 40px;
    
}
nav ul li a{
    text-decoration: none;
    color:#fff;
    font-size: 20px;

}


.sidebar{
    position: fixed;
    top:0;
    right:0;
    width:250px;
    height:100vh;
    z-index: 999;
    background-color:rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    transition:0.5s;
    padding:20px;
    box-shadow: 10px 0 10px rgba(0,0,0,0.1);
    display:none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.sidebar li{
    width:100%;
}
.sidebar a{
    width:100%;
}
.menu-button{
    display:none;
}

.content{
    width:100%;
    text-align: center;
    z-index:1;

}
.content .profile{
    width:150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin:auto;
    margin-top: 20px;

}
.content h1{
    font-size: 40px;
    color:#fff;
    font-weight: 600;
    text-align: center;  
    transition:0.5s;
}
.content h1:hover{
    -webkit-text-stroke: 2px #fff;
    color: transparent;

}
.content a{
    text-decoration: none;
    display:inline-block;
    color:#fff;
    font-size: 18px;
    border: 2px solid #fff;
    padding: 14px 40px;
    border-radius: 50px;
    margin-top: 20px;
    transition: 0.5s;
    align-items: center;
    
}
.content a:hover{
    background-color: #fff;
    color:#000;
}
.content p{
    color:#fff;
    font-size: 18px;
    text-align: center;


}
.back-video{
    position:absolute;
    right:0;
    bottom:0;
    min-width: 100%;
    z-index: -1.5;
    
}
.portfolio{
    width: 100%;
    padding: 50px 5%;
    background-color:#313131;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-style: double;
    border-color: aliceblue;
}
.portfolio h2{
    font-size: 40px;
    color:#fff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.portfolio h3{
    font-size: 20px;
    color:#fff;
    text-align: center;
    margin-bottom: 2px;
    position:relative;
    font-weight: 600;
}
.portfolio .portfolio-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.portfolio .portfolio-container .portfolio-item{
    width: 400px;
    height:350px;
    margin: 5px;
    overflow: hidden;
    position:relative;
    border-radius: 20px;
    padding:10px;
    display: flex;
    flex-wrap:wrap;
    flex-direction:column;
    align-items: center;
}
.portfolio .portfolio-container .portfolio-item img{
    width:230px;
    height: 230px;
    object-fit:fill;
    transition: 0.5s;
    border-radius: 20px;

}
.portfolio .portfolio-container .portfolio-item img:hover{
    transform: scale(1.1);
}

.portfolio .portfolio-container .portfolio-item a{
    text-decoration: none;
    color:#fff;
    font-size: 16px;
    border: 2px solid #fff;
    padding: 10px 10px;
    border-radius: 50px;
    margin-top: 2px;
    transition: 0.5s;
}
.portfolio .portfolio-container .portfolio-item a:hover{
    background-color: #fff;
    color:#000;
}

.about{
    width: 100%;
    padding: 50px 5%;
    background-color:#313131;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    position:relative;
    border-style: double;
    border-color: #fff;

    
}
.about h2{
    font-size: 40px;
    color:#fff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
}
.about h3{
    font-size: 20px;
    color:#fff;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;

}
.about p{
    font-size: 16px;
    color:#fff;
    text-align: center;
    margin-bottom: 20px;
}
.about .about-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction:row;
    position: relative;
   
}
.about .about-container .about-item{
    width:300px;
    height: 500px;
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 20px;
    border-style: double;
    border-color: #fff;
    position:relative;

}
.about .about-container .about-item img{
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.footer{
    width: 100%;
    height: 200px;
    padding: 2px;
    background-color: rgb(212, 208, 208);
    display: flex;
    align-items: center;
    justify-content:center;
   border-style: double;
    border-color: #fff;

  
}
.footer h2{
    font-size: 20px;
    color:#000;
    font-weight: 600;
    text-align: center;  
}
.footer p{
    font-size: 16px;
    color:#000;
    text-align: center;
}
.footer .social-media{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding:5px;
    gap:10px;
}
.footer a{
    color:#000;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    text-align: center;

}
.footer a:hover{
    color:#ea3d3d;
    border-bottom: 2px solid #000;
   
    
}
/* Style all font awesome icons */
.fa {
    padding: 10px;
    font-size: 18px;
    width: 30px;
    text-align: center;
    text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  .fa-github {
    background:#fff;
    color:#000
  }
    .fa-linkedin {
        background: #007bb5;
        color: white;
    }
    .fa-yahoo {
        background: #430297;
        color: white;
      }



@media(min-aspect-ratio: 16/9)   {
    .back-video{
        width:100%;
        height: auto;
        margin:-20px;
    }
}
@media(max-aspect-ratio: 16/9) {
    .back-video{
        width:auto;
        height:100%;
        margin:-20px;
    }
}
    @media(max-width:480px){
     .sidebar{
          display:flex;
        
     }
     .sidebar li{
          margin: 20px 0;
     }
     .sidebar a{
          font-size: 20px;
     }
     .sidebar{
          transform: translateX(0);
     }
     .sidebar.active{
          transform: translateX(0);
     } 
     .content h1{
          font-size: 30px;
     }
     .content a{
          font-size: 16px;
     }
     .content p{
          font-size: 16px;
     }
     .content .profile{
          width: 100px;
          height: 100px;
     }
     .menu-button{
          display:block;
          position: absolute;
          top:20px;
          right:0;
          width: 50px;
          height: 50px;
          
     }
     .menu-button i{
          font-size: 30px;
          color: #000;
     }
     .menu-button.active{
          background-color: #000;
     }
     .menu-button.active i{
        color:#fff;
     }
     
     nav{
        width: 100%;
        position:absolute;
        padding:0;
      
    }
    .homepage{
    width:100%;
    height: 100vh;
    background-color: #000;

        
}
 .homepage .logo{
    width: 50px; 
    height: 50px;
    position:absolute;
    top:20px;
    left:0;
    background-color: transparent;

  }
 .sidebar{
    width:100%;
    display:none;
}
.homepage .hideOnMobile{
    display:none;
}

footer{
    bottom:0;
    font-size: 12px;
}
.content{
    width:100%;
 
}

}
@media(max-width: 800px){
.homepage .navbar{
    width:100%;
    

}


}