@font-face {
     font-family: Bebas;
     src: url('https://americasdecline.neocities.org/fonts/BebasNeue-Regular.ttf');
}
 @font-face {
     font-family: Archivo Black;
     src: url('https://americasdecline.neocities.org/fonts/ArchivoBlack-Regular.ttf');
}

 @font-face {
     font-family: Libre Bodoni;
     src: url('https://americasdecline.neocities.org/fonts/LibreBodoni-VariableFont_wght.ttf');
}

@font-face {
     font-family: Libre Baskerville;
     src: url('https://americasdecline.neocities.org/fonts/LibreBaskerville-Regular.ttf');
}

 @font-face {
     font-family: Courier Prime;
     src: url('https://americasdecline.neocities.org/fonts/CourierPrime-Regular.ttf');
}

@font-face {
     font-family: Libre Franklin;
     src: url('https://americasdecline.neocities.org/fonts/LibreFranklin-VariableFont_wght.ttf');
}


 body {
     margin: 0;
     background-color: #000000;
     background-image: url(https://americasdecline.neocities.org/news/img/ANI-WFBG01.png);
     background-attachment: scroll;
     background-repeat: repeat;
}
 * {
     box-sizing: border-box;
}
/* below this line is CSS for the layout */
 #container {
     max-width: 900px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom and change the media query according to the comment! */
     margin: 0 auto;
     box-shadow: 4px 3px 8px 1px #000000;
     -webkit-box-shadow: 4px 3px 8px 1px #444444;
     margin-bottom:50px;
   border-radius:15px;
}
 #header {
     width: 100%;
     max-width:1000px;
     border-top-left-radius:10px;
     border-top-right-radius:10px;
     background: rgb(0,12,255);
background: linear-gradient(0deg, rgba(0,12,255,1) 0%, rgba(84,0,247,1) 50%, rgba(0,12,255,1) 100%);
     height: 30px;
     margin-top: 30px;
     padding: 4px;
     font-family: 'Trebuchet MS', sans-serif;
     font-weight: bold;
     color: #ffffff;
   opacity: 0.85;
}
 #flex {
     display: flex;
}
 aside {
     background-color: #ffff37;
     color:#ffffff;
     padding: 10px;
     font-family: 'Verdana', 'Arial', sans-serif;
     font-size: 14px;
     font-weight:bold;
   opacity: 0.85;
}
 #layout {
     background-image: url("https://americasdecline.neocities.org/news/img/AMERICA-NEWS-TIMES-HEADER.png");
     background-repeat: no-repeat;
     background-size: 100%;
     background-color:#E7E7E7;
   border-bottom-right-radius:15px;
     padding: 0px;
     width:100%;
   opacity: 0.9;
     order: 2;
}
 main {
     background-color:transparent;
     padding: 20px;
     font-family: 'Verdana', sans-serif;
     font-size:.75em;
     color:#404040;
     line-height:1.25em;
     width:100%;
     margin-top:415px;
   border-bottom-right-radius:15px;
     overflow-wrap: break-word;
     order: 2;
}
 main a {
     color:#fb0000;
     text-decoration:underline;
   font-family: 'Libre Franklin', 'Helvetica', sans-serif;
     font-weight:700;
}
 main a:hover {
     color:#0012ff;
     font-weight:700;
     text-decoration:underline;
}
 .ml {
     width:50%;
     float:left;
     display:block;
     padding-right:10px;
     position:relative;
     clear:none;
     flex:1;
}
 .mr {
     width:50%;
     float:left;
     display:block;
     position:relative;
     clear:none;
     flex:2;
}
 .feature {
     width: 200px;
     border:1px solid black;
     float:left;
     margin-right: 15px;
     margin-bottom: 5px;
}
 p {
     margin-top:0px;
   font-family: 'Libre Franklin', 'Helvetica', 'Arial', sans-serif;
   font-size:1.25em;
   line-height:1.2em;
}
 h1 {
     font-family: 'Archivo Black', 'Arial Black', sans-serif;
     color: #fb0000;
     font-size: 50px;
     line-height:45px;
   letter-spacing:-4px;
     margin: 5px 0px 25px 0px;
     font-weight: bold;
     text-align: center;
   clear:both;
}
 h2 {
     font-family: 'Libre Bodoni', 'Bodoni', 'Georgia', 'Times', 'Times New Roman', serif;
     color: #0012ff;
     font-size: 32px;
     font-weight: bold;
     line-height:29px;
   letter-spacing:-2px;
     margin-top:0px;
     margin-bottom:5px;
   clear:both;
}
 h3 {
     font-family: 'Libre Franklin', 'Franklin Gothic', 'Helvetica', 'Arial', sans-serif;
     color: #fb0000;
     font-size: 25px;
     line-height:20px;
     font-weight: 800;
     letter-spacing:-1px;
     padding:5px;
     padding-bottom:0px;
     margin-top:0;
     margin-bottom: 5px;
   clear:both;
}
 h4 {
     font-family: 'Libre Franklin', 'Franklin Gothic', 'Helvetica', 'Arial', sans-serif;
     color: #434343;
     font-size: 16px;
   line-height: 14px;
     font-weight: 300;
     padding:5px;
   padding-bottom:1px;
   border-bottom: solid 2px #0012ff;
   font-weight:500;
     text-align:left;
     margin-top:0;
     margin-bottom: 5px;
   clear:both;
}
 u {
     text-decoration: none;
     border-bottom: solid 2px #fb0000;
     color: #000000;
   background-color:#ffff37;
   line-height:.75em;
   padding:0;
   font-weight:500;
}

 b, strong {
     color: #fb0000;
     font-family: 'Courier Prime', 'Courier New', serif;
}

 em, italic {
     font-family: 'Georgia', serif;
     font-style:italic;
     color:#0012ff;
}
 .box {
     background-color: #ffff37;
     border: 4px solid #0012ff;
     padding: 10px;
   padding-bottom:17px;
     color:#404040;
     border-radius:10px;
     margin-bottom:10px;
   font-size:.75em;
}
 .bigtext {
     font-family: 'Courier Prime', 'Courier New', serif;
     color:#000000;
     font-size:20px;
     line-height:19px;
   padding-bottom:0;
     margin-bottom:15px;
}

.ct
{
margin: 5px 5px 5px 5px;
height:100px;
border: 1px solid;
text-align: left; 
   float: left; 

}

 #leftSidebar {
     background-image: url();
     background-repeat: no-repeat;
     background-size: 100%;
     background-color:#ffff37;
     border-bottom-left-radius:15px;
     width:200px;
     padding-top:5px;
     order: 1;
}
 .nav2:link, .nav2:visited, .nav2:active {
     color: #0012ff;
   font-size:14px;
     padding:2px;
     text-decoration:none;
     font-weight: bold;
     line-height:10px;
   margin:0;
}
 .nav2:hover {
     color:#fb0000;
     text-decoration:none;
     font-weight: bold;
}
 #topnav:link, #topnav:visited, #topnav:active {
     background-color: #fb0000;
     color: #ffffff;
     text-decoration:none;
     font-weight: bold;
   font-size:14px;
     padding:2px 5px 2px 5px;
}
 #topnav:hover {
     color: #ffff37;
     text-decoration:none;
     font-weight: bold;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page? by default, the container width is 900px. in order to keep things responsive, take your new height, and then subtrack it by 100. use this new number as the "max-width" value below */
 @media only screen and (max-width: 1000px) {
   
       #container {
    margin: 25px 25px 25px 35px;  
    }
    
     #flex {
         flex-wrap: wrap;
    }
     aside {
         width: 100%;
         max-width:900px;
    }
     #header {
         margin-top:50px;
    }
  
    /* the order of the items is adjusted here for responsiveness! since the sidebars would be too small on a mobile device. feel free to play around with the order! */
    

    
    
     layout {
         width:100%;
         order: 1;
    }
     main {
         width:100%;
         margin-top:55%;
         order: 2;
    }
     .ml {
         width:100%;
         order:2;
    }
     .mr {
         width:100%;
         order:2;
    }
     #leftSidebar {
         width:100%;
         order: 3;
    }
     img {
         max-width: 100%;
         height: auto;
         margin-left: auto;
         margin-right: auto;
    }
     .feature {
         max-width: 100%;
         height: auto;
         float:none;
         display: block;
         margin-left: auto;
         margin-right: auto;
    }
    
    .box {font-size:1em;}
   
   h1 {font-size:34px;
   line-height:32px;
   margin-bottom:10px;}
}