/* Turn the grid container into a grid with three flexible columns.
Style the individual items to recreate the screenshots on class website.*/
/* *{ border:5px;
  border-color:black;
  border-style: solid;
} */
body {
  background-repeat: no-repeat;
  background-color: #FCCE65;
}

.grid-container {
  display: grid;
  grid-template-columns: 8fr 1fr 5fr;
  font-family: copperplate,san-serif;
}

.Nameoftypeface {
  font-size: 100px;
  color:red ;
  text-align:center;
  word-spacing: -30px;
  margin:10px:
}

h2{
  color:black;
  margin:10px;
}

.copperplateLight { 
  grid-row: 2;
  font-size:90px;
  font-color: red;
  font-style:light;
  color:white;
  text-align:right;
}
.copperplateRegular { 
  grid-row: 2;
  font-size:80px;
  font-color: red;
  color:Violet;
  font-style:regular;
  text-align:left;
}
.copperplateMeduim { 
  grid-row: 2;
  font-size:70px;
  font-color: red;
  font-style:regular;
  color:MediumSeaGreen;
  text-align:center;
}
.copperplateBold { 
  grid-row: 2;
  font-size:90px;
  font-style: bold;
}

.ABC {
  grid-column: 2 / 4;
  grid-row: 1 / span 2;
  font-size:100px;
  color:#983060;
  font-weight: bold;
  text-align:center;
  margin-top:10px;
}
.Numbers{
  grid-column: 2 / 4;
  grid-row: 1 / span 2;
  font-size:100px;
  color:SlateBlue;
  font-weight: bold;
}

.PARAGRAPH { 
  grid-column: 1 / span 2;
  font-size: 50px;
  text-align: left;
  color:white;
  font-weight: bold;
  margin-top:90px;
  
}

.sample { 
  grid-column: 3;
  grid-row: 3;
  font-size:25px;
  margin-right: 1in;
  font-style: oblique;
 
}