/** Basics **/
:root {
     --primary-color: #e4c8ff;
    --primary-dark-color: #a577ed;
    --outline-color: #7b54b0;
    --text-color: black;
}

* {
  box-sizing: border-box;
}

body {
    font-family: 'MS Sans Serif', sans-serif;
    line-height:20px;
    background-color: #f2e6ff;
    background-image: url("/media/bg/check2.png");
    background-repeat:repeat;
    background-size:250px;
    background-attachment:fixed;
    margin: 0;
    padding: 10px;
    color:black;
    cursor: crosshair;
}

a:hover {
    background-color: rgba(210,152,255,0.5);
}


h1 {
  font-family:"pixel-love",sans-serif;
  font-size:30px;
  text-align:center;
}

h2 {
  font-family:"pixel-love",sans-serif;
  font-size:20px;
  text-align:left;
  margin-bottom:0px;
}

.header {
 font-family:"pixel-love", sans-serif;
 font-size:42px;
 line-height:30px;
 text-align:left;
 margin-top:20px;
 margin-bottom:10px;
}

.textbox {
  width:250px;
  height:130px;
border:2px solid #BFEFFF;
overflow:scroll;
  overflow-x:hidden;
  padding:10px;
  background-color: rgba(255,255,255,0.5);
  display:inline-block;
  margin:0px;
}

.bink {
  width:250px;
 height:200px;
 border:2px solid #BFEFFF;
  background-image:url("/media/bg/whitegrid.jpeg");
  background-size:cover;
  background-repeat:no-repeat;
 overflow:scroll;
 overflow-x:hidden;
 text-align:left;
 font-size:smaller;
line-height:20px;
padding:5px;
}

.bink > span {
 background-color: rgba(255,255,255,0.9); 
}

.bonk {
  width:220px;
 height:210px;
 border:2px solid #BFEFFF;
  background-image:url("/media/bg/whitegrid.jpeg");
  background-size:cover;
  background-repeat:no-repeat;
 overflow:scroll;
 overflow-x:hidden;
 text-align:left;
 font-size:smaller;
line-height:20px;
padding:5px;
}

.bonk > span {
 background-color: rgba(255,255,255,0.9); 
}

.beegstretch {
  width:220px;
 height:250px;
 border:2px solid #BFEFFF;
  background-image:url("/media/bg/whitegrid.jpeg");
  background-size:cover;
  background-repeat:no-repeat;
 overflow:scroll;
 overflow-x:hidden;
 text-align:left;
 font-size:smaller;
line-height:20px;
padding:5px;
}

.beegstretch > span {
 background-color: rgba(255,255,255,0.9); 
}

.stroob {
  width:400px;
 height:350px;
 border:2px solid #BFEFFF;
  background-image:url("/media/bg/whitegrid.jpeg");
  background-size:cover;
  background-repeat:no-repeat;
 overflow:scroll;
 overflow-x:hidden;
 text-align:left;
 font-size:smaller;
line-height:20px;
padding:5px;
}

.stroob > span {
 background-color: rgba(255,255,255,0.9); 
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left left middle middle right right' 
    'footer footer footer footer footer footer';
  /* grid-column-gap: 10px; - if you want gap between the columns */
} 

.left,
.middle,
.right {
  padding: 1px;
}

/* Style the left column */
.left {
  grid-area: left;
}

/* Style the middle column */
.middle {
  grid-area: middle;
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
  }
}

img {
    max-width: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 4px;
}

table, th, td {
    border: 1px solid var(--text-color);
}