@font-face {
    font-family:'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
    url(/fonts/Roboto-Regular.woff2) format('woff2'),
    url(/fonts/Roboto-Regular.woff) format('woff');
 }
 
 @font-face {
    font-family:'Roboto';
    font-style: normal;
    font-weight: bold;
    src: local('Roboto Black'), local('Roboto-Black'),
    url(/Roboto-Bold.woff2) format('woff2'),
    url(/fonts/Roboto-Bold.woff) format('woff');
 }

 body {
    font-family: Roboto;
    color:rgb(74, 74, 74);
    padding:0px;
    margin:0px;
    background-color: rgb(240, 240, 246);
    }



.lisitngbackground {
background-color: rgb(255, 255, 255);
}

.postshell {
background-color: rgb(255, 255, 255);
}

.topic a:link, a:visited {
color:rgb(61, 61, 61);
}

.short  a:link, a:visited {
   color:rgb(61, 61, 61);
   }
    
hr {
   border-top: 1px solid rgb(161, 161, 161);
   border-bottom: none;
}

.spacer44 {
padding-bottom:44px;
}
   
.topnav {
   display: flex;
   justify-content: space-between;
   align-items: center; 
   box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.31);
   background-color: rgb(35, 40, 42);
   border-style: solid;
   border-width: 0px 0px 1px 0px;
   border-color: rgb(55, 55, 55);
}

.logo {
   width: 150px;
}

.settings {
   width: 17px;
   padding:0px;
   margin: 0px;
}

.settings_topic {
   font-family: Roboto;
   font-size: 1.4em;
   }

.settings_option a:link, a:visited {
   font-size: 1.1em;
 text-decoration: none;
 display: flex;
 flex-direction: column;
 color:rgb(75, 75, 75);
   text-decoration: none;
}
  
.active_option {
  border-style: solid;
  border-width: 1px;
  padding-top:7px;
  padding-bottom:7px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 6px;
  border-color: rgb(158, 158, 158);
   }

.deactive_option {
   border-style: hidden;
   border-width: 1px;
   gap:4px;
   padding:7px;
   border-radius: 6px;
       }

.menulist {
   display: flex;
   align-items: center;
   gap:17px;
}

.date {
   text-transform: uppercase;
   font-size: 0.85em;
}

.topic_post{
   font-size: 1.7em;
}

.topic a:link, a:visited {
   font-size: 1.7em;
   text-decoration: none;
   }

.short  a:link, a:visited {
   font-size: 1.3em;
   text-decoration: none;
   line-height: 1.3em;
}

.short{
padding-bottom:27px;
}

.short_post{
   font-size: 1.3em;
   padding-bottom:11px;
   line-height: 1.3em;
   }

.news_content {
   font-size: 1.1em;
   line-height: 1.4em;
}

.news_content a:link, a:visited {
   text-decoration: none;
}

.footer {
   padding-bottom:33px;
   display:flex;
   flex-direction: column;
   align-items: center; 
   font-family: Roboto;
   font-size: 0.8em;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgb(147, 147, 147);
   gap:11px;
}

@media (orientation: landscape) {

   .lisitngbackground {
      display:flex;
      flex-direction: column;
      gap:11px;
      border-radius: 11px;
      padding-top:22px;
      padding-right:22px;
      padding-left:22px;
      padding-bottom:0px;
   }

   .postshell {
      display:flex;
      flex-direction: column;
      gap:11px;
      border-radius: 11px;
      padding-top:22px;
      padding-right:22px;
      padding-left:22px;
      padding-bottom:22px;
   }

   .news {
      padding-top:44px;
      padding-bottom:44px;
      padding-right:8%;
      padding-left:8%;
      display:flex;
      flex-direction: column;
      gap:15px;
   }

   .page_shell {
      padding-top:44px;
      padding-bottom:44px;
      padding-right:8%;
      padding-left:8%;
      display:flex;
      flex-direction: column;
      gap:15px;
   }

   .topnav {
      padding-left:16px;
      padding-right:33px;
      padding-top:8px;
      padding-bottom:4px;
   }

   .navigation  {
      font-family: Roboto;
      font-size: 0.8em;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 0.1em;
      float: left;
      padding-top:9px;
      padding-bottom:9px;
   }

   .navigation a:link, a:visited  {
      text-decoration: none;
      color:rgb(227, 227, 227);
      padding:10px;
   }

   .navigation a:hover  {
     padding:10px;
     border-radius: 6px;
     background-color: rgb(62, 62, 62);
   }

   .post_image
   {
   float:right;
   width:50%;
   padding-left:17px;
   padding-bottom:17px;
   }
 }
 
 @media (orientation: portrait) {

   .lisitngbackground {
      display:flex;
      flex-direction: column;
      gap:15px;
      border-radius: 11px;
      padding-top:22px;
      padding-right:22px;
      padding-left:22px;
      padding-bottom:0px;
   }

   .postshell {
      display:flex;
      flex-direction: column;
      gap:15px;
      border-radius: 11px;
      padding-top:22px;
      padding-right:22px;
      padding-left:22px;
      padding-bottom:22px;

   }

   .news {
      padding-top:33px;
      padding-bottom:33px;
      padding-right:5%;
      padding-left:5%;
      display:flex;
      flex-direction: column; 
      gap:15px;
   }

   .page_shell {
      padding-top:33px;
      padding-bottom:33px;
      padding-right:5%;
      padding-left:5%;
      display:flex;
      flex-direction: column; 
      gap:15px;
   }

   .topnav {
      flex-direction: column;
      align-items: center; 
      padding-left:0px;
      padding-right:0px;
      padding-top:18px;
      padding-bottom:15px;
      text-align: center;
      gap:11px;
   }

   .navigation  {
      font-family: Roboto;
      font-size: 0.8em;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 0.1em;
      float: none;
   }

   .navigation a:link, a:visited  {
      text-decoration: none;
      color:rgb(227, 227, 227);
   }
   
   .post_image
   {
   width:100%;
   padding-top:0px;
   padding-bottom:22px;
   }
 }