* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #131313;
  margin: 0;
  padding: 0;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
    Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
}
/* header */
header{
  display: flex;
  justify-content: space-between;
  background-color:#131313;
  color: white;
  justify-items: center;
  position: fixed;
  width: 100%;
  padding-top: 15px;
  height: 60px;
}
.header-nav{
  display: flex;
  margin: 0 10px;
  justify-items: center;
}
.header-nav a{
  color: white;
  text-decoration: none;
  justify-content: space-evenly;
  margin:0 10px;
  justify-items: center;
}

.pages a{
  color: rgba(255, 255, 255, 0.6);
}
.pages a:hover{
  color: white;
}
.pages2 a:hover{
  color: rgba(255, 255, 255, 0.6);
}

.icon{
  margin-right: 10px ;
}
.start{
  background: linear-gradient(to right,#33a9dc,#4c83ff); 
  padding: 8px 12px;
  border-radius: 3px;
}
.start1{
  background: linear-gradient(to right,#33a9dc,#4c83ff); 
  padding: 5px 8px;
  border-radius: 3px; 
}
.black-bg{
 border:1px solid gray;
 padding: 8px 12px;
 border-radius: 3px;
}

/* main */

.home-main {
  width: 70%;
  margin: 0 auto;
}

.skriper-intro {
  text-align: center;
  padding-top: 90px;
}

.skriper-gradient-text {
  font-size: 4.7rem;
  height: auto;
  background: linear-gradient(
    292.46deg,
    #27ae60 17.79%,
    #2f80ed 35.92%,
    #9b51e0 54.06%,
    #eb5757 71.08%,
    #f2994a 87.36%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.skriper-gradient-text-desc {
  font-size: 25px;
  color: #ffffff;
  font-weight: 645;
}

.skriper-lines-of-code-on-mac-image {
  width: 80%;
}

.container {
  margin: 30px auto 0px;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
}

.olumide-heading {
  font-size: 2rem;
}

.frontend-lang-p {
  font-size: 16px;
}

.olumide-content {
  display: flex;
  margin-top: 30px;
  gap: none;
}

.olumide-image {
  width: 90%;
  margin: 50px;
}

@media (max-width: 768px) {
  .olumide-image {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  .skriper-gradient-text{
    font-size: 4rem;
  }
  .skriper-gradient-text-desc{
    font-size: 20px;
  }

  .olumide-content {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
  }
}

.desc-section {
  color: white;
  margin: 30px auto 0px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.site-desc {
  display: flex;
  gap: 30px;
}
.site-desc-img {
  width: 260px;
  height: 100px;
}
.share-code {
  height: 116px;
}
.site-desc-heading {
  margin: 0px;
  margin-top: 16px;
  padding: 0px;
  font-size: 20px;
}
.site-desc-p {
  font-size: 16px;
  margin: 0px;
}
@media (max-width: 768px){
  .home-main {
    width: 80%;
  }
  .site-desc{
      flex-direction: column;
      gap: 0px;
  }
  .site-desc-img{
      width: 240px;
      height: 100px;
      margin: 0px auto;
  }
  .img-div{
      text-align: center;
  }
}

/* footer */

footer{
    
  background-color:#252525;
  bottom: 0;
  width: 100%;
  padding: 50px 0;
  margin-top: 60px;
  font-family: Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
  
}
.footer-content{
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin: 0 auto;
}
.footer{
  display: flex;
  flex-direction: column;
  
  
}
.footer-logo a{
  color: #eee;
  text-decoration: none;
  margin: 0 5px;
  border: 1px solid #eee;
  padding: 2px 3px;
}
.footer-logo img{
  margin-bottom: 15px;
}
.footer-interest a{
  display: flex;
  flex-direction: column;
  color: #eee;
  text-decoration: none;
  line-height: 30px;
  font-size: 14px;
}
.footer-interest h4{
  font-size: 16px;
  text-transform: uppercase;
  padding-bottom: 10px;
  color:  rgba(255, 255, 255, 0.6);
  opacity: .6;
}
.footer-contact{
  display: block;
  color: #eee;
  
}
.footer-contact p{
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 17px;
}

/* Mobile Responsive CSS*/

@media (max-width:800px){
  .pages{display: none;}
}

@media (max-width:768px){
  .text-eclipse{display: none;}
  .pages{display: none;}
  .footer-content{flex-direction: column;}
  .footer-logo a{display: none;}

}
@media (max-width:310px){
  
  .header-nav a{margin: 0 5px;}
  .header-nav{margin: 0 5px;}
}