html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

body {  
  font-family: Consolas, mono-space;
  font-size: 86pt;
  
  color: white;
  background-color: #251b2b;
  
  word-break: break-all;
  overflow-wrap: break-word;
  
  text-align: center;
}

body.fadein {
  animation: fadeIn 2s ease-in-out;
  -webkit-animation: fadeIn 2s ease-in-out;
  -moz-animation: fadeIn 1s ease-in-out;
  -o-animation: fadeIn 2s ease-in-out;
  -ms-animation: fadeIn 2s ease-in-out;
}

@media (max-width: 1500px) {
	body { font-size: 78pt; }
}
@media (max-width: 1200px) {
	body { font-size: 64pt; }
}
@media (max-width: 900px) {
	body { font-size: 48pt; }
}
@media (max-width: 600px) {
	body { font-size: 32pt; }
}

#uni {
  max-width: 7em;
  margin: auto;
  padding: 0.7em;
}

#uni .char {
  display: inline-block;
  
  margin: 0.2em;
  
  width: 1em;
  height: 1em;
}

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

a {
  color: #37273e;
  text-decoration: none;
  
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
a:hover,
a:focus {
  color: #824877;
}

::-moz-selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
::selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
img::selection {
  background: transparent;
}
img::-moz-selection {
  background: transparent;
}