: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');
}


 body {
     margin: 0;
   background-image: url(https://americasdecline.neocities.org/music/wrapped25/img/25WU-BBG.png);
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size:cover;
}
 * {
     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 #a841d0;
     -webkit-box-shadow: 3px 3px 6px 1px #a841d0;
     margin-bottom:50px;
   margin-top:75px;
   border-radius:10px;
   border:1px solid rgba(0, 0, 0, 0.7);
   opacity:.96;
}
 #header {
     width: 100%;
     max-width:900px;
     background-image: url("https://americasdecline.neocities.org/music/wrapped25/img/25WU-VTB.png");
   background-color:#ffb11e;
     background-repeat: no-repeat;
     background-size: 100%;
     height: 25px;
     padding: 4px;
     font-family: 'Trebuchet MS', sans-serif;
     font-weight: bold;
     color: #ffffff;
   border-top-left-radius:10px;
   border-top-right-radius:10px;
   margin-top:0;
}
 #flex {
     display: flex;
}
 aside {
background: #A54ED8;
background: linear-gradient(0deg, rgba(165, 78, 216, 1) 0%, rgba(197, 71, 215, 1) 25%, rgba(226, 32, 222, 1) 50%, rgba(197, 71, 215, 1) 75%, rgba(165, 78, 216, 1) 100%);
     color:#ffffff;
     padding: 10px;
     font-family: 'Verdana', 'Arial', sans-serif;
     font-size: 14px;
     font-weight:bold;
}
 #layout {
     background-image: url("https://americasdecline.neocities.org/music/wrapped25/img/2025-wrapped-unpacked-header-v2.png");
     background-repeat: no-repeat;
     background-size: 100%;
     background-color:#fea8fd;
     padding: 0px;
     font-family: 'Jost', 'Century Gothic', 'Arial', sans-serif;
     font-size:14px;
     color:#ffffff;
     width:100%;
   border-bottom-right-radius:10px;
     order: 2;
}
 main {
background: #EFACED;
background: linear-gradient(0deg, rgba(239, 172, 237, 1) 0%, rgba(222, 206, 222, 1) 25%, rgba(245, 245, 245, 1) 50%, rgba(222, 206, 222, 1) 75%, rgba(239, 172, 237, 1) 100%);
     padding: 20px;
     font-family: 'LibreBaskerville', 'Georgia', 'Times New Roman', 'Times', serif;
     font-size:16px;
     line-height:26px;
     color:#303030;
     width:100%;
     margin-top:425px;
   border-bottom-right-radius:9px;
     overflow-wrap: break-word;
   opacity:.8;
     order: 2;
}
 main a {
     color:#4727ff;
     text-decoration:underline;
     font-weight:bold;
}
 main a:hover {
     color:#a82dda;
     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.6;
        filter: alpha(opacity=90);
		border-radius:15px;
    }
    
    img:hover {
        opacity: .8;
        filter: alpha(opacity=100);
		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: #870fbe;
     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: #ff49ff;
     font-size: 24px;
     font-weight: bold;
     line-height:22px;
   letter-spacing:-2px;
     text-decoration:none;
   border-bottom: 2px solid #870fbe;
     margin-top:0px;
     margin-bottom:5px;
   clear:both;
}
 h3 {
     font-family: 'Archivo', 'Helvetica', 'Arial', sans-serif;
     color: #870fbe;
     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: #dedede;
     font-size: 14px;
   line-height:12px;
     font-weight: normal;
   border-bottom:1px solid #870fbe;
     padding:0px;
     text-align:left;
     margin-top:0;
     margin-bottom: 5px;
}
 u {
     text-decoration: none;
     border-bottom: 2px solid #ff49ff;
     padding-bottom:0;
     color: #000000;
   letter-spacing:-.5px;
     background-color:transparent;
}
b, strong {
     color: #870fbe;
     font-family: 'Archivo', 'Arial', sans-serif;
   letter-spacing:-.5px;
}
 em, italic {
     font-family: 'Georgia', serif;
     font-style:italic;
   letter-spacing:.5px;
     color:#de2bde;
}

ol li {margin-bottom:15px;}

 .box {
background: #EDB4EA;
background: radial-gradient(circle, rgba(237, 180, 234, 1) 0%, rgba(255, 73, 255, 1) 50%, rgba(255, 13, 212, 1) 100%);
     border: 1px solid #870fbe;
     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:#870fbe;
            text-decoration:underline;
            padding:1px;
            font-weight:bold;
                }

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

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

.box h1 {color:#ff49ff;}

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

 .bigtext {
     font-family: 'Archivo', 'Helvetica', 'Arial', sans-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;
     order: 1;
}

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

.slink:link {color:#ffdcfe;}

.slink:hover {color:#ffffff;}

 .nav2:link, .nav2:visited, .nav2:active {
     color: #ffffff;
     padding:2px;
     text-decoration:none;
     font-weight: bold;
}
 .nav2:hover {
     color:#ff49ff;
     padding:2px;
     text-decoration:none;
     font-weight: bold;
}
 #topnav:link, #topnav:visited, #topnav:active{
     background-color: #ff49ff;
     color: #feb9fd;
     text-decoration:none;
     font-weight: bold;
     padding:2px;
}
 #topnav:hover {
     background-color: #ff49ff;
   color:#ffffff;
     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;}
}