body {
  background-image: url("/pbg.png");
  background-position: center;
   background-size: 250px;
  background-repeat:repeat;
  color: #1c2e4a;
  font-family: Monaco;
  overflow: hidden;
}
.flex {
  
 height: 100vh;
 width: 100vw;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 
}
.header { 
height: 20%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;   
}
.main { 
height: 76%;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;   
}
.holder {
  
height: 80%;
width: 20%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
overflow: hidden;
}
#white {
background-color: white;
border: 2px black solid;
color: black;
  
}
#black {
background-color: black;
border: 2px white solid;
color: white;
  
}
.small {
  
font-size: 30px;
text-align: center;
width: 100%;
height: 10%;
border-bottom: solid 2px white;  
  
  
}
#white2 {
  
border-bottom: solid 2px black;    
  
}
.guys {
height: 85%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;

}
.maintwo {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 45%;
width: 45%; 
}
.maintwo img {
height: 100%;  
  
}
.miniguys img {
height: 100%; 
}
.chartitle {
 font-size: 25px;
 width: 100%;
 height: 25%;
border-top: 2px dashed black;
border-bottom: 2px dashed black;
display: flex;
justify-content: center;
align-items: center;
  
}
#black2 {
border-top: 2px dashed white;
border-bottom: 2px dashed white;  
  
  
}
.miniguys {
  
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 30%;
width: 32%; 
} 
.minichartitle {
 font-size: 15px;
 width: 100%;
 height: 25%;
border-top: 2px dashed black;
border-bottom: 2px dashed black;
display: flex;
justify-content: center;
align-items: center;
  
}  
  
nav {
  display: flex;
  justify-content: center;
  background-color:white;
  width: 270px;
  position: relative; 
  border: 2px solid lightblue;
  margin: 10px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  margin: 0 10px;
}
a {
  text-decoration: none;
}
a {
  color: #87cefa; 
}

a:hover {
  color: red;
}

a:visited {
  color: red;
}

.fancy {
  color: #87cefa;
  font-size: 40px;
  position: relative;
}

.fancybox {
  width: 200px;
  background-color: white;
  border: 2px solid lightblue;
}
.box {
  width: 400px;
  height: 790px;
  background-color: #3D3635;
  border: 1px solid brown;
  display: flex;
  justify-content: center;
  overflow-y: scroll;
  top: 30px;
}
.box::-webkit-scrollbar {
  width: 8px; 
}

.box::-webkit-scrollbar-track {
  background-color: black;
}

.box::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 4px; 
}

.box::-webkit-scrollbar-thumb:hover {
  background-color: lightblue; 
}
.con {
  width: 400px;
  height: 790px;
  background-color: white;
  border: 1px solid lightblue;
  display: flex;
  justify-content: center;
  overflow-y: scroll;
  top: 30px;
 padding:10px;
  text-align: left;
}
.con::-webkit-scrollbar {
  width: 8px;
}

.con::-webkit-scrollbar-track {
  background-color: lightblue; 
}

.con::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 4px;
}

.con::-webkit-scrollbar-thumb:hover {
  background-color: violet;
}