blogPost.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;
    margin: auto;

  }

  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;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content:center ;
    align-items: center;
    background-color:var(--primary-minor);
    margin-top: 1%;
    margin-bottom: 1%;


}

.main>p{

  align-self: self-start;
  margin-left: 6%;
}

.main img {

    
    width:70vw;
    height:50vh ;
    border: 2px solid var(--secondary-major);
    margin: auto;
    margin-top: 4%;
    margin-bottom: 5%;

}



.footer{

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

hr{

  max-width: 80vw;
  margin: auto;


}

.main h1{

    padding-top: 2%;
}

.text,.main h1{

    width: 70vw;
}



.container{

   display: flex;
   background-color:var(--primary-minor); 
   width: 80vw;
   margin: auto;
   margin-bottom: 1%;

}

.card{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6% 3%;
  

}

.card p{

  color: var(--primary-text);

}


.card h1, .card p{

  width: 20vw;
  padding: 0%;
}

.related h1{

    margin-left: 10%;
    margin-top: 2%;
   
}

@media screen and (max-width : 1300px) {

    .related{

        display: none;
    }


}


/*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);
  
  }