body {
 color: #fee0c2;
 background-color: #fee0c2;
 margin: 0;
 padding: 5rem;
}
body > div {
 background: linear-gradient(to right, #424040ff, #42404080);
 box-shadow: inset 0 2px 2px #00000020;
 text-shadow:
  0 0 1px #00000080,
  0 0 2px #00000040,
  0 0 3px #00000020;
 padding: 1rem;
 border-radius: 0.5rem;
 text-align: center;
}
body > div > *:first-child {
 margin-top: 0;
}
body > div > *:last-child {
 margin-bottom: 0;
}
body,
select,
textarea,
input,
button {
 font-family:
  "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode",
  Geneva, Verdana, sans-serif;
 line-height: 1.5;
}
body > section {
 padding: 5em;
 text-align: center;
}
.esd-logo {
 background-color: #101010;
 box-shadow:
  inset 20px 0 48px #ffffff80,
  inset 0 20px 48px #ff000060,
  inset -20px 0 48px #00ff0060,
  inset 0 -20px 48px #0000ff60;
 width: 128px;
 height: 128px;
 transform: rotate(-45deg);
 display: inline-block;
 position: relative;
 transition: transform 0.5s ease;
 font-family: "Roboto Mono", "IBM Plex Mono", "Ubuntu Mono", monospace;
}
.esd-logo.small {
 width: 64px;
 height: 64px;
 box-shadow:
  inset 10px 0 24px #ffffff80,
  inset 0 10px 24px #ff000060,
  inset -10px 0 24px #00ff0060,
  inset 0 -10px 24px #0000ff60;
}
.esd-logo > div {
 display: flex;
 flex-direction: row;
 transform-origin: center;
 width: 100%;
 height: 100%;
 justify-content: center;
 align-items: center;
 transform: rotate(45deg);
 transition: transform 0.5s ease;
}
.esd-logo > div > span {
 background-color: transparent;
 font-size: 36px;
 font-weight: bold;
 display: block;
 mix-blend-mode: difference;
 transform-origin: center center;
 transition: transform 0.5s ease;
 line-height: 40px;
 width: 48px;
 height: 48px;
 padding-top: 1px;
 box-sizing: border-box;
 display: grid;
 align-items: center;
 justify-content: center;
}
.esd-logo.small > div > span {
 font-size: 18px;
}
section:hover .esd-logo {
 transform: rotate(0);
}
section:hover .esd-logo > div {
 transform: rotate(45deg);
}
section:hover .esd-logo > div > span {
 transform: rotate(-45deg);
}
section:active .esd-logo {
 transform: rotate(45deg);
}
section:active .esd-logo > div {
 transform: rotate(45deg);
}
section:active .esd-logo > div > span {
 transform: rotate(-90deg);
}
*::selection {
 background-color: white;
 color: black;
}
.esd-logo > div > span:nth-child(1) {
 text-shadow:
  0 0 100px #ff000040,
  0 0 50px #ff000080,
  0 0 20px #ff0000cf;
}
.esd-logo > div > span:nth-child(2) {
 text-shadow:
  0 0 100px #00ff0060,
  0 0 50px #00ff00a0,
  0 0 20px #00ff00df;
}
.esd-logo > div > span:nth-child(3) {
 text-shadow:
  0 0 100px #0000ff70,
  0 0 50px #0000ffb0,
  0 0 20px #0000ffef;
}
a {
 color: inherit;
 border-bottom: 2px solid #424040af;
 transition: 0.25s ease border-bottom;
 text-decoration: none;
}
a:hover {
 border-bottom: 5px solid #42a0f0df;
}
body > p {
 color: #424040f0;
 text-align: center;
}
main {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 gap: 5%;
 padding: 0;
}
main > section {
 width: 30%;
 min-width: 240px;
 flex-shrink: 0;
 flex-grow: 0;
 background-color: transparent;
 color: #424040df;
 text-align: center;
 margin: 2.5rem 0;
}
main > section.full {
 width: 100%;
 max-width: 680px;

 text-align: left;
}
main > section > a:first-child {
 display: inline-block;
 font-size: 28px;
 position: relative;
 text-decoration: none;
 border-bottom: none;
 background-color: transparent;
 height: 42px;
 line-height: 38px;
}
main > section > a:first-child::after {
 content: "";
 border-top: 2px solid #424040af;
 border-right: 2px solid #424040af;
 width: 12px;
 height: 12px;
 box-sizing: border-box;
 background-color: transparent;
 display: block;
 position: absolute;
 top: 0;
 right: -12px;
 transition:
  border-top 0.25s ease,
  border-right 0.25s ease;
}
main > section > a:first-child::before {
 content: "";
 border-left: 2px solid #424040af;
 border-bottom: 2px solid #424040af;
 width: 12px;
 height: 12px;
 box-sizing: border-box;
 background-color: transparent;
 display: block;
 position: absolute;
 bottom: 0;
 left: -12px;
 transition:
  border-bottom 0.25s ease,
  border-left 0.25s ease;
}
main > section > a:first-child:hover::after {
 border-top: 5px solid #42a0f0df;
 border-right: 5px solid #42a0f0df;
}
main > section > a:first-child:hover::before {
 border-left: 5px solid #42a0f0df;
 border-bottom: 5px solid #42a0f0df;
}
main > section > ul {
 margin: 2.5rem 0 0;
 text-align: left;
}
main > section > ul > li {
 margin: 1rem 1rem;
}
h1 {
 font-size: 42px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
 margin-bottom: 0.5rem;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
 margin-top: 0.5rem;
}