html,
body {
    height: 100%;
}

body {
background-image: url(images/bg_01.gif);
font-family: Arial;
font-size:100%;
background-color: #212121;
margin:0;
}
* {

}
*:hover {

}
.main_container {width:100%; height:100%; position:relative; font-size:20rem; color:#fff; }
.main_container > div {position:absolute; top:50%; left:50%; transition:transform 0.8s ease; transform:translate(-50%, -50%);}
.main_container > div:hover {transform:translate(-50%, -50%) rotate(180deg);}

.error_container {width:100%; height:100%; position:relative; font-size:20rem; color:#fff; }
.error_container > div {position:absolute; top:50%; left:50%; transition:transform 0.8s ease; transform:translate(-50%, -50%);}
.error_container > div > span {display:block; float:left; transition:color 0.8s ease, transform 0.8s ease;}
.error_container > div > span:hover {transform:rotate(180deg);}
.error_container > div > span:nth-child(1):hover {color:#00a8ff;}
.error_container > div > span:nth-child(2):hover {color:#ff9c00;}
.error_container > div > span:nth-child(3):hover {color:#11e906;}

/* Media Queries */
@media only screen and (min-width: 0em) {
  .main_container {font-size:5rem; }
  .error_container {font-size:5rem; }
}

@media only screen and (min-width: 40em) {
  .main_container {font-size:8rem; }
  .error_container {font-size:8rem; }
}

@media only screen and (min-width: 64em) {
  .main_container {font-size:10rem;}
  .error_container {font-size:10rem;}
}

@media only screen and (min-width: 90em) {
  .main_container {font-size:20rem;}
  .error_container {font-size:20rem;}
}

@media only screen and (min-width: 120em) {
  .main_container {font-size:20rem;}
  .error_container {font-size:20rem;}
}