@import url("https://use.typekit.net/cig7tav.css");

.grid-container{
  display: grid;
  grid-gap: 15px;
  grid-template: 1fr 27% 1fr / 1fr 500px minmax(300px, 1fr);
  font-family: futura-pt, sans-serif;
}

.one{
  grid-area: 1 / 1 / span 3 / span 1;
  padding: 110px 0px;
  width:100%;
  writing-mode: vertical-rl;
  font-size: 250px;
  font-weight: 400;
}

.two{
  grid-area: 1 / 2 / span 1 / span 1;
  padding: 60px 0px 50px;
  font-size: 24px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 4px;
  color: #666666;
  background-image: url(https://i.ibb.co/YfHDsTn/corner-top-left.png);
  background-size: 40px 30px;
  background-repeat: no-repeat;
  background-position: bottom left; 
}

.three{
  grid-area: 2 / 2 / span 1 / span 1;
  padding: 0px 25px;
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 23px;
  text-transform: uppercase;
  background-image: url(https://i.ibb.co/DkvZRb5/corner-bottom-right.png);
  background-size: 40px 30px;
  background-repeat: no-repeat;
  background-position: 430px 225px; 
}

.four{
  grid-area: 3 / 2 / span 1 / span 1;
  width: 430px;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
}

.five{
  grid-area: 1 / 3 / span 3 / span 1;
  padding: 20px;
  font-size: 20px;
  background: black;
  color:white;
  text-align:right;
}

.author{
  font-size:100px;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: 10px;
  color: #bb0000;
}

.history{
  font-size: 75px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 10px;
  color: #bb0000;
}

.date{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size: 120px;
  font-weight: 500;
  font-style: italic;
  color: #666666;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 0px 80px;
  
}

.light{
  font-weight: 300;
}

.redmedium{
  font-weight; 500;
  color: #bb0000;
}

.heavy{
  font-weight: 700;
}

.graybook{
  font-weight: 400;
  color: #666666;
}

.redextrabold{
  font-weight: 800;
  color: #bb0000;
}

.graybold{
  font-weight: 700;
  color: #666666;
}

.redmedium{
  font-weight: 500;
  color: #bb0000;
}

.book{
  font-weight: 400;
}

.lightoblique{
  font-weight: 300;
  font-style: italic;
}

.bookoblique{
    font-weight: 400;
  font-style: italic;
}

.medium{
    font-weight: 500;
}

.mediumoblique{
    font-weight: 500;
  font-style: italic;
}

.demi{
    font-weight: 600;
}

.demioblique{
    font-weight: 600;
  font-style: italic;
}

.heavyoblique{
    font-weight: 700;
  font-style: italic;
}

.bold{
    font-weight: 700;
}

.boldoblique{
    font-weight: 700;
  font-style: italic;
}

.extrabold{
    font-weight: 800;
}

.extraboldoblique{
    font-weight: 800;
  font-style: italic;
}

img{
  width:30px;
  height: 30px;
}