@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');

* {

    font-size:1em;
    font-family: 'Oswald', sans-serif;
    margin: 0;
    padding: 0;
}
body {
  --s: 25vmin;
  --p: calc(var(--s) / 2);
  --c1: #000000;
  --c2: #001e57;
  --c3: #831100;
  --bg: var(--c3);
  --d: 4000ms;
  --e: cubic-bezier(0.76, 0, 0.24, 1);
  
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c2) 75%);
  background-size: var(--s) var(--s);
  background-position: 
    calc(var(--p) *  1) calc(var(--p) *  0), 
    calc(var(--p) * -1) calc(var(--p) *  1), 
    calc(var(--p) *  1) calc(var(--p) * -1), 
    calc(var(--p) * -1) calc(var(--p) *  0);
  animation: 
    color var(--d) var(--e) infinite,
    position var(--d) var(--e) infinite;
}

@keyframes color {
  0%, 25% {
    --bg: var(--c3);
  }
  26%, 50% {
    --bg: var(--c1);
  }
  51%, 75% {
    --bg: var(--c3);
  }
  76%, 100% {
    --bg: var(--c2);
  }
}

@keyframes position {
  0% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  0), 
      calc(var(--p) * -1) calc(var(--p) *  1), 
      calc(var(--p) *  1) calc(var(--p) * -1), 
      calc(var(--p) * -1) calc(var(--p) *  0);
  }
  25% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  4), 
      calc(var(--p) * -1) calc(var(--p) *  5), 
      calc(var(--p) *  1) calc(var(--p) *  3), 
      calc(var(--p) * -1) calc(var(--p) *  4);
  }
  50% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 8), 
      calc(var(--p) * -3) calc(var(--p) * 9), 
      calc(var(--p) *  2) calc(var(--p) * 7), 
      calc(var(--p) * -2) calc(var(--p) * 8);
  }
  75% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 12), 
      calc(var(--p) * -3) calc(var(--p) * 13), 
      calc(var(--p) *  2) calc(var(--p) * 11), 
      calc(var(--p) * -2) calc(var(--p) * 12);
  }
  100% {    
    background-position: 
      calc(var(--p) *  5) calc(var(--p) * 16), 
      calc(var(--p) * -5) calc(var(--p) * 17), 
      calc(var(--p) *  5) calc(var(--p) * 15), 
      calc(var(--p) * -5) calc(var(--p) * 16);
  }
}

@media (prefers-reduced-motion) {
  body {
    animation: none;
  }
}

#myData {
    position: absolute;
    height: fit-content;
    margin: auto;
    max-width: 1000px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    margin: 10px 25px  10px 25px;
    height: auto;
    align: center;
    text-align: center;
    border: 3px solid blue;
    border-radius: 10px;
    color: white;
    background-color: black;
}
h4 {
margin: 3rem;
    color: #006d8f;
    animation: slide-in-anim 7s ease-out forwards;
    font-size: 1.5rem;
    transition: 300ms;
}
h4:hover {
    color: white;
}
@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	25% {
		transform: translateX(-50%);
	}
    75% {
		transform: translateX(90%);
	}
	100% {
		opacity: 1;
		transform: translateX(0%);
	}
    150% {
		opacity: 1;
		transform: translateX(100%);
	}

}
div h1 {
    padding: 0px 30px 0px 30px;
}
a {
    transition: 500ms;
    color: #003cb0;

}
h1 {
    margin: 0.4rem;

}
a:link {

      text-decoration: none;
}
a:hover {
    color:white;
}
.aaslkdmckls {
    padding: .4rem;
    font-size:1rem; 
}
.footer {
    color: white;
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    text-align: center;
}