*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Luckiest Guy', sans-serif;
}



body{
background: #001333;
display: flex;
}



nav{
  display: flex;
  height: 80px;
  width: 100%;
  background: #001923;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px 0 100px;
  flex-wrap: wrap;
  position: fixed;
  transition: all 0.3s ease;
}



nav .logo{
  font-size: 25px;
  font-weight: 600;
  color: yellow;                               
  text-shadow: 0 4px orange , 0 4px red ;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  
}
nav ul li{
  margin: 0 5px;
}
nav ul li a{
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
  color: #111;
  background: #30dd8a;
}
nav .menu-btn i{
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}
@media (max-width: 1000px){
  nav{
    padding: 0 40px 0 50px;

  }
  
  } 
  
@media (max-width: 920px){
  
  
  nav .menu-btn i{
    display: block;
  }
  #click:checked ~ .menu-btn i:before{
    content: "\f00d";
  }
  nav ul{
    position: fixed;
    top: 80px;
    right: 100%;
    background: #001333;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul{
    right: 0;
  }
  nav ul li{
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a{
    color: #fff;
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a{
    margin-left: 0;
  }
  nav ul li a.active,
  nav ul li a:hover {
    background: none;
    color: #30dd8a;
  }
  
}
.content{
  position: absolute;
  z-index: -1;
  text-align: center;
  width: 100%;
  color: #1b1b1b;
  margin-top: 80px;
}

.WebContainer{
 width: 100%;
 height: auto;
 }
 .articles{
 width:100%; /*Takes 90% width from WebContainer*/
 height: 50px;
 margin: auto;
 }
 
 h1{ 
 font-family: "Luckiest Guy";
 color: yellow;
 font-weight: 400;
 font-size:30px;                           
 text-shadow: 0 4px orange , 0 4px red ;
 margin:0; 
 }
 
 h2{ 
 font-family: "Luckiest Guy";
 color: yellow;
 font-weight: 400;                           
 text-shadow: 0 3px orange , 0 3px red ;
 margin:0; 
 }

 .wrapper {
 animation: scroll 70s linear infinite;
 background: url("https://i.ibb.co/rFnp9yT/Merged-Images-1.png");
 color: #eee;
 background-size: cover;
 height: 200px;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 perspective: 1000px;
 perspective-origin: 50% 50%;
 }
 
 @keyframes scroll {
 100%{
 background-position: -3000px 0px;
 }
 }
 
 @media (prefers-reduced-motion) {
 .wrapper {
 animation: scroll 200s linear infinite;
 }
 }
 

 
 .gif1{
 border-radius:20px;
 content: "";
 display:block;
 height: 300px;
 width: 300px;
}

#gallery{
height: 300px;
width: 300px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
margin-top:20px;
 border-radius: 20px;
 z-index:-1;
 box-shadow: 0 15px 15px rgba(0, 0, 0, 0.8);
 
}

.slide{
width: 100%;
}

.slide{
  animation: 0.4s slide;
}
@keyframes slide {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
   
  }
}


.banner{
border-radius:10px;
} 

 
 .fab{
 height:40px;
 width: 40px;
 font-size:25px;
 padding-top:8px;
 text-align:center;
 border-radius:10px;
 margin: 2px;
 box-shadow: 0 15px 15px rgba(0, 0, 0, 0.8);
 
 }
 

 
 .fa-reddit{
 background: orangered; 
 color: #fff; 
 }
 
 .fa-twitter{
 background: #00acee; 
 color: #fff; 
 }
 
 .fa-instagram{

 background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
 color: #fff;
 }
 
 .fa-discord{
 background: #5865F2;
 color: #fff;
 }
 
.fa-github{
background: #111;
 color: #fff;
 
 }
 
.card{
margin-top:20px;
height: 100%;
width: 90%;
background: #001923;
color: #fff;
margin-left:auto;
margin-right:auto;
padding: 20px;
border-radius:10px;
letter-spacing:1px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.8);

}

.banner{
height: 100%;
width: 100%;
}


.cont{
font-size:15px;
background-image: linear-gradient(to right,#25aae1, #40e495, #30dd8a, #2bb673);
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text;
padding:10px;
letter-spacing:1px;
}



.cont2{
padding:5px;
font-size:13px;
background-image: linear-gradient(to right,#25aae1, #40e495, #30dd8a, #2bb673);
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text;
letter-spacing:1px;
}


.add{
font-size:15px;
color: deepskyblue;
text-decoration:none;
}

.head{
font-size:20px;
background-image: linear-gradient(to right,#25aae1, #40e495, #30dd8a, #2bb673);
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text;
padding:10px;
letter-spacing:1px;
}

.cards{
height: 100%;
width: 150px;
background: #001923;
color: #fff;
border-radius:10px;
letter-spacing:1px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.8);

}



.cards img{
border-top-left-radius:10px;
border-top-right-radius:10px;
background: #001000;
height: 150px;
width: 150px;
}

.cards .icons{
border-top-left-radius:10px;
border-top-right-radius:10px;
background: #001000;
height: 150px;
width: 150px;
}


.card-con{
display:grid;
 grid-template-columns: auto auto; 
 gap: 20px;
 margin-left:0;
}

.btn-hover {
width: 130px;
font-size: 20px;
font-weight: 700;
color: #fff;
cursor: pointer;
margin: 2px;
padding-top:5px;
letter-spacing:1px;
height: 40px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:focus {
outline: none;
}

.btn-hover.color-1{
background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);

}

.btn-hover.color-4 {
 background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
 }

.section {
display: none;
}

.section.active{
display: block;
}

.invisible {
    display: none;
}

.nav {
list-style: none;
margin:0;
padding: 0;
display:inline-flex;
align-items: center; 
}

.nav #li {
background: deepskyblue;
padding: 10px 15px;
margin: 5px;
border-radius: 50%;
cursor: pointer;
opacity: .5;
color: #fff;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.8);

}

.nav #li.active{
opacity: 1 !important;
}

.next,
.previous {
height: 50px;
border-radius: 6px;
background: deepskyblue;
color: white;
border:0;
outline: none;
cursor: pointer;
width: 100px;
font-size: 20px;
padding-top:5px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.8);

}

.next.disable,
.previous.disable{
  cursor: none;
  opacity: .5;
}

footer{
position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #001923; 
  color: #fff000;
  text-align: center;
 height: 80px;
 padding: 25px;
}





@media (min-width: 500px) {
.card-con{
display:grid;
 grid-template-columns: auto auto auto auto; 
 gap: 20px;
 margin-left:0;
}



}