@font-face {
      font-family: 'timesnewroman';
      src: url('/fonts/times.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'couriernew';
      src: url('/fonts/courier.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    
     @font-face {
      font-family: 'ocra';
      src: url('/fonts/ocra.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    
    
    .small-margin {
      margin-top: -10px
    }
    
    .link-margin {
      display:inline-block;
      margin-top: 6px;
    }
    
    .no-select {
      
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    
    }
    
    .spin {
      animation-name: spin;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear; 
    }
    
    .wooz {
      animation-name: wooz;
      animation-duration: 5000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear; 
    }
    
    body {
      font-family: 'ocra', sans-serif;
      margin-left:30px;
      transition: opacity 0.5s ease;
      /*text-align: center;*/
    }
    
    body.fade-out {
      opacity:0
    }
    
    p {
      color:white
    }
    
    a {
      text-decoration:none;
      color:white;
      display:inline-block;
      transition: color 0.3s ease;
      cursor:pointer
    }
    
    a:hover {
      color:rgb(161, 181, 196)
    }
    
    @keyframes spin {
      from {
        transform:rotate(0deg);
      }
      to {
        transform:rotate(360deg);
      }
    }
    
    @keyframes wooz {
     0% {background-color:rgb(0,0,0)}
     50% {background-color:rgb(11, 9, 15)}
     100% {background-color:rgb(0,0,0)}
    }