/* Dark grey background with a light gray text. */
body {  background-color: #333333;  color: #f5f5f5;  font-family: Verdana; overflow:hidden !important;}

/* Basic structure (Header, Content, Footer)*/
#header{
  position:absolute;top:0px;left:0px;right:0px;height:80px; /* Take the top 80px */
  background-color:#111; /* Darker Background */ 
}
#content{
  position:absolute;top:80px;left:0px;bottom:40px;right:0px; /* Take all space except header and footer */
  padding-left:15px; padding-right:15px; text-align:justify; overflow:auto; /* Doesn't stick to borders on mobile, justifies text*/
}
#footer{
  position:absolute;left:0px;bottom:0px;right:0px; height:40px; /* Take the bottom 40px */
  text-align:center;padding:10px;border-top:1px solid #999; background-color:#222; /* Center text, add a line to the top, add some padding*/ 
}

/* "Main title" style (whole width, centered) */
h1{width:100%;  display:block;  text-align:center;}

/* Subtitles */
h2{/*STUFF HERE*/}

/* Any "div" inside content should be centered, and not take th whole space. */
#content > div {width:100%; max-width:1500px; margin: 10px auto;overflow:auto;}


#character_box{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.character{width:400px; border-radius:15px;border:1px solid #ccc;text-align:center;flex:1;flex-grow:0;flex-shrink:0; padding:10px;flex-wrap:wrap}
.character > .picture {width:150px;height:150px; margin:0px auto;border-radius:10px;}
.character > .name {font-weight:bold;}
.character > .player {font-size:12px;font-weight:600;}
.character > .description{font-size:11px;font-style:italics;}


#columns{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.column{min-width:400px; width:33%; text-align:left;flex:1;flex-grow:1;flex-shrink:0; padding:10px;flex-wrap:wrap;}




/*Links SHOULD NEVER CHANGE COLOR */
a:link{color:#efefef;}
a:active{color:inherit}
a:visited{color:#999999;}
a:hover{color:inherit}