@font-face {
  font-family: 'vcr_osd_mono';
  src: url('/fonts/vcr_osd_mono.woff');
  font-weight: normal;
  font-style: normal;
}

body {
  
  background-image: url("/bgs/baconbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #5a1818;
  margin: 0;
  font-family: "vcr_osd_mono";
  color: white;
  text-shadow: 2px 2px #5A1818;
}

.parent {
display: grid;
grid-template-columns: 0.25fr repeat(4, 1fr) 0.25fr;
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 0px; 
}

.mainbox { grid-area: 1 / 2 / 5 / 6;
            padding: 50px;
            background-color: rgba(0,0,0,0.5);
        }
.titlebox { grid-area: 1 / 2 / 2 / 6; }

.boxbox { grid-area: 2 / 2 / 4 / 4;
          float:left;
          width: 49%;
          margin-bottom: 40px;
          max-height: 350px;
        } 
.coverbox { grid-area: 2 / 2 / 3 / 3;
        float: left;
        margin-right: 10px;
        }
.coverbox img { border: 1px solid red; }
.infobox {  grid-area: 2 / 3 / 3 / 4;
          max-width: 75%;
          padding-bottom: 15px;
          overflow: auto;
          }
.yapbox { grid-area: 3 / 2 / 4 / 4;
    float:left;
    height: 100px;
    padding: 5px;
    overflow-y: scroll;
    } 

.boxbox2 { grid-area: 2 / 4 / 4 / 6;
          float:right;
          width: 49% ;
          margin-bottom: 40px;
          max-height: 350px;}
          
.coverbox2 { grid-area: 2 / 4 / 3 / 5;
          float:left;
          margin-right: 10px;
          }
.coverbox2 img { border: 1px solid red; }
.infobox2 {  grid-area: 2 / 5 / 3 / 6;
          max-width: 75%;
          padding-bottom: 15px;
          overflow: auto;
          }
.yapbox2 { grid-area: 3 / 4 / 4 / 6;
    float:left;
    height: 100px;
    padding: 5px;
    overflow-y: scroll;
    } 
    
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


        
footer {
                background-color: rgba(0,0,0,0);
                width: 500px;
                height: 40px;
                padding: 10px;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                text-shadow: 2px 2px #5a1818;
}

.resize {
      max-width: 100%;
      height: auto;
}

h1 {
  display: block;
  font-size: 60px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  text-align: center;}
  
h3 {
  display: block;
  font-size: 32px;
  margin: 0;
  font-weight: bold;
  color: red;
  text-shadow: 2px 4px #5A1818;
}