about.css

:root{

  --primary-major : #f6f6f6;
  --secondary-major : #000000;

  --primary-text:#000000;
  --secondary-text:#f6f6f6;


  --primary-minor: #EEEDED;
  --seconday-minor: rgba(255,255,255,0.1);

  --footer: #DBD9DB;
}

.dark-mode{

  --primary-major : #000000;
  --seconday-major : #f6f6f6;

  --secondary-text:#000000;
  --primary-text:#f6f6f6;

  --primary-minor: rgba(255,255,255,0.1);
  --secondary-minor: #EEEDED;
  
  --footer: #DBD9DB;
}



*{

  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}


 body {
  font-weight: 500;
  line-height: 1.4;
  background-color: var(--primary-major);
}

ul{

  list-style: none;
  font-family: "Inter", sans-serif;

}

li {

  margin: 0px 10px;


}

.container1{
  max-width: 100vw;
  margin: auto;
 

}

a{

  text-decoration: none;
  color: black;
}

nav{

  display: flex;
  justify-content: space-around;
  align-items: center;
  align-items: center;
  padding: 20px 0;

}

nav ul{

  display: flex;
  
}

.logo {

  font-size: 32px;
  font-weight: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
} 

nav ul li {

  border-bottom: 2px solid transparent;
  transition: o.2s ease-in-out;
}
nav ul li:hover{

  border-bottom: 2px solid ;
  transition: o.2s ease-in-out;
}


/* 
   code for logo image */

 

   .logo >  img {

    width: 15%;
    height: 15%;


  }



 .main{
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    justify-content:center ;
    align-items: center;
    background-color:var(--primary-minor);
    margin: auto;
    position: relative;
    margin-top: 1%;
    margin-bottom: 1%;
    padding-bottom: 5%;

}

.main>p{

    align-self: self-start;
    margin-left: 6%;
    padding-bottom: 10%;
  }

  hr{

    max-width: 80vw;
    margin: auto;
  
  
  }
  
  .about-text {

      width: 80vw;
      margin: auto;
      padding-top: 2%;
      padding-bottom: 5%;
      margin-left: 41%;
     font-size: xx-large;
      

    
     
  }
  
  .text{
  
      width: 70vw;
  }

  .about-text{

    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
    margin: auto;

  }

  .main h1 {

    width: 20vw;
  }


  .footer{

    background-color:var(--primary-minor) ;
    height: 5vh;
    margin-top: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  /*toggle normal*/

#checkbox{

  visibility: hidden;
}


.label{
position: relative;
background-color:var(--primary-text);
width: 2.6rem;
height: 1.5rem;
border-radius: 10rem;
display: inline-block;
border-radius: 1px solid blue;

}


.toggle-ball{

  display: inline-block;
  background-color: var(--secondary-text);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  position: absolute;
  top: .15rem;
  left: .1rem;
  transition: all 0.2s linear;

}

.toggle-btn{

  position: relative;
  left: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  

}


#checkbox{

  visibility: hidden;
}



#checkbox:checked + .label .toggle-ball{

  transform: translateX(1.2vw);
  background-color: rgba(107, 107, 224, 0.953);

}

/* toggle box for mobile */



.label-mob{
  position: relative;
  background-color:var(--primary-text);
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 10rem;
  display: inline-block;
  
  }
  
  
  .toggle-ball-mob{
  
    display: inline-block;
    background-color: var(--secondary-text);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    position: absolute;
    top: .15rem;
    left: .1rem;
    transition: all 0.2s linear;
  
  }
  
  .toggle-btn-mob{
  
    position: relative;
    
    margin-right: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    
  
  }

  /*texts color*/
  
  .main p, .main h1,.divs h1{

    color: var(--primary-text);
  
  }
  
   nav li ,  .logo, .footer>p{
  
    color: var(--primary-text);
    font-weight: 500;
  
  }
  
  
  .cards span , .cards h3 ,.cards div{
  
    color:var(--primary-text);
  }
  
  .logo-mob{
  
    color: var(--primary-text);
  
  }