@font-face {
  font-family: "Cooper Black";
  src: url("fonts/Cooper-Black.woff2") format("woff2"), url("fonts/Cooper-BlackItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

body, ul, li, h1, img {
  margin: 0; padding: 0;
}

body {
  background-color: white;
  color: black;
  margin: 0 auto;
  font-family: "Cooper Black";
  text-align: center;
  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:any-link {
  color: black;
  text-decoration: none;
}

:any-link:hover { border-bottom: 2px dotted black; }

s {
  text-decoration-line: line-through;
  text-decoration-style: dotted;
  text-decoration-color: black;
  text-decoration-thickness: 2px;
}

s span { color: #bbb; }

#header { align-content: center; }

h1 {
  margin-bottom: 40px;
  font-size: 48px;
  letter-spacing: 4px;
  text-shadow: 2px 1px white, 4px 3px black;
}


#hero { position: relative; }

ul {
  position: absolute;
  top: 60%;
  left: 16%;
  border-radius: 100px;
  list-style-type: none;
  padding: 10px 50px;
  border: 4px dotted black;
  text-align: center;
}

li { letter-spacing: 2px; }
li a { padding: 0 5px; }

img { width: 40%; }

#footer { margin: 10px 0; }



@media (max-width: 768px) {
  ul {
    position: relative;
    top: auto;
    left: auto;
    margin: 20px;
  }

  body {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
  }
}