/* CSS Divider Grids */
.wrapper {
min-height: 90vh;
width: 900px;
gap: 0px;
display: grid;
margin: auto;
border: #ffffff 10px ridge;
    grid-template-columns: 1fr 3fr 2fr;
    grid-template-rows: 165px 1fr;
grid-template-areas:
        "header header header"
        "left middle right";
}

.wrapper > .header {
    grid-area: header;
    background-color: #a5231c;
    border: #ffffff 10px ridge;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: ridge;
    border-left-style:none;
}

.wrapper > .left {
    grid-area: left;
    background-color: #f1e3d1;
    border: #ffffff 10px solid;
    border-top-style: none;
    border-right-style: ridge;
    border-bottom-style: none;
    border-left-style:none;
    text-align: center;

}

.wrapper > .middle {
    grid-area: middle;
    background-color: #e7e6ed;
    border: #ffffff 1px ridge;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style:none;
    grid-template-rows: 1fr;
    max-height: 710px;
    overflow-y: auto;
}

.wrapper > .right {
    grid-area: right;
    background-color: #f1e3d1;
    border: #ffffff 10px ridge;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style:ridge;
}
/* Command Line for Phone Adaptation */
@media (max-width:768px) {
    .wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas: 
            "header"
            "middle"
            "left"
            "right";
    }
        .wrapper > .right {
            grid-area: right;
            background-color: lightgrey;
            border: #000 10px ridge;
            border-top-style: ridge;
            border-right-style: none;
            border-bottom-style: none;
            border-left-style: none;
        }   

}
/* Body and Font interface */
 @font-face {
  font-family: w95display;
  src: url(https://dl.dropboxusercontent.com/scl/fi/n0kkhxx2bmh9zrwn079ir/ari-w9500-display.ttf?rlkey=zp88quqan8h9pej6883dnchap&st=eqacpami&dl=0);
}
 @font-face {
  font-family: w95bold;
  src: url(https://dl.dropboxusercontent.com/scl/fi/mqhbb7obwnfcc9m4uemvm/ari-w9500-bold.ttf?rlkey=fop17d1uv0hmyayxrvb5o3dil&st=aqx2tkm9&dl=0);
}
 @font-face {
  font-family: w95regular;
  src: url(https://dl.dropboxusercontent.com/scl/fi/z3qzedaan24mnc33o9a5k/ari-w9500.ttf?rlkey=73tmxd06xjqiqzpgzo3obudfh&st=43pyr0rq&dl=0);
}

   body {
    background-color: white;
    color: black;
    font-family: w95regular;
    font-smooth: never;
    -webkit-font-smoothing: none;
     -moz-osx-font-smoothing: grayscale;
    
  }

  p {
    font-size: 15px;
    font-family: w95regular;
  }
  
  h1 {
    font-size: 50px;
    font-family: w95display;
  }
  
  h2 {
    font-size: 23px;
    font-family: w95bold;
  }
  
  h3 {
    font-size: 20px;
    font-family: w95bold;
  }
  
  h4 {
    font-size: 12px;
    font-family: w95display;
  }

/* Heading Sizes */

  hr {
    margin: auto;
  }

  marquee {
    color: #fff;
    font-size: 15px;
    font-weight:none;
    font-family: w95regular;
  }

  .shorthr {
    text-align: center;
    margin: 20px;
    border-color: black;
    border-style: dotted;
  }