:root {
     --header-image: url('');
     --body-bg-image: url('');
    /* colors */
     --content: #43256E;
}
    @font-face {
                    font-family: Archivo;
                    src: url('https://americasdecline.neocities.org/fonts/Archivo-VariableFont_wdth,wght.ttf');
                } 

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

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


 body {
     margin: 0;
   background-image: url(https://americasdecline.neocities.org/hilary/img/hds_bg.jpg);
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size:cover;
     background-color:#f0e4b9;
   color:#ffffff;
}
 * {
     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: 3px 3px 6px 1px #000000;
     -webkit-box-shadow: 3px 3px 6px 1px #000000;
     margin-bottom:50px;
   margin-top:75px;
   border-radius:10px;
   border:3px solid #181818;
   opacity:.96;
}
 #header {
     width: 100%;
     max-width:900px;
     background-image: url("https://americasdecline.neocities.org/hilary/img/HD-titlebar.png");
   background-color:#fff8aa;
     background-repeat: no-repeat;
     background-size: 100%;
     height: 25px;
     padding: 4px;
   border-top-left-radius:9px;
   border-top-right-radius:9px;
   margin-top:0;
}
 #flex {
     display: flex;
}
 aside {
background-color: #424e25;
     color:#ffffff;
     padding: 10px;
     font-family: 'Verdana', 'Arial', sans-serif;
     font-size: 14px;
     font-weight:bold;
}
 #layout {
     background-image: url("https://americasdecline.neocities.org/hilary/img/hds_im_header_r.png");
     background-repeat: no-repeat;
     background-size: 100%;
   background-color:#fff8aa;
     padding: 0px;
     font-family: 'Jost', 'Century Gothic', 'Arial', sans-serif;
     font-size:14px;
     color:#ffffff;
     width:100%;
   border-bottom-right-radius:10px;
   border-top:1px solid #181818;
     order: 2;
}
 main {
background-color:#fff8aa;
   padding: 20px;
   border-top:3px solid #181818;
     font-family: 'Helvetica', 'Arial', sans-serif;
     font-size:1.2em;
     line-height:1.3em;
     color:#535353;
     width:100%;
     margin-top:410px;
   border-bottom-right-radius:9px;
     overflow-wrap: break-word;
     order: 2;
}
 main a {
     color:#424e25;
     text-decoration:underline;
     font-weight:bold;
}
 main a:hover {
     color:#798d5e;
     font-weight:bold;
     text-decoration:none;
}
 .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;
}
 
 p {
     margin-top:15px;
     margin-bottom:15px;
}
img {
        opacity: 0.9;
        filter: alpha(opacity=90);
		border-radius:15px;
    }
    
    img:hover {
        opacity: .8;
        filter: alpha(opacity=80);
		border-radius:15px;
    }
	
	.artr {width:25%; max-width:200px; border-radius:15px; float:right; margin:0 0 0 8px; clear:none;}

	.artl {width:25%; max-width:200px; border-radius:15px; float:left; margin:0 10px 0 0; clear:none;}

 h1 {
     font-family: 'Archivo', 'Helvetica', 'Arial Black', sans-serif;
     color: #f83e2b;
     font-size: 38px;
     line-height:27px;
   letter-spacing:-4px;
   text-decoration:underline;
   text-transform:lowercase;
     margin: 0px 0px 25px 0px;
     position:relative;
     font-weight: bold;
     text-align: center;
   clear:both;
}
 h2 {
     font-family: 'Archivo', 'Helvetica', 'Arial', sans-serif;
     color: #000000;
     font-size: 24px;
     font-weight: bold;
     line-height:22px;
   letter-spacing:-2px;
     text-decoration:none;
   border-bottom: 2px solid #f83e2b;
     margin-top:0px;
     margin-bottom:5px;
   clear:both;
}
 h3 {
     font-family: 'Archivo', 'Helvetica', 'Arial', sans-serif;
     color: #424e25;
     font-size: 18px;
     line-height:16px;
     font-weight: 450;
     text-transform: uppercase;
     letter-spacing:-1px;
     padding:0px;
     margin-top:0;
     margin-bottom: 5px;
}
 h4 {
     font-family: 'Archivo', 'Helvetica', 'Arial', sans-serif;
     color: #606060;
     font-size: 14px;
   line-height:12px;
     font-weight: normal;
   border-bottom:1px solid #424e25;
     padding:0px;
     text-align:left;
   text-transform:uppercase;
     margin-top:0;
     margin-bottom: 5px;
}
 u {
     text-decoration: none;
     border-bottom: 2px solid #f83e2b;
     padding-bottom:0;
     color: #000000;
   letter-spacing:-.5px;
     background-color:transparent;
}
b, strong {
     color: #000000;
     font-family: 'Archivo', 'Arial', sans-serif;
   letter-spacing:-.5px;
}
 em, i {
     font-family: 'Georgia', serif;
     font-style:italic;
   letter-spacing:.5px;
     color:#f83e2b;
}

ol li {margin-bottom:15px;}

 .box {
background-color: #f83e2b;
     border: 3px solid #000000;
     padding: 10px;
     color:#ffffff;
     border-radius:10px;
     margin-bottom:10px;
   font-family: 'Archivo', 'Helvetica', 'Arial', sans-serif;
   font-size:16px;
   line-height:20px;
   opacity:.85;
}

.box a {
            color:#000000;
            text-decoration:underline;
            padding:1px;
            font-weight:bold;
                }

        .box a:hover {  
            color:#000000;
            font-weight:bold;
            padding:1px;
            text-decoration:none;
                }

        .box b, .box strong, .box italic, .box em, .box h2, .box h3, .box h4 { 
                color:#ffffff;
                }

.box h1 {color:#ffffff;}

        .box u {  
                text-decoration: none;
     border-bottom: 3px solid #ffffff;
     padding-bottom:0;
     color: #000000;
   letter-spacing:-.5px;
     background-color:transparent;
                }

 .bigtext {
     font-family: 'Georgia', serif;
     color:#171717;
     font-size:20px;
   letter-spacing:-1px;
     line-height:18px;
     margin-bottom:10px;
}

.sans {font-family: 'Archivo', 'Helvetica', 'Arial', sans-serif; text-decoration:none;}

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

}

 #leftSidebar {
     background-repeat: no-repeat;
     background-size: 100%;
   border-bottom-left-radius:9px;
     width:200px;
     padding-top:0px;
   font-weight:normal;
   color:#ffffff;
   border-right:3px solid #181818;
   border-top:1px solid #181818;
     order: 1;
}

#leftSidebar b, #leftSidebar strong {color:#fff8aa;}

.slink:link, .slink:visited {color:#ffffff;}

.slink:hover {color:#fff8aa;}

 .nav2:link, .nav2:visited, .nav2:active {
     color: #000000;
     padding:2px;
     text-decoration:none;
     font-weight: bold;
}
 .nav2:hover {
     color:#fff8aa;
     padding:2px;
     text-decoration:none;
     font-weight: bold;
}
 #topnav:link, #topnav:visited, #topnav:active{
     background-color: #f83e2b;
     color: #000000;
     text-decoration:none;
     font-weight: bold;
     padding:2px;
}
 #topnav:hover {
     background-color: #798d5e;
   color:#000000;
     text-decoration:none;
     font-weight: bold;
     padding:2px;
}
/* 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:0;
       padding-top:1%;
    }
  
    /* 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:58%;
       border-bottom-right-radius:0;
         order: 2;
    }
     .ml {
         width:100%;
         order:2;
    }
     .mr {
         width:100%;
         order:2;
    }
     #leftSidebar {
         width:100%;
       border-bottom-right-radius:9px;
         order: 3;
    }
     img {
         max-width: 100%;
         height: auto;
         margin-left: auto;
         margin-right: auto;
    }
   
   .artr {width:100%; max-width:100%; display:block; clear:both; float:none; text-align:center; margin-bottom:10px;}
   
      .artl {width:100%; max-width:100%; display:block; clear:both; float:none; text-align:center; margin-bottom:10px;}
   
     .feature {
         max-width: 100%;
         height: auto;
         float:none;
         display: block;
         margin-left: auto;
         margin-right: auto;
    }
    
    .greenbox {font-size:1.5em;}
}