/* font tools */
    
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display */
        /* https://gwfh.mranftl.com/fonts/lora?subsets=latin */
        /* https://www.fontsquirrel.com/tools/webfont-generator */
    
    /* font load */
    
        @font-face {
          font-display: swap; 
          font-family: 'Lora';
          font-style: normal;
          src: url('font_lora-regular.woff2') format('woff2'); 
        }
        @font-face {
          font-display: swap; 
          font-family: 'Lora';
          font-style: italic;
          src: url('font_lora-italic.woff2') format('woff2'); 
        }
        @font-face {
          font-display: swap; 
          font-family: 'Lora';
          font-weight: bold;
          src: url('font_lora-bold.woff2') format('woff2'); 
        }
        @font-face {
          font-family: DAO;
          src: url('font_nogard.ttf'); 
        }
        @font-face {
          font-family: DAO Text;
          src: url('font_nogard_text.ttf'); 
        }
        @font-face {
          font-family: DAI;
          src: url('font_inquisition.ttf');
          font-style: regular;
        }
        @font-face {
          font-family: DAI Smallcaps;
          src: url('font_inquisition_smallcaps.ttf');
          font-variant-caps: small-caps;
        }
   
    /* body */
    
        body {
            background-color: #0C0A0A;
            color: #a79e86;
            font-family: 'Lora', 'Open Sans'; 
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        
        a {
            color: #ffffff;
        }
        
        div {
            font-family: 'Lora', 'Open Sans';
        }
        
        h1 {
            color: #ffffff;
            font-family: 'Lora', 'Open Sans'; 
        }
         
        h2 {
            color: #f8f5ed;
            font-family: 'Lora', 'Open Sans'; 
        }
    
        p {
            color: #a79e86;
        }
    
    /* elements */
    
        #all{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 33%;
            height: 80%;
        }
    
        #container{
            width: 100%;
            height: 100%;
            padding: 4px;
            outline: dotted 1px #25272b;
        }
    
        #content{
            overflow: scroll;
            overflow-x: hidden;
            height: 76%;
            padding: 4px;
            text-align: justify;
            margin-bottom: 0.93%;
            margin-top: 0.46%;
        }
         
        #content p{
            margin-top: 0px;
            font-size: 16px;
        }
    
        #header{
            margin-top: 0.93%;
            margin-bottom: 0.93%;
        }
         
        #header h1{
            font-family: 'Lora', 'Open Sans';
            font-weight: normal;
            font-size: 35px;
            letter-spacing: 3.5px;
            margin: 3px;
            position: absolute;
            bottom: 10px;
            right: 0px;
        }
    
        #nav{
            font-size: 12px;
            color: #595B42;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2%;
            margin-bottom: 2%;
        }
         
        #nav a{
            color: #595B42;
            opacity: 1;
            background: none;
            text-decoration: none;
        }
         
        #nav a:hover{
            background-color: #595B42;
            color: #ffffff;
            opacity: 1;
        }
    
    /* helper */
    
        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .gem {
            position: absolute;
            z-index: -1;
        }
        
        .preload {
            display: none;
        }
    
    /* animations */
    
        .spin,
        .spin-slow,
        .spin-rev,
        .spin-slow-rev {
            animation-name: spin;
            animation-duration: 10000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center;
        }
        .spin-slow {
            animation-duration: 100000ms;
        }
        .spin-rev {
            animation-direction: reverse;
        }
        .spin-slow-rev {
            animation-duration: 100000ms;
            animation-direction: reverse;
        }
        @keyframes spin {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }