@font-face {
    font-family: 'Mozilla';
    src: url('MozillaText-VariableFont_wght.ttf');
    font-weight: normal;
    font-style: normal;
}


:root {
  --primary-color: black;
  --primary-background: lightgrey;
  --accent-color: crimson;
  --highlight-color: lightcoral;

  --header-background-color: crimson;
  --header-text-color: white;

  --secondary-color: lightgrey;
  --secondary-background: #333;
}

body {
    font-family: 'Mozilla', Arial, Helvetica, sans-serif;
}

header {
  rotate: -1deg;
  translate: -3px 0;
}
header > #top {
    background: #eec938;
    color: black;
}
hgroup {
  rotate: 1deg;
  translate: -5px;
  width: 105%;
  padding: 0;
}

#menu {
  font-size: 18pt;
  a {
    text-underline-offset: 5px;
    text-decoration: underline 2.5px rgba(255, 255, 255, 0);
    transition: text-decoration-color 300ms;
  }
  a:hover {
    text-decoration-color: white;
  }
}