:root {
  --color-border-gray: #666666;
  --color-tl-red-light: #A62624;
  --color-tl-red-dark: #6B1412;
  --color-tl-amber: #D26C00;
}

* {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Verdana, Arial, sans-serif;
  /* font-size: 16px; // Use the UA default */
}

body {
  margin: 1rem;
  max-width: 70ch;
}

@media screen and (min-width: 400px)  {
  body {
    margin: 3rem;
  }
}

h2, h3, h4, h5, h6 {
  font-size: 1rem;
}

sup {
  vertical-align: unset;
  font-size: inherit;
}

sup::before {
  content: "\00a0";
}

ul, ol {
  width: 100%;
  overflow-x: scroll;
}

video {
  width: 100%;
  border: 1px solid #666666;
}

aside, footer {
  margin-block-start: 20rem;
}

aside + aside {
  margin-block-start: unset;
}

aside ol li+li,
aside ul li+li {
  margin-block-start: 1rem;
}


/*******************************
 * The YouTube Video thumbnail *
 *******************************/
.video-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.video-ref__thumbnail-wrapper{
  display: block;
  width: 80%;
}

.video-ref__thumbnail {
  width: 100%;
}

.video-ref__thumbnail {
  padding: 0.1rem;
  border: 1px solid var(--color-border-gray);
}

.video-ref__caption {
  width: 80%;
  margin-top: 0.5rem;
  text-align: center;
}

/***************
 * Tail Lights *
 ***************/

.tail-lights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-column-gap: 3rem;

  text-align: center;
}

.tail-light {
  width: 100%;
  grid-row: 1;
}

@keyframes flashing-us {
  50% {
    fill: var(--color-tl-red-light);
    stroke: var(--color-tl-red-light);
  }
}

@keyframes flashing-uk-turn {
  50% {
    fill: var(--color-tl-amber);
  }
}

@keyframes flashing-uk-brake {
  50% {
    fill: var(--color-tl-red-light);
    stroke: var(--color-tl-red-light);
  }
}

/* Start as dark for both US/UK */
.tail-light--anim #tl-us-l-flag-top,
.tail-light--anim #tl-us-l-flag-bottom,
.tail-light--anim #tl-us-l-horiz,
.tail-light--anim #tl-us-l-vert,
.tail-light--anim #tl-uk-r-flag-top,
.tail-light--anim #tl-uk-r-flag-bottom,
.tail-light--anim #tl-uk-r-horiz,
.tail-light--anim #tl-uk-r-vert {
  fill: var(--color-tl-red-dark);
}

/* Flash both horizontal and vertical red for US */
.tail-light--anim #tl-us-l-horiz,
.tail-light--anim #tl-us-l-vert {
  animation: flashing-us 1s step-start infinite;
}

/* Flash horizontal amber for UK */
.tail-light--anim #tl-uk-r-horiz {
  animation: flashing-uk-turn 1s step-start infinite;
}

.tail-light--anim-braking #tl-uk-r-vert {
  animation: flashing-uk-brake 5s step-start infinite;
}