* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: 60rem;
  width: 100%;
  margin: 0 auto;
  font-family: Nunito;
  background-color: #00001F;
  color: #E0E0E0;
  /*visibility: hidden;*/
}

site-header, site-footer, main, hr {
  max-width: 60rem;
  margin: 1rem 2rem;
}

hr {
  margin: 0; 
}

header {
  container-name: header; 
  container-type: inline-size;
  max-width: 60rem;
  margin: 1rem 2rem;
}

@container header (width < 400px) {
  h4 {
    display: none;
  }
}

nav ul {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}

nav li {
  flex: 1 0 auto;
  text-align: center;
}

main {
  flex: 1 100%;
}

a:link, a:visited {
  color: #D0D0D0;
  text-decoration: none;
}
      
a:hover, a:active {
  /*color: #F7F7F7;*/
  text-shadow: 0 0 12px #F0F0F0, 0 0 12px #C0C0C0;
}

.no-bullets {
  list-style: none;
}

site-footer hr {
  margin: 1rem 0;
}

site-footer a {
  display: block;
  text-align: center;
}

site-footer h4 {
  display: block;
  text-align: center;
  margin: 0.5rem 0;
}