Breaking Weird

<p>
  Werner Heisenberg was an eminent German theoretical physicist (5/12/1901 -
  1/2/1976). He was awarded the
  <a
    href="https://www.nobelprize.org/prizes/physics/1932/heisenberg/biographical/"
    >1932 Nobel Prize in Physics</a
  >
  "for the creation of quantum mechanics". He is probably best known for the
  Uncertainty Principle.
</p>
<h2>Uncertainty Principle</h2>
<img id="formula" src="img/formula.svg" alt="the mathematical formula for the uncertainty principle:  ∆X ∆p ~ ħ / 2">
<figure>
  <div id="comic"></div>
  <figcaption>Animated interpetation by Heisenbear</figcaption>
</figure>
<br />
<p>
  Things get weird, the smaller we go! The principle tells us that there is a
  fundamental limit to what we can know about the behaviour of quantum particles
  (the smallest subatomic particles). When we get to a quantum scale, the most
  we can hope for is to calculate probabilities for where things are and how
  they will behave.
</p>
<p>
  We cannot measure the position and the momentum of a particle with absolute
  precision. The more accurately we know one of these values, the less
  accurately we know the other. Multiplying together the errors in the
  measurements of these values (the errors are represented by the triangle
  symbol in front of each property, the Greek letter "delta") has to give a
  number greater than or equal to half of a constant called "h-bar". This is
  equal to the reduced Planck constant (usually written as h / 2π). Planck's
  constant is an important number in quantum theory, it's a way to measure the
  granularity of the world at its smallest scales.
</p>
<h2>But what does quantum mean?</h2>
<p>
  Among its many counter-intuitive ideas, quantum theory proposed that energy
  was not continuous, but instead came in discrete packets called quanta.
  Quantum mechanics differs from classical physics in that energy, momentum, and
  other quantities are restricted to these discrete packets; and objects have
  characteristics of both particles and waves (wave-particle duality).
</p>

@font-face {
  font-family: "Gaegu";
  src: url("Gaegu-Regular.woff2");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  --line-color: rgba(128, 128, 128, 0.2);

  width: 100%;
  max-width: 1280px;
  margin: 0;
  padding-inline: 0.5rem;

  background-size: 8px 8px;
  background-image: linear-gradient(
      to right,
      var(--line-color) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--line-color) 1px, transparent 1px);

  font-family: "Gaegu", serif;
  font-size: 1.5rem;
}

#formula {
  width: 100%;
  height: auto;
  max-width: 400px;
}

#comic {
  position: relative;

  width: 100%;
  height: auto;
  max-width: 400px;
  aspect-ratio: 4/3;

  background-color: white;
  background-image: url("img/bryanberg.png");
  background-size: 100%;

  animation: move 8s steps(22) infinite;

  box-shadow: grey 2px 1px 3px;
}

@keyframes move {
  from {
    background-position-y: 0px;
  }
  to {
    background-position-y: -2200%;
  }
}

figcaption {
  font-size: 0.75em;
}

#comic:before,
#comic:after {
  width: 100px;
  height: 40px;
  display: block;
  content: "";
  background: hsla(40, 100%, 80%, 0.4);
  position: absolute;
}

#comic:before {
  left: -35px;
  top: -5px;
  transform: rotate(-45deg);
}

#comic:after {
  right: -35px;
  top: -5px;
  transform: rotate(45deg);
}