/*

font-family: 'Merriweather', serif;

Colors used: #ffff80- Background;

*/




html{
  background: #ffff80;
}


#title{
  font-family: 'Merriweather';
  display: inline-block;
  color: #ffff80;
  position: relative;
  width:1050pt;
  left: -575px;
  top: 140px;
  font-size: 200px;
  background-size: 150% 150%;
  background-color: red;
  margin-top: 300pt;
  align-items: stretch;
  transform:translateX(200px);
  transform:rotate(90deg);
}


#fonts{
  padding: 10pt;
  position:relative;
  font-family: 'Merriweather';
  color: #ffff80;
  background-color: red;
  font-size: 12pt;
  top:-730pt;
  left:885pt;
  width: 150pt;
}

#glyph{
  padding: 10pt;
  position:relative;
  font-family: 'Merriweather';
  color: #ffff80;
  background-color: red;
  font-size: 20pt;
  top:-560pt;
  left:680pt;
  width: 150pt;
}

#header{
  position:relative;
  font-family: 'Merriweather';
  color: red;
  font-size: 20pt;
  top:-400pt;
  left:200pt;
}

#paragraph{
  padding: 10pt;
  position:relative;
  font-family: 'Merriweather';
  color: red;
  font-size: 12pt;
  width: 338pt;
  top: -1250pt;
  left: 675pt;
  right: -150pt;
}

#history{
  padding: 10pt;
  position: relative;
  display: inline-block;
  top: -820pt;
  left: 200pt;
  right: 150pt;
  width: 436pt;
  font-family: 'Merriweather';
  font-size: 16pt;
  color: #ffff80;
  background-color: red;
}

#alphabet{
  padding: 10pt;
  position:relative;
  font-family: 'Merriweather';
  color: #ffff80;
  background-color: red;
  font-size: 20pt;
  top: -1225pt;
  left: 200pt;
  right: 150pt;
  width: 820pt;
}

.Light{
  font-weight: 300;
}

.LightItalic{
  font-weight: 300i;
}

.Regular{
  font-weight: 400;
}

.RegularItalic{
  font-weight: 400i;
}

.Bold{
  font-weight: 700;
}

.BoldItalic{
  font-weight: 700i;
}

.Black{
  font-weight: 900;
}

.BlackItalic{
  font-weight: 900i;
}



















#box_{
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 50%;
  background: red
}

#box_ { 
  position: fixed;
  width: 200px;
  height: 200px;
  background: #ee3e64;
}