<div class="heading"><h1>Hogwarts Colors</h1>
  <hr>
</div>
<section class="house-colors grif">
  <h2>Griffindor</h2>
  <div class="color-1">
  <h3>Griffindor Dark Red</h3>
  <h4>#740001</h4>
  </div>
  <div class="color-2">
  <h3>Gryffindor Red</h3>
  <h4>#ae0001</h4>
  </div>
  <div class="color-3">
  <h3>Griffindor
    Yellow</h3>
  <h4>#eeba30</h4>
  </div>
  <div class="color-4">
  <h3>Griffindor Gold</h3>
  <h4>#d3a625</h4>
  </div>
</section>

<section class="house-colors slit">
  <h2>Slytherin</h2>
  <div class="color-1">
  <h3>Slytherin Dark Green</h3>
  <h4>#1a472a</h4>
  </div>
  <div class="color-2">
  <h3>Slytherin Green</h3>
  <h4>#2a623d</h4>
  </div>
  <div class="color-3">
  <h3>Slytherin
    Dark Silver</h3>
  <h4>#5d5d5d</h4>
  </div>
  <div class="color-4">
  <h3>Slytherin Light Silver</h3>
  <h4>#aaaaaa</h4>
  </div>
</section>

<section class="house-colors rave">
  <h2>Ravenclaw</h2>
  <div class="color-1">
  <h3>Ravenclaw Dark Blue</h3>
  <h4>#0e1a40</h4>
  </div>
  <div class="color-2">
  <h3>Ravenclaw Blue</h3>
  <h4>#222f5b</h4>
  </div>
  <div class="color-3">
  <h3>The Grey Lady</h3>
  <h4>#bebebe</h4>
  </div>
  <div class="color-4">
  <h3>Ravenclaw Gold</h3>
  <h4>#946b2d</h4>
  </div>
</section>

<section class="house-colors huff">
  <h2>Hufflepuff</h2>
  <div class="color-1">
  <h3>Hufflepuff Canary</h3>
  <h4>#ecb939</h4>
  </div>
  <div class="color-2">
  <h3>Hufflepuff Light Canary</h3>
  <h4>#f0c75e</h4>
  </div>
  <div class="color-3">
  <h3>Hufflepuff
    Light Brown</h3>
  <h4>#726255</h4>
  </div>
  <div class="color-4">
  <h3>Hufflepuff Dark Brown</h3>
  <h4>#372e29</h4>
  </div>
</section>

@font-face {font-family: "Harry Potter";
    src: url("//db.onlinewebfonts.com/t/0421d4186d6efbfc5331fe180895e780.eot");
    src: url("//db.onlinewebfonts.com/t/0421d4186d6efbfc5331fe180895e780.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/0421d4186d6efbfc5331fe180895e780.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/0421d4186d6efbfc5331fe180895e780.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/0421d4186d6efbfc5331fe180895e780.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/0421d4186d6efbfc5331fe180895e780.svg#Harry Potter") format("svg");
}
h1 {
  font-family: Harry Potter, Arial;
  font-size:4em;
  transition:all 0.1s ;
  margin:0;
}

h1:focus, h1:hover {
  color: white;
  text-shadow:
   2px 3px 0 red,
   4px 4px 0 green,  
    6px 5px 0 blue,
   8px  6px 0 yellow,
    10px 7px 0 black;
}
hr {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
.house-colors {
  width:25%;
  float:left;
  color:#fff;
  padding: 0;
}
@media all and (max-width: 500px) {
  
  .house-colors {
    width:50%;
  }
}
.house-colors h2 {
  color:#000;
  font-family: Harry Potter, Arial;
  text-align:center;
}

.house-colors h3{
  padding: 1em;
  text-shadow: 2px 1px 0 black;
  margin:0;
}
.house-colors h4{
  text-align: right;
  padding:1em;
  font-size:1.5em;
  margin:0;
}



/*----- ----- ALL OF BACKGROUND COLORS ----- -----*/
.grif .color-1 {
  background-color: #740001;
}
.grif .color-2 {
  background-color: #ae0001;
}
.grif .color-3 {
  background-color: #eeba30;
}
.grif .color-4 {
  background-color: #d3a625;
}
.slit .color-1 {
  background-color: #1a472a;
}
.slit .color-2 {
  background-color: #2a623d;
}
.slit .color-3 {
  background-color: #5d5d5d;
}
.slit .color-4 {
  background-color: #aaaaaa;
}
.rave .color-1 {
  background-color: #0e1a40;
}
.rave .color-2 {
  background-color: #222f5b;
}
.rave .color-3 {
  background-color: 
#bebebe;
}
.rave .color-4 {
  background-color: #946b2d;
}
.huff .color-1 {
  background-color: #ecb939;
}
.huff .color-2 {
  background-color: #f0c75e;
}
.huff .color-3 {
  background-color: #726255;
}
.huff .color-4 {
  background-color: #372e29;
}