html, body {

color: black;
font-family: 'Courier New', Courier, monospace;

background-color: rgb(255, 214, 214);
margin:0;                  /*sticks footer to bottom*/
min-height: 100%;
background-image: linear-gradient(#181818 1px, transparent 1px), linear-gradient(to right, #2e2e2e 1px, transparent 1px);
background-color: #000000; 
z-index: -2;
}



body {
position: relative;
margin:0;

}

h1{
  margin-left: 10vw;
}

p {
font-size: 1rem;
font-weight: bold;

}

.bodycont{
    z-index: 999;
max-width: 1500px;
margin: auto;
margin-top: 10px;
background-color: #bebebe;
border: #AFAFAF solid 1px;}



.main {
margin-left: clamp(6em, 15%, 200px); /* Same as the width of the sidenav */
margin-right: min(2%, 1em);
padding: 0px ;


align-items: center;

}

.box {
  background-color: #AFAFAF;
   margin: auto; 
  padding: 0 ; 
   border: solid 1px #AFAFAF;
  border-color:  white gray gray white;
box-shadow: 1px 1px 0 0 black,
0 0 0 1px lightgrey; 
        
}

.box p {
padding: 10px 10px;
margin: 2px;

}

.characters {
  background-color: rgb(236, 236, 236);
        margin: auto;
        padding: 5px;
        display: flex; 
        min-width: auto;

        flex-wrap: wrap;
        
        font-size: 12px;
        
        border: solid 2px #AFAFAF;
        box-shadow: 
       
        inset -1px -1px white,
        inset 1px 1px black
        ;
      }
     
    
      
      
      .characters a{
        padding: 3px;
        margin: 3px;
        max-width: 206px;     
        font-size: clamp(12px, 1.5vw, 20px);
        color: #000000;
        text-align: center;
}

.characters a:hover {
  color: rgb(184, 0, 15);
}

.characters p{
  width: 100%;
  font-size: clamp(1em, 1.5vw, 12px);
}


/*minimum of 3 chars should stay in a row no matter what*/
@media screen and (max-width: 1000px) {
.characters {
        margin: auto;
        padding: 5px;
       
       
}

.characters a{
        padding: 3px;
        margin: 3px;
        width: 30%;
     
      }

      img{
        max-width: 100%;
      }

      
    }

@media screen and (max-width: 500px) {

  .characters a{
    flex-grow: 1;
  }

}