@import "http://students.fsartanddesign.org/emma/GD50/butler/Butler_Webfont/stylesheet.css";
@import "http://students.fsartanddesign.org/emma/GD50/butler/Butler_Stencil_Webfont/stylesheet.css";

body{
  background-color: #fbdfc5;
}

h1{
  color: #d32027;
  margin: 0px 460px -100px;
  font-size: 380px;
  font-family: "Butler";
}

.grid-container{
  display:grid;
  grid-template-columns: 570px 600px 590px ; 
  grid-template-rows: 200px 600px 600px 430px 1fr;
  grid-gap: 20px;
margin: 0px 350px; 
  
}

.a{
    grid-column: 1/ span 2; 
/*     width: 70%; */
/*   height: 40%; */
/*      margin: 10px 0px 0px 0px; */
    font-size: 30px;
    font-family: "Butler";
    padding: 15px;
    color:#fbdfc5;
    background-color: #d32027; 
    text-align: center; 
    line-height: 42px;
}

.b{

    font-family: 'Butler Stencil';
    font-weight: normal;
    font-style: normal;
/*   width: 100%; */
/*     height: 40%; */
/*   margin: 0px ; */
    font-size:180px;
    padding: 45px;
    color:#d32027;
    background-color: #fbdfc5;
    line-height: 160px;
}



.c{
  grid-column: 1/2; 
/*   width: 70%; */
/*   height: 86%; */
/*   margin: -240px 220px; */
  font-size: 24px;
  font-family: "Butler";
  padding: 20px;
  color:#d32027; 

}

p.black{
  font-size:30px;
    font-family: 'Butler'; 
    font-weight: 900;
    font-style: normal;
}

p.extrabold{
    font-size:30px;
   font-family: 'Butler';
    font-weight: 800;
    font-style: normal;
}

p.bold{
    font-size:30px;
  font-family: 'Butler';
    font-weight: bold;
    font-style: normal;
}

p.medium{
    font-size:30px;
  font-family: 'Butler';
    font-weight: 500;
    font-style: normal;
}
p.regular{
    font-size:30px;
  font-family: 'Butler';
    font-weight: normal;
    font-style: normal;
}

p.light{
    font-size:30px;
  font-family: 'Butler';
    font-weight: 300;
    font-style: normal;
  
}
p.ultralight{
    font-size:30px;
  font-family: 'Butler';
    font-weight: 200;
    font-style: normal;
  
}

span.family{
  display: inline-block;
  width: 440px;
  height: 30px;
  font-size: 28px;
  padding: 10px;
 border: 1px solid #d32027;
  color: #fbdfc5;
  background-color: #d32027; 
  
}

.d{
    grid-column: 2/span 2;
/*   width: 86%; */
/*   height: 90%; */
/*   margin: -240px 25px; */
    font-size: 28px;
    padding: 10px;
    color:  #d32027;

}

span.font {
  display: inline-block;
  width: 280px;
  height: 30px;
  margin: 10px 0px 0px 0px;
  font-size: 28px;
  padding: 10px;
 border: 1px solid #d32027;
  color: #fbdfc5;
  background-color: #d32027; 
}

span.looks {
  display: inline-block;
  width: 700px;
  height: 30px;
  font-size: 28px;
  padding: 10px;
 border: 1px solid black;
  color: #d32027;
  background-color:  #fbdfc5;
}

.e{
  grid-row: 3/4;
/*    width: 70%; */
/*   height: 120%; */
/*   margin: -260px 220px; */
  font-size: 24px;
  font-family: "Butler";
  padding: 20px;
  color:#d32027;  
}

p.stencil-black{
  font-size:30px;
    font-family: 'Butler Stencil'; 
    font-weight: 900;
    font-style: normal;
}

p.stencil-extrabold{
  font-size:30px;
    font-family: 'Butler Stencil'; 
    font-weight: 900;
    font-style: normal;
}
p.stencil-bold{
  font-size:30px;
    font-family: 'Butler Stencil';
    font-weight: bold;
    font-style: normal;
}

p.stencil-medium{
  font-size:30px;
    font-family: 'Butler Stencil';
    font-weight: 500;
    font-style: normal;
}

p.stencil-regular{
  font-size:30px;
   font-family: 'Butler Stencil';
    font-weight: normal;
    font-style: normal;
}

p.stencil-light{
  font-size:30px;
   font-family: 'Butler Stencil';
    font-weight: 300;
    font-style: normal;
}

p.stencil-ultralight{
  font-size:30px;
   font-family: 'Butler Stencil';
    font-weight: 200;
    font-style: normal;
}

span.stencil {
 display: inline-block;
  width: 440px;
  height: 30px;
  font-size: 28px;
  padding: 10px;
 border: 1px solid #d32027;
  color: #fbdfc5;
  background-color: #d32027; 
}

.f{
    grid-row: 3/4;
/*    width: 70%; */
/*   margin: 0px 25px; */
  font-size: 29px;
  font-family: "Butler";
  padding: 20px;
  color:#d32027; 
}


p.fontcharacters{
   font-size:40px;
  font-family: 'Butler';
    font-weight: normal;
    font-style: normal;
}

span.characters{
  display: inline-block;
  width: 480px;
  height: 30px;
  font-size: 28px;
  padding: 10px;
 border: 1px solid #d32027;
  color: #fbdfc5;
  background-color: #d32027; 
  
}

.g{
  grid-row: 3/4;
/*    width: 99%; */
/*   height: 160%; */
/*   margin: -260px -170px; */
}

.h{
    grid-column: 1/span 3;
/*      width: 83%; */
/*   margin: -120px 220px; */
    color: #d32027;
    font-size: 25px;
    font-family: "Butler";
    padding: 10px;
  height: 60%;
}


span.history {
  display: inline-block;
  width: 300px;
  height: 30px;
    margin: 10px 0px 0px 0px;
  padding: 10px;
  border: 1px solid #d32027;  
      font-size: 28px;
  color: #fbdfc5;
  background-color: #d32027; 
}

span.origin {
  display: inline-block;
  width: 1300px;
  height: 30px;
  padding: 10px;
  border: 1px solid black; 
  font-size: 28px;
  background-color: #fbdfc5; 
}




.grid-container div {
    border: 1px solid black;
}