/* =============== RELEVANT CODE =============== */
.panel {
  border-radius: 3px;
  box-shadow: 2px 2px 5px;
  background: conic-gradient(from var(--b) at var(--xy), var(--c0) var(--a), var(--c1) 0% 50%, var(--c2) 0% calc(180deg + var(--a)), var(--c3) 0%);
}
.panel:last-child {
  grid-column: 1/span 2;
}

/* =============== LAYOUT & PRETTiFYING CODE =============== */
/* (some pretty clever shit in there too) */
html {
  overflow-x: hidden;
}

body {
  display: grid;
  grid-template-rows: 1fr max-content;
  margin: 0;
  min-width: 160px;
  height: 100vh;
  background: #363636;
  font: 1.25em/ 1.5 segoe script, purisa, comic sans ms, cursive;
}
@media (max-width: 480px) {
  body {
    font-size: 0.875em;
  }
}

.grid {
  box-sizing: border-box;
  display: grid;
  grid-template: minmax(65vmin, 65%) minmax(2em, 1fr)/minmax(2em, 1fr) minmax(65vmin, 65%);
  grid-gap: 2vmin;
  padding: 2vmin;
}

p {
  margin: 0;
  padding: 0.5em 2vmin;
  color: #eee;
  text-align: center;
}

a {
  --hlight: 0;
  --not-hlight: calc(1 - var(--hlight));
  --active: 0;
  --not-active: calc(1 - var(--active));
  position: relative;
  display: inline-block;
  padding: 0 .125em;
  color: gold;
  text-decoration: none;
}
a::before {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 1px;
  left: 0;
  transform-origin: 50% 100%;
  transform: scaley(calc(var(--hlight) + var(--not-hlight)*.075));
  background: currentcolor;
  mix-blend-mode: difference;
  transition: transform 0.35s cubic-bezier(calc(var(--hlight)*.42), 0, calc(var(--not-hlight)*.58), 1);
  filter: hue-rotate(calc(var(--active)*-35deg));
  content: "";
}
a:hover, a:focus {
  --hlight: 1 ;
}
a:active {
  --active: 1 ;
}