:root {
  --highlight: #9dccee;
  --visited: orchid;
  --active: pink;
  --background: #0d59ac;
  --color: white;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  background-color: var(--background);
  background-image: url(../img/blue-green.png);
  background-repeat: repeat-y;
  box-sizing: border-box;
  font-size: 62%;
  height:100%;
  margin:0;
  padding:0;
  width:100%;
}

body {
  background-color: var(--background);
  color: var(--color);
  font-size: 1.6rem;
  font-family: Arial, sans-serif;
  height:100%;
  line-height:1.5;
  margin:0;
  margin-left: 275px;
}

main {
  width:100%;
  margin:0;
}

h1, h2 {
  color:var(--highlight);;
  font-family: 'Anton', sans-serif;
}

h1 {
  font-size: 75px;
  margin: 1rem;
  text-align: center;
  text-shadow: -1px -1px 0 darkblue,
  1px -1px 0 darkblue,
  -1px 1px 0 darkblue,
  1px 1px 0 darkblue;
}

p {
  margin: 10px auto;
  max-width:650px;
  padding: 1rem;
  width: 80%;
}

a {
  padding: 2px;
  text-decoration: none;
}

a:link {
  color: var(--highlight);
  font-weight:bold;
  text-decoration: underline;
}

a:visited {
  color: var(--visited);
  font-weight: normal;
  text-decoration: none;
}

a:hover, a:active {
  color: var(--active);
}