@charset "UTF-8";
body {
  min-height: 100vh;
  background-color: #222;
  color: #FFF;
  display: grid;
  place-items: center;
}

main {
  height: 100vh;
  font-family: "Lato", sans-serif;
  display: grid;
  align-content: space-evenly;
  justify-items: center;
  align-items: center;
}

header, footer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1rem;
  align-items: center;
}
header > p, footer > p {
  margin: 0;
  text-align: center;
}
header > p span, footer > p span {
  margin-bottom: 0.5em;
  color: #DDD;
  font-size: 0.8em;
  display: inline-block;
}
header > p b, footer > p b {
  font-size: 1.5em;
}
header div, footer div {
  width: 1px;
  height: 75%;
  background-color: #666;
}

main > button {
  appearance: none;
  box-sizing: content-box;
  width: 12rem;
  height: 8rem;
  padding: 0;
  background-image: linear-gradient(#EEE, #EEE), linear-gradient(#222, #222), linear-gradient(-45deg, #F22, #F92, #FF2, #9F2, #2F2, #2F9, #2FF, #29F, #22F, #92F, #F2F, #F29, #F22, #F92, #FF2, #9F2, #2F2, #2F9, #2FF, #29F, #22F, #92F, #F2F, #F29, #F22);
  background-origin: border-box;
  background-clip: content-box, padding-box, border-box;
  background-size: auto, auto, 12rem 12rem;
  background-position: center, center, 0 0;
  border: 0 solid transparent;
  border-radius: 2rem;
  font-size: 2em;
  transition: margin 100ms, border-width 100ms, border-radius 100ms, padding 100ms;
}
main > button:before {
  content: "👆";
}
main > button:active:before {
  content: "👇";
}
main > button:focus {
  outline: none;
  margin: calc(-.5rem - 2px);
  padding: 2px;
  border-width: 0.5rem;
  border-radius: 2.5rem;
  animation: hue-rotate calc(10000ms / var(--cps)) infinite linear;
}
@keyframes hue-rotate {
  to {
    background-position: center, center, 12rem 12rem;
  }
}

h1 {
    font-family: "Lato", sans-serif;
    font-size: 40px;
    padding-top: 20px;
}




p {
      font-family: "Lato", sans-serif;

}

#article {
  padding: 3% 10%;
  background-color: white;
color: black;
}

#article h3 {
  font-size: 20px;
}

#article strong {
  font-size: 1.1em;
}