@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Merriweather:wght@300;400;700&family=Permanent+Marker&family=Special+Elite&display=swap');



#wrapper {
   width: 1000px;
   margin: 20px auto 60px;
   padding: 3px;
   border-radius: 5px;
   box-shadow: 0px 0px 8px 12px rgba(0, 0, 0, 0.1);
   background-color: white;
}

body {
   font-family: 'Merriweather', serif;
   line-height: 1.3em;
   margin: 0px;
   padding: 0px;
   color: black;
   background-color: rgb(0, 0, 0);
   background-image: url(images/background1.jpg);
}

header, nav, footer {
   padding: 1px 25px;
}

header {
   background-color: #e53935;
   text-align: center;
   position: relative;
}

header h1 {
   line-height: 1.5em;
   font-family: 'Bangers', cursive;
   font-size: 6em;
   letter-spacing: 4px;
   text-shadow: 3px 4px black;
   margin: 0;
   color: white;
   margin-bottom: -20px;
}

h1 a {
   text-decoration: none;
   color: white;
}

h1 :hover {
   color: #ffcc00;
}

.genh1 :hover, .besth1 :hover {
   text-decoration: none;
   color: rgb(255, 102, 0);
}

hr {
   border-width: 0px 0px 4px 0px;
   border-color: white;
}

h2 {
   font-family: 'Special Elite', cursive;
   font-size: 1.5em;
   color: white;
   text-shadow: 1px 1px 1px black;
}

main {
   width: 900px;
   margin: 20px auto;
   padding: 20px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
}

aside {
   width: 200px;
   border: 1px solid rgb(163, 163, 163);
   background-color: rgb(255, 228, 228);
   padding: 20px;
}

.indexaside {
   float: left;
}

.historyaside, .genraaside, .bestaside {
   float: right;
}

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

.genraaside {
   background-color: rgb(255, 243, 228);
}
   

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

aside figure {
   text-align: center;
   margin: 0px;
   
}

aside p {
   text-align: center;
   font-size: 1.0em;;
}

.banner {
   margin-bottom: 10px;
}

h3 {
   font-family: 'Permanent Marker', cursive;
   font-size: 1.8em;
   line-height: 1.0em;
   color: #e53935;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
   padding: 5px;
   margin: 5px;
   text-align: center;
}

.his4 {
   color: rgb(120, 53, 229);
}

.gen3 {
   color: rgb(255, 204, 0);
}

.best4 {
   color: rgb(0, 65, 168);
}

a {
   text-decoration: none;
   color: black;
   transition: color 0.2s;
   padding: 2px;
}

a :hover {
   color: #ffcc00; 
}

main p {
   margin-bottom: 15px;
   font-size: 1.1em;
   color: black;
}

footer {
    text-align: center;
    background-color: #e53935;
    font-family: 'Merriweather', serif;
    margin-top: 20px;
    font-size: 0.9em;
    clear: both;
}



nav ul li a {
   font-family: 'Permanent Marker', cursive;
   color: #ffffff;
   text-decoration: none;
   transition: color 0.5s;
   display: block;
   text-align: center;
   padding: 8px;
}

nav {
   padding: 1px 30px;
}

nav ul {
   padding: 0px;
   width: 548px;
   margin: 25px auto 0px;
}

nav ul li {
   list-style-type: none;
   border: 1px solid rgb(103, 103, 103);
   border-radius: 25px;
   width: 150px;
   height: 38px;
   background-color: rgb(229, 57, 53);
   position: relative;
   text-shadow:2px 1px 1px black;
}

.group {
   width: 152px;
   height: 38px;
   float: left;
   position: relative;
   margin: 0px 15px 10px;
}

.drop {
   height: 0px;
   display: none;
   visibility: hidden;
   opacity: 0;
   transition: 0.5;
   margin-top: -1px;
}

.group:hover .drop {
   height: 38px;
   display: block;
   visibility: visible;
   opacity: 1;
}

nav ul li:hover {
   background-color: white;
   transition: 0.2s;
}

nav :hover {
   color: #e53935;
}

.magic {
   clear: both;
}

.history {
   background-image: url(images/background2.jpg);
}

.his, .his2 {
   background-color: rgb(120, 53, 229);
}

.his :hover{
   color: rgb(120, 53, 229);
}

.group:hover .historydrop {
   height: 38px;
   display: block;
   visibility: visible;
   opacity: 1;
}

.genra {
   background-image: url(images/background.4.jpg);
}

.gen, .gen2{
   background-color: rgb(255, 204, 0);
}

.gen :hover {
   color: rgb(255, 204, 0);
}

.group:hover .genradrop {
   height: 38px;
   display: block;
   visibility: visible;
   opacity: 1;
}

.best {
   background-image: url(images/background.5.jpg);
}

.best2, .best3 {
   background-color: rgb(0, 65, 168);
}


.best2 :hover {
   color: rgb(0, 65, 168);
}

.group:hover .bestdrop {
   height: 38px;
   display: block;
   visibility: visible;
   opacity: 1;
}

section {
   float: left;
   width: 580px;
   padding-left: 30px;

   line-height: 1.5em;
}

.bestsection, .genrasection, .historysection{
   padding-right: 0px;
}

.lefty {
   float: left;
   margin: 0px 25px 5px 0px;
}

.historysection1, .genrasection1{
   width: 90%;
}

.bestsection2 {
   width: 90%;
}

.shorten {
   width: 70%;
   margin: auto;
}

.gen5 {
   color: rgb(255, 204, 0);
   width: 70%;
   margin: auto;
}

.logo {
   position: absolute;
   left: 80px;
   top: 18px;
}

.logos {
   position: absolute;
   left: 110px;
   top: 18px;
}