/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
* {
 box-sizing: border-box;
 --red: #B83851; 
 --yellow: #F5E38F;
 --cyan: #B3BD88;
 --black: #111216;
 --green: #A6A54B;
 --blue: #2C2960;
}

@font-face {
  font-family: Jack;
  src: url("Jack Armstrong.ttf");
}

@font-face {
  font-family: Comic;
  src: url("comic.ttf");
}

body {
  background-color: var(--red);
  color: black;
  padding-right: 10px;
  overflow: scroll;
}

div.box {
 border: 5px solid var(--black);
 background-color: var(--yellow);
 padding:15px;
 box-shadow: 10px 10px 0px var(--black);
 margin-bottom: 20px;
}

div.box:last-child {
  margin-bottom: 0px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'left middle right';
  grid-template-columns: minmax(435px, 25%) minmax(0,800px) 500px;
  gap: 20px
}

.struct {
  /* border: 1px solid red */
}

.left { 
  grid-area: left;
}

.middle { 
  grid-area: middle;
}

.right { 
  grid-area: right;
}


@media only screen and (max-width: 1500px) and (min-width: 801px){
  .grid-container {
    grid-template-areas:
      "left"
      "right";
    grid-template-columns: 1fr 1fr;
  }

  .left, .middle, .right {
    width: 100%;
  }
  .middle {
  position: absolute;
  top:7.5px;
  left: clamp(455px,50%,50%); /* push it to the right of the grid */
  width: calc(100vw - 475px); /* or whatever width fits */
  max-width: 800px;
  z-index:-10
  }
}

@media only screen and (max-width: 800px) {
  .grid-container {
    grid-template-areas:
      "left"
      "right"
      "middle";
    grid-template-columns: 1fr;
  }

  .left, .middle, .right {
    width: 100%;
  }
}

.para {
  font-family: "Comic Sans MS", "Comic Sans", "comic";
  text-shadow: 2px 2px 0px var(--cyan);
  font-size: 22px;
}

.title {
  font-family: "Jack";
  text-shadow: 5px 5px 0px var(--cyan);
  text-align: center;
  display: block;
  font-size: clamp(24px, 10vw, 50px);
  white-space: nowrap;
}

.icn {
  height:25px;
  vertical-align: text-bottom;
  margin-right: 10px;
  filter: drop-shadow(2px 2px 0px var(--cyan));
}

a {
  color: var(--blue);
}