canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body{
  overflow:hidden;
}
@font-face {
    font-family: urfont;
    src: url(assets/Mesopotamia.ttf);
}

.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
}
.fade-out {
  animation: fadeOut ease 1s;
  -webkit-animation: fadeOut ease 1s;
}

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

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

.title-screen{
  z-index:10;
  position:absolute;
  height:100%;
  width:100%;
  text-align:center;
  font-family: urfont;
  font-size:80pt;
  color:#6e83fc;
  text-shadow:0px 5px 10px #000000;
  user-select:none;
  pointer-events:none;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #d21f1f;
}