@font-face {
	font-family: roboto1;
	src: url(../font6/webfonts/Roboto-Light.ttf);
} 
p.alignment{
  text-align: center;
  width: 400px;
}
body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto1'; 
    font-size: 20px;
    background-color: #F9F9FB
    /* box-sizing: border-box; */
}

.campaign{
  display: none;
  margin-top:200px;
}

.spacer { clear:both } 
 /* ------------------------Renewable---------------------------------*/
 #blog-content{
  display: flex;
  /* align-items: center; */
    width: 80%;
    margin: 5px auto;
    border: 1px solid #110202;
 }
 .blog-main{
    width: 80%;
    margin-right: 10px;
    padding: 10px;
    font-size: 17px; 
    line-height: 20px; 
    margin-left:3px;margin-top: 70px; /*This is to push the section down from the fixed header*/
    background: /*#F9F9FB*/#fff; 
    /* color: #555555; */
    
    }
    .blog-main h1{display: block;
      width: 300px;
      margin-top: 30px;
      margin-left: auto;margin-right: auto;
    }
    .blog-temp{
      margin: 40px auto 0;
      /* margin-top: 70px; */
     }
h1{
  font-size: 16px;
}
.blog-left{
width: 20%;
border-right: 1px solid rgb(3, 3, 3);
font-size: 12px;
padding-left: 5px;
margin-right: 3px;
margin-left: 10px;
margin-top: 84px; /*This is to push the section down from the fixed header*/
color: #040101;
}
a:visited{
color: #f04450;
}
.blog-left ul{
list-style: none;
/* margin-left: -30px; */
margin-left: auto;
margin-right: auto;
}
.blog-left li ul{
  margin-left: -20px;
}
.blog-left ul li{margin-bottom: 10px;}
.blog-left ul li a{color: #110202;
text-decoration: none; font-size: 18px;}
.blog-left .fa-solid{
  display:block; margin-left: 3px;margin-top: 25px;
  color:#f04450;font-size: 25px;font-weight: 100;
}
.treat{
  display: flex;
}
.comnd{
color:green;
}
.container{
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding:5px; margin-bottom:10px;
background-color: aliceblue;}

#navigator{
width: 80%; 
height:60px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: auto;
margin-right: auto; 
}
#navigator .next, .prev{
font-size: larger;
font-weight: 400;
padding: 5px;
}
#navigator .next a, .prev a{
  text-decoration: none;
}
#navigator .fa-arrow-left, #navigator .fa-arrow-right{
  display: block;
 }
.modify{ /*css treats commands such that the new command takes precedence over the earlier one
 example see .modify in line 244-252 takes precedence over .modify in line 59 - 65 */
width:  800px;
height: auto;
margin: 0 auto;
font-size: small;
background-color: #125973;
margin-top: -10px;
margin-bottom: 0;
}
.template-modify{
  margin-top: 3px;
}
.modify p{
  width: 400px;
  margin-left: 277px;
  margin-right: auto;
  color: #f1f1f1;
}
#modified{
color: #f04450;
}
li{
  margin-bottom: 7px;
}
/* system sizing */
.p-note{
  background-color: grey; color:#fff; padding:1px; border-radius:5px;
}
.form-control-sm{
  height: 7px;
  margin-top: 5px;
 }
 #textarea{
  border: none;
  margin-top: 5px;
 } 

/*--------------------------pandasEnd--------------------------------*/
@media only screen and (min-width:600px){
  body{
   font-family: 'Roboto san-serif';
  overflow-x: hidden;
  }
 
  #blog-content{
    display: block;
     /* width: 100%;   */
    padding-left: 0;
    margin-left: auto;
    margin-left: auto;
    border: none;
    margin-bottom: 22px;
  }
 .blog-main{
  display: block;
    width: 100%;
    margin-top: 10px; 
    /* margin-right:auto;margin-left: auto; */
    margin-bottom: 15px;
    font-size: 14px;
   } 
  
  .blog-main p{
    position: relative;
    width: 300px;
    margin: 0 auto;
   
  }

.blog-left{
  display: block;
  width: 90%; 
  border-right: none;
}
.blog-left ul{
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #000;
width: 150px;
padding-top: 10px;padding-bottom: 10px;
}
.blog-left li ul{
  margin-left: -20px;
  border: none;
  margin-bottom: -20px;
  margin-top: -20px;
}
.treat{
  margin-left: 30px;
}
 /* .blog-left li ul ul > li{
  margin-left:50px;
  margin-right: auto;} */
.blog-left ul li a{
  font-size: 13px;
}
.blog-temp{
  /* margin: 0 auto; */
  margin-top: 70px;
 }
 .container{
  display: block;
  width: 80%;
  margin-top: 20px;
 }
.form-control-sm{
  height: 7px;
  /* margin-top: 5px; */
 }
 #textarea{
  width: 100%;
  /* border: none;
  margin-top: 5px; */
 }
#footer{
  width: 100%;
}
 .modify{
  display: block;
  width: 90%;

 }
 .modify p{
  display: block;
  width: 300px;
  margin-right: auto;
  margin-left: 30px;
 }
}