.header {
  font-family: 'Times New Roman', Times, serif;
}

  body {

  background-color: rgb(64, 64, 64);
  color: rgb(215, 215, 215); 
  text-align: center; 
  font-family: monospace;
  margin: 0 auto;
  
}
  
  @keyframes fade-in {
    0% {
      filter: invert(0%);
    }
    50% {
      filter: invert(50%);
    }
    100% {
      filter: invert(0%);
  }  }

.nav-container {
  position: sticky;
  text-align: center;
  top: 0;
  background-color: rgb(64, 64, 64);
  padding-bottom: 10px;
  z-index: 999;
    
}

.nav-logo {

    max-width: 5em;
    height: auto;
    margin-top: 10px;
    animation: fade-in 10s ease-in-out forwards infinite;
}

.menu-items {

    font-family: monospace;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.heading {

  border-bottom-style: solid;
  border-bottom-width: .5px;
  margin-bottom: -4px;
  margin-left: 20px;
  margin-right: 20px;

}

  h1  {
    font-size: 34px;
    text-transform: uppercase;
    letter-spacing: 8px;
   }
   



  .logo {
 z-index: 999;
    max-width: 50%;
    height: auto;
    animation: fade-in 10s ease-in-out forwards infinite;
  }
  

  

a  {
    color: rgb(204, 204, 204);
    transition: color 0.5s linear;
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
  }

  a:hover {
    color: rgb(255, 54, 54);
    transition: color 0.5s linear;
    transform: scale(1.1);
    
  }


  ul.nav {
    padding-left: 0px;
    background-color: #4d4d4d;
    text-align: center;
  }
  ul.nav > li {
    display: inline;
    padding: 10px 20px;
  }
  ul.nav > li:hover {
    background-color: #111111;
  }
  ul.nav > li > a {
    color: white;
    text-decoration: none;
  }
  


  
.uxmat {
    color: rgb(255, 255, 255);
    transition: color 0.5s linear;
    transition: transform 0.3s ease-in-out;
   
  }
  
  .uxmat:hover {
    color: rgb(255, 0, 0);
    
  }


  
  /* Apply random animation to each letter */
  .konsole li a p {
    font-size: 19px;
    display: inline-block;
    list-style-type: none;
    
    
  }
  
  .konsole li a p span {
    animation: konsole-random calc(5s * var(--duration-offset)) ease-in-out infinite alternate;
  }
  
  /* Set a random duration offset for each letter */
  .konsole li a p span {
    --duration-offset: calc(var(--rand) * 5);
    --rand: calc(var(--i) * var(--j));
    --i: calc(1 + mod(floor(random()), 100));
    --j: calc(1 + mod(floor(random()), 100));
    
  }


  
  .sld {
    display: inline-block;
    animation: sld-anim 2s infinite linear;
  }
  
  @keyframes sld-anim {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    25% {
      transform: scale(1.3);
      opacity: 0.8;
    }
    50% {
      transform: scale(0.8);
      opacity: 0.6;
    }
    75% {
      transform: scale(1.2);
      opacity: 0.4;
    }
    100% {
      transform: scale(0.9);
      opacity: 0.2;
    }
  }



footer
{
    position: relative;
  width: 100%;
  margin: auto;
  max-height: 100%;
  

}


  
.uxfooter {
height: 50px;
background-color: #000000;
color: white; 
margin: 0 auto;
padding-top: 25px;


}

ul, li {
  display:inline;
}

.ft_ul {
  display: grid;
padding-left: 3px;
  
}

.footerlogo {

  max-width: 1px;
  font-size: 23px;
}
.column {
  float: left;
  width: 33%;
  display: inline-block;
  -webkit-align-items: center;
  align-items: center;
  
}

/* Clear floats after the columns */

.row {
  margin: 0 auto;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

.qepri {
  font-family: 'Times New Roman', Times, serif;
  padding-bottom: 10px;
}