body {
font-family: Georgia, serif;
margin: 0;
background-color: #08031A;
background-size: 200px;
color: #fceaff;
background-image: url('https://selachimorphic.neocities.org/images/meattile5.png');
}



#container {
max-width: 800px;
margin: 0 auto;
background-color: black;

}

#container a {
color: #D40303;
font-weight: bold;
}



#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #D40303;
}

hr{
height: 1px;
background-color: #ff0000;
border: none;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.box {
background-color: #010101;
border: 1px solid #D40303;
padding: 10px;
max-width: 900px
  display: block;

}

h1,
h2,
h3,
h4,
h5 {
color: #CF0000;
}


a:link {
  color: #ff0000;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #ff0000;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #820000;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #ff0000;
  background-color: transparent;
  text-decoration: underline;
}


aside {
background-color: #000000;
border: 1px solid #D40303;
width: 200px;
padding: 20px;
font-size: smaller;
}


main {
max-width: 800px;
border: 1px solid #D40303;
margin: 0 auto;
background-color: black;
flex: 1;
padding: 20px;
order: 2;

}


#leftSidebar {
order: 1;
}

#rightSidebar {
order: 3;
}

footer {
background-color: #820000;
width: 100%;
height: 15px;
padding: 10px;
text-align: center;
}

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  width: 50%;
  height: auto;
}

.overlay-text {
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-color: #000000; 
  color: #D40303; 
  padding: 10px 20px; 
  font-size: 15px; 
  text-align: center;
}



.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 200px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #000000; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}


.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #ff0000;
  display: block;
}


.sidenav a:hover {
  color: #820000;
}


.main {
  margin-left: 200px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}




u{color: #ff0000;}

h1 {text-align: center;}
h2 {text-align: center;}
h4 {text-align: center;}
h3 {text-align: center;}

i {text-align: center;}



#flex {
display: flex;
}


aside {
background-color: #000000;
width: 200px;
padding: 20px;
font-size: smaller;
}
            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #D40303;
            }


            /* 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: 800px) {
#flex {
flex-wrap: wrap;
}

aside {
width: 100%;
}


            
            .image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-text {
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-color: #000000; 
  color: #D40303; 
  padding: 10px 20px; 
  font-size: 15px; 
  text-align: center;
}