@font-face {
    font-family: sillyScary;
    src: url(SillyScary.otf);
  }
.main{
    display: grid; /* makes everything grid */
    margin: 0 auto; /* centers it */
    grid-template-areas: /* draws the layout*/
    "left middle right"
    "left middle right";
    grid-template-columns: 0.5fr 2fr 0.5fr; /* size of the boxes (in order) */
    grid-template-rows: auto auto;
    gap: 1em;
    width: 70%;
}
.header {
    display: flex;
    margin: 0 auto;
    width: 1536px;
    justify-content: center;
    width: 100%;
  }
.centered-img {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    margin-top: 10px;
    height: 20%;
    width: 90%;
    object-fit: contain;
    justify-content: center;
}
.intro{
    width: 30%;
    margin: auto auto;
}
.intro img{
    display: inline;
}
.intro p{
    display: inline;
    white-space: nowrap;
}
.heading {
    color: aliceblue;
    font-family: sillyScary;
    margin-left: 5%;
    margin-right: 5%;
}

  body {
    background-color: rgb(55, 9, 61);
  }

  .tag{
    width: 15%;
  }

  .box{
    border-width: 4px;
    border-style: dashed;
    border-color: #e54cbf;
    background-color: #530d7d;
    justify-content: center;
    height: fit-content;
  }

  /* the grid area is assigning them a name for the grid template above*/

  #left{
    grid-area: left;
    text-align: center;
  }
  #middle{
    grid-area: middle;
    text-align: center;
  }
  #right{
    grid-area: right;
    text-align: center;
  }