@keyframes spin {
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}

@keyframes wobble {
  0%{transform: rotate(2deg);}
  50%{transform: rotate(-2deg);}
  100%{transform: rotate(2deg);}
}

@keyframes marquee {
  from{transform: translateX(100%)}
  to{transform: translateX(-100%)}
}

html {
  display: block;
  image-rendering: pixelated;
  font-family: "Comic Sans MS";
  border-width: .75vw;
  border-style: groove;
  border-color: whitesmoke;
  color: whitesmoke;
  background-color: #0a1322;
  margin-top: 2vw;
  margin-bottom: 2vw;
  margin-right: 2vh;
  margin-left: 2vh;
  font-size: larger;
}

body {
  background-color: #0b2347;
  text-align: center;
}

.container {
  background-color: #25477e;
  border-width: .5vw;
  border-style: groove;
  border-color: whitesmoke;
  margin: auto;
  width: 80vw;
  color: black;
}

nav {
  display: grid;
  background-color: #9eb1ce;
  border-bottom-width: .5vw;
  border-bottom-style: groove;
  border-bottom-color: whitesmoke;
  padding: 10px;
  align-items: center;
}

.navcontents {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
}

.navimg {
  width: clamp(10vh, 10vw, 10vw);
  margin: 1%;
  margin-left: 1%;
  margin-right: 1%;
}

h1, p, ul, li {
  padding-left: 8px;
  padding-right: 8px;
  color: whitesmoke;
}

a:link {
  color:cornflowerblue;
}

a:visited {
  color:yellow;
}

footer {
  position: relative;
  bottom: 0px;
  padding-bottom: 10px;
}

.logo {
  width: clamp(25vw, 30vh, 30vh);
  margin: 8px;
  animation: wobble 5s infinite ease-in-out;
}