:root {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6; /* 1.5-2.0 recommended */
  box-sizing: border-box; /* to be cascaded .. */
}

*, /* .. cascaded from root */
*::before,
*::after {
  box-sizing: inherit;
}

/* || FONT SIZES ASC .. USE (REM + VW) */

body { font-size: calc(1rem + 0.5vw); }
h3 { font-size: calc(2rem + 0.5vw); }
h2 { font-size: calc(3rem + 0.5vw); }
h1 { font-size: calc(4rem + 0.5vw); }

/* landscape == width > height and fine == mouse */
@media screen and (orientation: landscape) and (pointer: fine) {
  body { border: 0.5em solid gold; }
}

/* portrait == width < height and coarse == touch */
@media screen and (orientation: portrait) and (pointer: coarse) {
  body { border: 0.5em solid cornflowerblue; }
}

/* || LINKS STYLED IN CORRECT LVFHA ORDER */

a:link {
  color: lightblue;
}

a:visited {
  color: lightsalmon;
}

a:focus {
  background: darkslategray;
}

a:hover {
  background: darkslategray;
}

a:active {
  background: darkslategray;
  color: floralwhite;
}

/* || UTILITIES |||||||||||||||||||||||||||||||||||||||||||||||||||||
We could then define a few utility classes, for example,
a class that removes the default list style for lists we're
going to display as flex items or in some other way. If you
have a few styling choices you know you will want to apply
to lots of different elements, they can be put in this section.
*/

.shake {
  animation: shake 0.25s 12 alternate;
}

.flash-in {
  animation: flash-inner 1s 4 alternate;
}

.flash-out {
  animation: flash-outer 1s infinite alternate;
}

@keyframes flash-inner {
  from { background: transparent; }
  to { background: red; }
}

@keyframes flash-outer {
  from { box-shadow: none; }
  to { box-shadow: 0 0 0.25em 0.25em red; }
}

@keyframes shake {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

.no-display {
  display: none;
}

a.no-deco {
  outline: none;
  text-decoration: none;
}

a.no-deco:link,
a.no-deco:visited,
a.no-deco:focus,
a.no-deco:hover,
a.no-deco:active {
  background: inherit;
  color: inherit;
}