/* GLOBAL ELEMENT STYLES */

* {
 box-sizing: border-box;
}

:link {
 color: #00F;
}

:visited {
 color: #0E388C;
}

/* LAYOUT */

html {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background-color: rgb(235, 235, 235);
 color: black;
 --whatwggreen: #3A7908;
 --body-width: 900px;
 --body-padding: 8px;
 --body-top-padding: 32px;
 --header-main-font-size: 32px;
}

@media (max-width: 600px) {
 html {
  --header-main-font-size: 19px;
  --body-top-padding: 8px;
 }
}

body {
 max-width: var(--body-width);
 margin: 0 auto;
 padding: var(--body-padding);
 padding-top: var(--body-top-padding);
}

/* HEADER */

#main-logo {
 width: 50px;
 height: 50px;
 margin-right: 10px;
 vertical-align: middle;
}

@media (min-width: 600px) {
 #main-logo {
  width: 100px;
  height: 100px;
  margin-right: 20px;
 }
}

header > hgroup > h1 {
 font-size: var(--header-main-font-size);
}

/* SHARED WIDGETS */

.buttonish-links {
 --space-between: 10px;
 display: flex;
}

@media (max-width: 600px) {
 .buttonish-links {
  --space-between: 3px;
 }
}

.buttonish-links > a {
 padding: 10px;
 text-align: center;
 border: 8px solid rgba(58, 121, 8, 0.2);
 background: linear-gradient(var(--whatwggreen), #00981B);
 background-clip: padding-box;
 text-decoration: none;
 color: white;
 font-size: 17px;
 letter-spacing: 0.3px;
 margin-left: var(--space-between);
 margin-right: var(--space-between);
 flex: 1;
}

@media (max-width: 600px) {
 .buttonish-links > a {
  border-width: 4px;
  padding: 5px;
 }
}

.buttonish-links > a:first-of-type {
 margin-left: 0;
}

.buttonish-links > a:last-of-type {
 margin-right: 0;
}

.buttonish-links > a:hover, .buttonish-links > a:focus {
  transition: 0.2s;
  transform: scale(1.1);
}

.buttonish-links > a:not([href]) {
  background: transparent;
  color: black;
  font-weight: bold;
}

.buttonish-links > a:not([href]):hover, .buttonish-links > a:not([href]):focus {
  transition: none;
  transform: none;
}

/* FOOTER */

footer {
 border-top: 1px solid black;
 text-align: center;
 font-size: 12px;
}

footer small {
  /* Semantically it's small, but the footer is already small, so don't change the font size. */
  font-size: inherit;
}

footer > * {
 font-style: normal;
 margin: 12px 0;
}