*{
  box-sizing: border-box;
}

body{
  background-color: #000000;
}

@font-face {
  font-family: "Ithaca";
  src: url(/font/Ithaca.ttf);
}

@font-face {
  font-family: "Bogle";
  src: url(/font/BBHSansBogle.ttf);
}

@font-face {
  font-family: "Simplex";
  src: url(/font/SimplexSans.ttf);
}

h1{
  font-family: "Bogle";
  font-size: 64px;
  color: #ffffff;
  font-weight: normal;
}

h2{
  font-family: "Simplex";
  font-size: 37px;
  color: #ffffff;
  font-weight: bold;
}

p{
  font-family: "Simplex";
  font-size: 32px;
  color: #ffffff;
  font-weight: normal;
}

span{
  font-family: "Simplex";
  font-size: inherit;
}

iframe{
  width: 100%;
  height: 54.25%;
}

.header{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1em;
}

.main{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 2.5em;
  margin-left: 1em;
  margin-right: 1em;
}

.footer{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1em;
}

.box1{
  margin-left: 1em;
  padding: 2em;
  background: #ffea00;
  outline: 5px outset #ffea00;
  outline-offset: 0px;
}

.box2{
  margin-left: 1em;
  padding: 2em;
  background: #1b1b1b;
  outline: 5px outset rgba(60,60,60,0.36);
  outline-offset: 0px;
}

.box3{
  margin-left: 1em;
  padding: 2em;
  background: #8a3bbd;
  outline: 5px outset #8037AF;
  outline-offset: 0px;
}

#yellow{
  color: #ffff00; 
}

#black{
  color: #000000; 
}