@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    
}



body {

   background: linear-gradient(rgba(0,0,0,0.7), rgba(0, 0, 0, 0.7)), url(../Img/jason-charters-IorqsMssQH0-unsplash.jpg);
   background-position: center;
   background-size: 100%;
    overflow-x: hidden;
}




.wrapper{

    height: 100vh;
    width: 115vw;

}

/*.wrapper img{

    opacity: 0,3;

}*/

.logo{ 
    
    background-color: black;
    width: 100vw;
    height: 100px;
    padding-left: 20px;
    padding-bottom: 10px;

    }

.content .navigate{

    position: relative;
    
}

.content .navigate .sidebar{

    position: relative;
     width: 200px;
     height: 142vh;
     background-color: rgb(225, 202, 1);
     padding: 30px 0;
     float: left;
     font-size: 16px;
     /* display: flex; */     /*for later - maybe*/

     /*flex-direction: row;
     row-gap: 40px;     */
}

.content .navigate .sidebar h2{

    color:#fff;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;

}

.content .navigate .sidebar ul li{

    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(225, 225, 225,0.05);
    

}

.content .navigate .sidebar ul li a{

    color:#fff;
    display: block; 
    
    /*padding-left: 15px;*/

}

.content .navigate .sidebar ul li a .icons{

    width: 35px;
    padding-right: 15px;
    
    
}

.content .navigate .sidebar ul li :hover{

    background: black;

}

.content .navigate .sidebar ul li :hover a{

    color: #fff;

}


.content .navigate .socials{


    width: 35px;
    padding-right: 15px;
    
}

.content .navigate .footer{  /* flex prop*/

    position: absolute;
    bottom: 0;
    left: 0;
                            /* display: flex;
                            flex-direction: row;
                            align-content: flex-end; */
    
    
}

.content .navigate .footer h3{

    font-size: 16px;
    color:#fff;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 15px;

}

/*repeat this code everywhere*/

/* Home page */

.content .headline{

    width: 100%;
    margin-left: 200px;
    float: inline-start;
    color: #fff;

}

.content .headline .header{

    padding: 20px;
      border-bottom: solid rgb(225, 202, 1);
      font-size: 35px;
      
      

}

.content .headline h2{

    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 30px;
}

.content .headline h3{

    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;

}

.content .headline img{

    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;

}

.content .headline p{

    font-size: 15px;
    padding-left: 20px;
}

.content .posts .row{       /*This is to make the posts look ogranised and well put together*/

    display: flex;
    flex-wrap: wrap;            
    padding: 10px 10px;
} 

.content .posts .row .column{

   
    padding: 10px 10px 10px 10px;
    justify-content:space-evenly;

} 

/*.content .posts .row .column{

    margin-top: 8px;
    vertical-align: middle;

}*/


/* blog posts */

.content .posts .post{

    padding: 10px 10px 10px 10px;
    background-color: rgb(225, 202, 1);
    border: 5px solid black;
    border-radius: 1.5rem;
    float: left;
    width: 350px;
    justify-content: center;
    -webkit-box-shadow: 0px 2px 6px 5px rgba(0,0,0,0.32); 
    box-shadow: 0px 2px 6px 5px rgba(0,0,0,0.32);
    position: relative;
    

}

.content .posts .post figcaption{

    font-size: 18px;
    color: black;
    font-weight: bold;

}

.content .posts .post blockquote{

    margin-bottom: 5px;

}

.content .posts .post p{

    margin-bottom: 8px;

}

.content .posts .post img{

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    border-radius: 1.5rem;
    padding-bottom: 5px;

}

.content .posts .post .overlay {

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    /*padding: 10px 10px 10px 10px;
    background-color: rgb(225, 202, 1);
    border: 5px solid black;
    border-radius: 1.5rem;
    float: left;
    width: 350px;*/

}

.content .posts .post .overlay img{

    height: 250px;
    background-color: rgb(225, 202, 1);
    width: 340px;
    
}

.content .posts .post:hover .overlay {
    opacity: 1;
}

.content .posts .post .overlay .image {
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    

}

/*blog post*/

.dropbtn {

    background-color: white;
    color: black;
    padding: 16px;              /* this will display the comment section*/
    font-size: 16px;
    border: solid 1px white;
    border-radius: 1.5rem;
    
}

.dropdown {

    position: relative;
    display: inline-block;

  }

.comment{

    display: none;
    position: absolute;
    background-color: rgb(225, 202, 1);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.comment textarea{

    height: 75px;
    width: 500px;

}

.dropdown:hover .comment{
    
    display: block;

}

.dropdown:hover .dropbtn {
    
    background-color: black;
    color: #fff;

}

/* Privacy Policy */

.content .info{

    width: 100%;
    margin-left: 200px;
    float: inline-start;
    color: #fff;
    

}

.content .info .header{

    padding: 20px;
      border-bottom: solid rgb(225, 202, 1);
      font-size: 35px;
      
      

}

.content .info .text{

    line-height: 2 ;
    padding-left: 20px;
    
}

/* Error 404 */

.content .error{

    width: 100%;
    margin-left: 200px;
    float: inline-start;
    color: #fff;

}

.content .error .header{

    padding: 20px;
    border-bottom: solid rgb(225, 202, 1);
    font-size: 35px;
      
}

.content .error img{

    display: block;
    margin-left: 15%;
    margin-right: auto;
    width: 45%;
    height: 45%;
    color:#fff;
    padding-top: 35px;
    
  
}

.content .error p{

    position: absolute;
    font-size: xx-large;
    padding: 20px;
    

}

.body .header{

    padding: 20px;
      border-bottom: solid rgb(225, 202, 1);
      font-size: 35px;
      color: #fff;
      
}
.todo{

    padding: 48px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.todo .group{

    padding: 8px 48px;
    Margin: 8px;
    color: #fff;
}



label {

    position: relative;

}

label::before {

    content: "";
    background: url("../blogsite/Img/iconmonstr-check-mark-circle-thin.svg");
    background-position: center;
    background-size: contain;
    width: 32px;
    height: 32px;
    position: absolute;
    left: -44px;
    top: -8px;

    transform: scale(0) rotateZ(180deg);
    transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

input[type="checkbox"]:checked + label::before{

    transform: scale(1) rotateZ(0deg);

}