* {
  box-sizing: border-box;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue",  Arial, sans-serif;
  margin: auto;
}

/* reset some styles */
ul { padding-left: 0; }
ul ul { padding-left: 1vw; }
li { list-style: inside; padding: 0.2rem 0 }

html {
  font-size: 16px; /* For responsive fonts */
}

body, html {
  height: 100%;
}

body {
  color: #0E0051;
  background-color: #111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='600' y1='25' x2='600' y2='777'%3E%3Cstop offset='0' stop-color='%2339FF18'/%3E%3Cstop offset='1' stop-color='%2338FFDD'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='650' y1='25' x2='650' y2='777'%3E%3Cstop offset='0' stop-color='%2327ff1b'/%3E%3Cstop offset='1' stop-color='%2327fff1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='700' y1='25' x2='700' y2='777'%3E%3Cstop offset='0' stop-color='%231eff25'/%3E%3Cstop offset='1' stop-color='%2315f5ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' gradientUnits='userSpaceOnUse' x1='750' y1='25' x2='750' y2='777'%3E%3Cstop offset='0' stop-color='%2321ff3c'/%3E%3Cstop offset='1' stop-color='%2304daff'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' gradientUnits='userSpaceOnUse' x1='800' y1='25' x2='800' y2='777'%3E%3Cstop offset='0' stop-color='%2324ff52'/%3E%3Cstop offset='1' stop-color='%2300b4f1'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='850' y1='25' x2='850' y2='777'%3E%3Cstop offset='0' stop-color='%2327ff67'/%3E%3Cstop offset='1' stop-color='%23008fe0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='900' y1='25' x2='900' y2='777'%3E%3Cstop offset='0' stop-color='%2329ff7c'/%3E%3Cstop offset='1' stop-color='%23006ece'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='950' y1='25' x2='950' y2='777'%3E%3Cstop offset='0' stop-color='%232cff91'/%3E%3Cstop offset='1' stop-color='%230050bd'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' gradientUnits='userSpaceOnUse' x1='1000' y1='25' x2='1000' y2='777'%3E%3Cstop offset='0' stop-color='%232fffa4'/%3E%3Cstop offset='1' stop-color='%230037ab'/%3E%3C/linearGradient%3E%3ClinearGradient id='j' gradientUnits='userSpaceOnUse' x1='1050' y1='25' x2='1050' y2='777'%3E%3Cstop offset='0' stop-color='%2332ffb8'/%3E%3Cstop offset='1' stop-color='%2300219a'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' gradientUnits='userSpaceOnUse' x1='1100' y1='25' x2='1100' y2='777'%3E%3Cstop offset='0' stop-color='%2335ffcb'/%3E%3Cstop offset='1' stop-color='%23000f88'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' gradientUnits='userSpaceOnUse' x1='1150' y1='25' x2='1150' y2='777'%3E%3Cstop offset='0' stop-color='%2338FFDD'/%3E%3Cstop offset='1' stop-color='%23007'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg %3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' x='100' width='1100' height='800'/%3E%3Crect fill='url(%23c)' x='200' width='1000' height='800'/%3E%3Crect fill='url(%23d)' x='300' width='900' height='800'/%3E%3Crect fill='url(%23e)' x='400' width='800' height='800'/%3E%3Crect fill='url(%23f)' x='500' width='700' height='800'/%3E%3Crect fill='url(%23g)' x='600' width='600' height='800'/%3E%3Crect fill='url(%23h)' x='700' width='500' height='800'/%3E%3Crect fill='url(%23i)' x='800' width='400' height='800'/%3E%3Crect fill='url(%23j)' x='900' width='300' height='800'/%3E%3Crect fill='url(%23k)' x='1000' width='200' height='800'/%3E%3Crect fill='url(%23l)' x='1100' width='100' height='800'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

/* Header */
header {
  padding: 5vh 5vw;
  height: 100vh;
  text-align: center;
  display: grid;
}

header a { color: #0E0051; }
header a:visited { color: #0E0051; }

header h1, h2, h3, h4 {
  margin: 2rem 0;
}

/* Main */
main {
  padding-bottom: 5vh; /* The same as the footer height */
}
main section { margin: 5vh 5vw; }
main section article,
main section nav {
  color: #ddd;
  padding: 5vh 5vw;
  background: rgba(2, 0, 36, .6);
  background: radial-gradient(circle, rgba(2, 0, 36, .6) 0%, rgba(14, 0, 81, .6) 75%, rgba(19, 0, 112, .6) 100%);
}

main section article figure { text-align: center; margin: 4em 0}
main section article figure img { max-width: 75%; }
main section article figure figcaption { margin: 1em 0; }
main section article figure time { display:block; text-align: right; font-size: small; }
main section a { color: #ddd; text-decoration: none; font-weight: bold; }
main section a:hover { text-decoration: underline; }
main section li { list-style: none; }

/* Footer */
footer {
  background: rgb(2,0,36);
  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(14,0,81,1) 78%, rgba(19,0,112,1) 100%);
  width: 100vw;
  position: fixed;
  bottom: 0;
}

menu {
  padding: 0;
}

menu ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

menu ul li {
  list-style-position: inside;
  list-style-type: none;
}

menu ul li a {
  color: #ddd;
}

/* Responsive */
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));  /* For responsive fonts */
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}