* {
   margin: 0%;
   padding: 0%;

 }
body{
  overflow-x: hidden;
  
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
header a {
  font-family: "Poppins", sans-serif;
text-decoration: none;
box-sizing: border-box;
}

header {
padding: 0 20px;
background-color:black;
height: 4vw;
display: flex;
justify-content: space-between;
padding-left: 3rem;
padding-right: 3rem;
padding-bottom: 1rem;
padding-top: 1rem;
}
@import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
 
#brand {
 background-image: url(glitching-error.gif);
   background-size: cover;
 border-radius: 50%;
 height: 2em;
 max-height: 50px;
 box-shadow: 2PX 2PX 3PX 1PX greenyellow;
display: flex;
 align-items: center;
}

#brand a {
color: #f80a25;
font-family: 'Zeyada', cursive;
text-shadow: 1px 1px 3px #f5f2f2;
font-size: 7vw;

}
 


ul {
list-style: none;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}

ul a {
color: white;
}

ul li {
padding: 5px;
margin-left: 10px;
}

ul li:hover {
transform: scale(1.1);
transition: 0.3s;
}

#login,
#signup {
border-radius: 5px;
padding: 5px 8px;
}

#login {
border: 1px solid #498afb;
}

#signup {
border: 1px solid #ff3860;
}

#signup a {
color: #ff3860;
}

#login a {
color: #498afb;
}

#hamburger-icon {
margin: auto 0;
display: none;
cursor: pointer;
}

#hamburger-icon div {
width: 35px;
height: 3px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
}

.open .bar1 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
opacity: 0;
}

.open .bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -8px);
transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}

.mobile-menu {
display: none;
position: absolute;
top: 3rem;
left: 0;
height: calc(100vh - 50px);
width: 100%;
background-color: rgb(31, 43, 54);
}

.mobile-menu li {
margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
header nav {
  display: none;
}

#hamburger-icon {
  display: block;
}
 
}
 #brand{
  /*background-image: url(36e4d0b856694fc471344b644a1dd6e4\ -\ Copy.gif);
  background-size:cover;
  border: 2px solid white;
  box-shadow: -2px 2px 3px 2px rgb(231, 125, 50);*/
   
  padding: 3vw;
  font-weight:bolder;
   font-size: 3vw;
    

 }
 .back4{
  background-color: black;
 } 
.middle { text-shadow: 2px 2px 5px red;
   display: flex;
   justify-content: space-around;
    
   align-items: center;
   padding: 10px 30px;
 }

 @import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@1,500&display=swap');

 .quote {
  text-shadow: 2px 2px 5px red;
   font-family: 'Alegreya', serif;
   color: rgb(244, 238, 238);
   font-size: 4vw;
   font-weight: bolder;
   flex-grow: 2;
    
 }

 section img {
  max-inline-size: 100%;
   block-size: auto;
   flex-grow: 4;
 }
 .more{
  display: flex;
  justify-content: space-around;
  gap:7em;
  padding: 3em 3em 0em 3em;
 }
 .more img{
  border: 2px solid black;
  box-shadow: 2px 2px 4px 2px white;
  max-inline-size: 100%;
  block-size: auto;
  }
 .container {
   color: #e5e5e5;
   font-size: 2.26rem;
   text-transform: uppercase;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
 }
.midback{
    background-image: linear-gradient(to bottom,black, rgb(83, 18, 130));
  background-size:cover;  
}
.midback::before{
  opacity: 0.7;
}
 
 .mid {
  
   display: flex;
   justify-content: center;
   font-family: 'Alegreya', serif;
   font-size: 3.7vw;
   font-weight: bold;
   color: rgb(237, 226, 226);
   padding-top: 5em;
   padding-bottom: 7em;
   padding-left: 3em;
   padding-right: 3em;
   }
   @media only screen and (max-width: 600px){
    .mid{
   
      font-size: 5vw;
      color: #fff800;
      padding-top: 5em;
      padding-bottom: 4em;
      padding-left: 3em;
      padding-right: 3em;
      font-weight: bold;
    }
    }

 @import url('https://fonts.googleapis.com/css?family=Roboto:700');
 p {
  text-shadow: 0 0 7px rgba(255,255,255,.3), 0 0 3px rgba(255,255,255,.3);
}
.container {
  color: #3e3d3d;
  font-size: 2vw ;
  text-transform: uppercase;
  height: 18vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.fir{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
     
 }
 .sec{ display: flex;
  flex-direction: row;
  justify-content: space-around; 

 }
  .known{
    display: flex;
    justify-content: center;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bolder;
    font-size: 7vw;
  }
 
.fir img{
   
  max-inline-size:  120%;
  block-size: auto;  
   
}
.sec img{
  max-inline-size:  100%;
  block-size: auto;
}
.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 7vw;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
.back{
  background-image: linear-gradient(to bottom, rgb(83, 18, 130), black);
  background-size:cover;
   
}
.text .dots {
  display: inline;
}

.text .moreText {
  display: none;
}

.text.show-more .dots {
  display: none;
}

.text.show-more .moreText {
  display: inline;
}

.text1.dots1{
  display: inline;
}
.text1 .moreText1 {
  display: none;
}

.text1.show-more1 .dots1 {
  display: none;
}

.text1.show-more1 .moreText1 {
  display: inline;
}
.text2 .dots2 {
  display: inline;
}

.text2 .moreText2 {
  display: none;
}

.text2.show-more2 .dots2 {
  display: none;
}

.text2.show-more2 .moreText2 {
  display: inline;
}

.projects{
  display: flex;
  justify-content: center;
  margin: 2vw;
  gap: 5vw;
  font-size: larger;
  font-weight: bold
  
   
   }
   @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap');
   .projects h3{
    font-family: 'Roboto Condensed', sans-serif;
        font-size: x-large;
    color: yellow;
    display: flex;
    justify-content: center;
    
   } 
 .club{ 
  padding:2vw;
   display: flex;
   color:white;
  flex-direction:column;
  border: 2px solid black;
  box-shadow: 3px -3px 4px 3px rgb(235, 94, 94);
}
.certificate{padding:2vw;
     display: flex;
     color:white;
  flex-direction:column;
  border: 2px solid black;
  box-shadow: 3px -3px 4px 3px rgb(69, 216, 232);
}
.fake{padding:2vw;
   display: flex;
   color:white;
   flex-direction:column;
  border: 2px solid black;
  box-shadow: 3px -3px 4px 3px rgb(96, 237, 83);
}

@media only screen and (max-width: 600px) {
  .projects{
    display:flex;
    flex-wrap: wrap-reverse;
    font-size: medium;
     padding: 4vw;
    margin-left: 2vw;
    margin-right:2vw ;
     
  } 
  .projects h3{
    font-size: large;
  } 
  .fake{
    padding: 4vw;
  }
  .certificate{
    padding: 4vw;
  }
  .club{
    padding: 4vw;
  }

}
.projects button{
  background-color: #20a7d8;
  font-size: large;
  padding:0.5vw;
}
.recent{
  
  display: flex;
  justify-content: center;
  padding-top: 11vw; 
  padding-right: 11vw; 
  padding-left: 11vw; 
  padding-bottom: 3vw; 
  color: rgb(243 227 7);
  font-size: xx-large;
  font-weight: bolder;
}
.recent p{
  font-size: 7vw;
  padding:1em;
}

.pro{
  /*background-image: url( mohammad-rahmani-N5bT5RctFZ8-unsplash.jpg);
  background-size: cover;*/
   background-color: black;
}
 
.footer{
     background-image: linear-gradient(to bottom,black, rgb(57, 11, 127)  ); 

  padding:30px 0px;
  font-family: 'Play', sans-serif;
  text-align:center;
  }
  
  .footer .row{
  width:100%;
  margin:1% 0%;
  padding:0.6% 0%;
  color:rgb(239, 234, 234);
  font-size:0.8em;
  }
  
  .footer .row a{
  text-decoration:none;
  color:rgb(230, 218, 218);
  transition:0.5s;
  }
  
  .footer .row a:hover{
  color:#b24444;
  }
  
  .footer .row ul{
  width:100%;
  }
  
  .footer .row ul li{
  display:inline-block;
  margin:0px 30px;
  }
  
  .footer .row a i{
  font-size:2em;
  margin:0% 1%;
  }
  
  @media (max-width:720px){
  .footer{
  text-align:left;
  padding:5%;
  }
  .footer .row ul li{
  display:block;
  margin:10px 0px;
  text-align:left;
  }
  .footer .row a i{
  margin:0% 3%;
  }
  }
  .name{
    color:#ff1361;
    font-size: large;
  }