body {
    background-color: rgb(239, 239, 239);
    padding: 0;
    margin: 0;
    width: 100%;
}

title {
    text-transform: capitalize; 
}

/* FONTS */
nav,
ul li,
p,
a {
    font-family: var(--sans-serif), sans-serif;
}
p,h1,h2,h3,h4,h5,h6,div,ul,li {
    padding:0;
    margin:0;
}

.amplifire {
    font-family: 'Audiowide', sans-serif;
    font-style:italic;
}

.dots {
    transform: rotate(0deg);
    background-image: linear-gradient(to right, rgb(0 0 0 / 85%), rgb(0 22 39), rgb(0 0 0 / 85%)), radial-gradient(white, rgb(255, 255, 255, 7%) 0.35rem, transparent .25rem);
    background-size: 100%, 2rem 2rem;
    padding: 4rem 50%;
}

/*.dots:before {
    display: block;
    content: "";
    position: absolute;
    left: 0rem;
    top: 0rem;
    transform: rotate(0deg);
    background-image: linear-gradient(to right, rgb(0 0 0 / 85%), rgb(0 22 39), rgb(0 0 0 / 85%)), radial-gradient(white, rgb(255, 255, 255, 7%) 0.35rem, transparent .25rem);
    background-size: 100%, 2rem 2rem;
    overflow: hidden;
    padding: 4rem 50%;
}
*/
.loader {
    display:block;
    width:100vw;
    height:100vh;
    background:linear-gradient(rgba(0, 100, 200, 0.8),rgb(38, 31, 26));
    z-index:1000;
  }
  .loader-logo {
    display:flex;
    flex-wrap:wrap;
    height:100vh;
    align-content:center;
    justify-content:center;
    
  }
  .loader-logo img {
    height:50vh;
    width:auto;
  }
  .animated {
    -webkit-animation: 5s infinite;
    animation: 5s infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  /* Safari */
  @-webkit-keyframes fade {
    0%,100% { -webkit-opacity: 0; }
    50% {
      -webkit-opacity: 1;
    }
  }
  @-webkit-keyframes flip {
     0%,100% {
       -webkit-transform: rotateY(0deg);
       -webkit-animation-timing-function: ease-out;
     }
     50% {
       -webkit-transform: rotateY(180deg);
       -webkit-animation-timing-function: ease-in;
     }
  }
  
  keyframes flip {
     0%,100% {
       transform: rotateY(0deg);
       animation-timing-function: ease-out;
     }
     50% {
       transform: rotateY(180deg);
       animation-timing-function: ease-in;
     }
  }
  
  @keyframes fade {
    0%,100% { opacity: 0 }
    50% { opacity: 1 }
  }
  
  @-webkit-keyframes expand{
      0%{height:0px}
      100%{height:100px}
  }
  
  /* Add animation to "page content" */
  .flip {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flip;
    backface-visibility: visible !important;
    animation-name: flip;
  }
  .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 2s;
    animation-name: animatebottom;
    animation-duration: 1s
  }
  
  @-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 }
  }
  
  @keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
  }
  
  #wrap {
    display:none;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    margin:0;
    padding:0
  }
  .content {
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
    padding:2.5rem;
    margin:0;
    background:rgba(54, 45, 38, 0.8);
  }