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

.grid-container {
  background-image: url(http://robison.fsartanddesign.org/fall2019/GD50/imgs/genesis-typespec.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: 1fr 9fr 4fr;
  width: 1000px;
  height: 1296px; 
  font-family: "Gill Sans"
}
.top{
  grid-column-start: 2;
  line-height: 0.53em;
}
.font-family {
  color: #514545;
  display: inline-block;
  font-size: 0.60em;
  transform: rotate(-1deg);
  display: inline-block;
  padding: 68px 0px 0px 30px;
  margin-bottom: 0;
  margin-top: 7px
}
.style-fonts {
  display: inline-block;
  padding: 0px 0px 0px 29px;
  margin-top: 5px;
  color: #504646;
}
.light {
 font-family: gill-sans-nova, sans-serif;
 font-weight: 300;
 font-style: normal;
 font-size: 1em;
/*   margin-top: -10px; */
}
.light-italic{
  font-family: gill-sans-nova, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1em;
}
.regular {
  font-style: normal;
  font-size: 0.98em;
}
.italic {
  font-style: italic;
  font-size: 0.98em;
}
.semibold {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 0.95em;
}
.semibold-italic{
  font-family: gill-sans-nova, sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 0.95em;
}
.bold{
  font-family: gill-sans-nova, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.90em;
}
.bold-italic {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 0.95em;
  }
.ultrabold {
  font-family: gill-sans-nova, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 0.73em;
  }
.small-caps{
  color: #504935;
  display: inline-block;
  font-size: 0.90em;
  font-variant: small-caps;
  line-height: 0.69em; 
  padding: 0px 0px 0px 40px; 
}
.middle {
  grid-column-start: span 3;
}
.title{
  color: #514545;
  font-size: 1.8em;
  line-height: 0.1em;
  text-align: left;
  padding: 0px 0px 0px 400px;
}
.history {
  grid-row-start: span 2;
  grid-column-start: span 2;
  padding: 0px 25px 0px 200px;
  color: #706565;
  text-align: right;
}
.illsans {
  font-size: 8em;
  text-shadow: -5px -1px #262525 ,  4px 4px 4px #FFFAFA;
  color: #706965;
 
}
.G {
  color: white;
  opacity: 0.8;
  font-size: 14em;
  vertical-align: -11px;
}
.gills {
  display: inline-block;
  text-align: right;
  letter-spacing: -2px;
  padding-left: 420px;
  padding-top: 0px;
  line-height: 5em;
}
.bottom {
  grid-column-start: span 3;
  
}
.alphabet{
}

.capitals{
  font-size: 3.9em;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin: 15px 35px 0px 35px;
  color: #706965;
  text-shadow: -3px 2px 1px #262525 , 3px 3px 2px #FFFAFA;
  
}
.capitals2{
  color: #706965;
  font-size: 3.9em;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  margin: 5px 35px 0px 35px;  
  text-shadow: -3px 2px 1px #262525 , 3px 3px 2px #FFFAFA;
}
.minusculas{
  font-size: 2em;
  color: #5B5757;
  letter-spacing: 0.69em;
  text-align: center;
  margin: -10px 35px 0px 35px;
}
.numbers {
  font-size: 1.5em;
  letter-spacing: 0.69em;
  text-align: center;
  margin: 15px 35px 0px 35px;
  color: #5B5757;
}

h1 {
  margin-bottom: 0px;
  margin-top: 11px;
}

.empty-box {
  width: 450px;
  height: 450px;
  float: left;
  shape-outside: polygon(59% 40%, 29% 48%, 29% 61%, 59% 65%, 71% 72%, 86% 82%,  100% 100%, 0 89%, 80% 0%, 78% 19%);
}