@font-face {
    font-family: 'Bodoni Black';
    src: url("fonts/black.otf");
}

@font-face {
    font-family: 'Bodoni Condensed';
    src: url("fonts/condensed.ttf");
}

@font-face {
    font-family: 'Bodoni Poster';
    src: url("fonts/poster.otf");
}
.grid-container {
  display: grid;
  width: 1240px;
  grid-template-columns: 150px;
  grid-template-rows: 250px;
}


.paragraph {
  margin-top: 50px;
  margin-left: 30px;
  font-size: 16px;
  padding: 15px;
  width: 385px;
  height: 170px;
  border-left: 10px solid black;
  grid-row-start: 1;
  grid-row-end: 1;
}

.lowercase {
  width: 360px;
  font-size: 35px;
  margin-left: -350px;
  margin-top: 10px;
  font-style: italic;
  border-top: 10px solid black;
  border-width: regular 2px;
  letter-spacing: 1px;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 3;
  z-index: 1;
}

.semicolon {
  font-size: 800px;
  font-weight: bold;
  color: #f99584;
  margin-top: -350px;
  margin-left: -290px;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 3;
  grid-column-end: 4;
  z-index: -1;
}

.title {
  padding: 60px;
  margin-left: 100px;
  margin-top: -30px;
  font-size: 200px;
  grid-row-start: 3;
  grid-column-start: 2;
}

.bracket {
  text-align: right;
  margin-top: 50px;
  margin-left: 70px;
  font-size: 700px;
  line-height: 300px;
  grid-row-start: 3;
  grid-column-start: 1;
}

.info {
  margin-left: 175px;
  margin-top: -90px;
  font-size: 17px;
  width: 310px;
  border-top: 10px solid black;
  letter-spacing: 0.5px;
  z-index: -3;
  grid-row-start: 4;
  grid-column-start: 2;
}

.uppercase {
  width: 370px;
  text-align: left;
  margin-left: 50px;
  margin-top: 180px;
  letter-spacing: 2.2px;
  border-top: 10px solid black;
  font-size: 35px;
  font-style: italic;
  grid-row-start: 5;
  grid-column-start: 1;
  z-index: 1;
}

.regular {
  width: 380px;
  height: 290px;
  border-left: 10px solid black;
  padding: 15px;
  font-size: 40px;
  grid-row-start: 5;
  grid-column-start: 3;
  margin-left: -300px;
}

.bold {
  width: 380px;
  height: 30px;
  border-left: 10px solid black;
  padding: 15px;
  font-size: 40px;
  grid-row-start: 5;
  grid-column-start: 3;
  margin-top: 50px;
  font-weight: bold;
  margin-left: -300px;
}

.italic {
  width: 380px;
  height: 30px;
  border-left: 10px solid black;
  padding: 15px;
  font-size: 40px;
  grid-row-start: 5;
  grid-column-start: 3;
  margin-top: 100px;
  font-style: italic;
  margin-left: -300px;
}

.black {
  width: 380px;
  height: 30px;
  border-left: 10px solid black;
  padding: 15px;
  font-size: 40px;
  grid-row-start: 5;
  grid-column-start: 3;
  margin-top: 150px;
  font-family: 'Bodoni Black';
  margin-left: -300px;
}

.condensed {
  width: 380px;
  height: 30px;
  border-left: 10px solid black;
  padding: 15px;
  font-size: 40px;
  grid-row-start: 5;
  grid-column-start: 3;
  margin-top: 200px;
  font-family: 'Bodoni Condensed';
  margin-left: -300px;
}

.poster {
  width: 380px;
  height: 60px;
  border-left: 10px solid black;
  padding: 15px;
  font-size: 40px;
  grid-row-start: 5;
  grid-column-start: 3;
  margin-top: 250px;
  font-family: 'Bodoni Poster';
  margin-left: -300px;
}

.quote {
  font-size: 1200px;
  margin-top: -140px;
  margin-left: -45px;
  color: #f99584;
  grid-row-start: 5;
  grid-column-start: 1;
  z-index: -1;
}