/* General reset */
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

/* Main container */
.container {
  width: 70%;
  margin: 60px auto;
}



/* Big title */
h1 {
  font-size: 4em;
  font-weight: 900;
  letter-spacing: 5px;
  border-bottom: 6px solid black;
  padding-bottom: 20px;
}

/* Boxes */
.box {
  border: 4px solid black;
  padding: 20px;
  margin-top: 40px;
}

/* Links */
a {
  position: relative;
  color: black;
  text-decoration: none;
  font-weight: bold;
}

/* Paint layer */
a::before {
  content: "";
  position: absolute;
  left: -2px;
  bottom: 0.15em;
  width: 0%;
  height: 0.6em;
  background: #ff5a00;
  transform: skewX(-12deg);
  z-index: -1;
  transition: width 0.25s ease-out;
}

/* Expand paint */
a:hover::before {
  width: 105%;
  animation: jitter 0.2s infinite alternate;
}

/* Subtle jitter */
@keyframes jitter {
  0%   { transform: skewX(-12deg) translateX(0px); }
  100% { transform: skewX(-12deg) translateX(1px); }
}