:root{
  --text: #f5f1e8;
  --text2: rgba(245, 241, 232, .7);
  --bg: #1a1a1a;
  --bg2: #0d0d1d;
  --highlight: #36454f;
  --link: #d4af37;
  --link2: #b59410;
  --art: #b59410;
  --cover: rgba(0,0,0,.6);
  --hover: rgba(212,175,55,.12);
  --border: rgba(212,175,55,.28);
  --shadow: rgba(0,0,0,.45);
  --attention: #d4af37;
  --grey: rgba(245,241,232,.55);
  --icons: invert(1);
}

body{
  background:
    radial-gradient(circle at 20% 10%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(212,175,55,.05), transparent 55%),
    var(--bg);
  color: var(--text);
  background-size: 140% 140%;
  animation: grandmaster-ambient 40s ease-in-out infinite;
}

header, footer{
  background: var(--bg2);
  border-color: var(--border);
}

footer{
  box-shadow: inset 0 1px 0 rgba(212,175,55,.2);
}

.footer-logo span{
  color: var(--link);
}

.footer-group h4{
  color: rgba(212,175,55,.7);
}

.footer-group a:hover{
  color: var(--link);
  background: rgba(212,175,55,.12);
  border-color: rgba(212,175,55,.28);
}

.showcase{
  background: linear-gradient(135deg, rgba(13,13,29,.96), rgba(26,26,26,.92));
}

.showcase-grid{
  position: relative;
}

.showcase-grid::before,
.showcase-grid::after{
  content: "";
  position: absolute;
  top: 18%;
  left: 16%;
  width: 6px;
  height: 6px;
  background: var(--link);
  opacity: .9;
  pointer-events: none;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.showcase-grid::before{
  animation: grandmaster-glitter-a 8s ease-in-out infinite;
  animation-delay: -2s;
}

.showcase-grid::after{
  width: 4px;
  height: 4px;
  opacity: .8;
  animation: grandmaster-glitter-b 11s ease-in-out infinite;
  animation-delay: -6s;
}

.showcase:nth-of-type(1) .showcase-grid::before{
  box-shadow:
    60px 20px 0 rgba(212,175,55,.95),
    160px 40px 0 rgba(212,175,55,.85),
    240px 120px 0 rgba(212,175,55,.9),
    80px 180px 0 rgba(212,175,55,.75),
    220px 200px 0 rgba(212,175,55,.88),
    300px 60px 0 rgba(212,175,55,.8);
}

.showcase:nth-of-type(1) .showcase-grid::after{
  box-shadow:
    100px 70px 0 rgba(212,175,55,.7),
    210px 30px 0 rgba(212,175,55,.85),
    280px 160px 0 rgba(212,175,55,.6),
    140px 210px 0 rgba(212,175,55,.75),
    40px 140px 0 rgba(212,175,55,.8),
    260px 220px 0 rgba(212,175,55,.65);
}

.showcase:nth-of-type(2) .showcase-grid::before{
  box-shadow:
    40px 40px 0 rgba(212,175,55,.9),
    140px 80px 0 rgba(212,175,55,.8),
    220px 120px 0 rgba(212,175,55,.95),
    90px 190px 0 rgba(212,175,55,.75),
    260px 210px 0 rgba(212,175,55,.85),
    300px 150px 0 rgba(212,175,55,.7);
}

.showcase:nth-of-type(2) .showcase-grid::after{
  box-shadow:
    120px 60px 0 rgba(212,175,55,.65),
    200px 30px 0 rgba(212,175,55,.85),
    260px 140px 0 rgba(212,175,55,.6),
    60px 160px 0 rgba(212,175,55,.8),
    170px 220px 0 rgba(212,175,55,.7),
    280px 200px 0 rgba(212,175,55,.75);
}

.showcase:nth-of-type(3) .showcase-grid::before{
  box-shadow:
    70px 20px 0 rgba(212,175,55,.9),
    150px 70px 0 rgba(212,175,55,.85),
    230px 100px 0 rgba(212,175,55,.95),
    110px 170px 0 rgba(212,175,55,.75),
    260px 200px 0 rgba(212,175,55,.88),
    320px 140px 0 rgba(212,175,55,.7);
}

.showcase:nth-of-type(3) .showcase-grid::after{
  box-shadow:
    120px 50px 0 rgba(212,175,55,.7),
    200px 30px 0 rgba(212,175,55,.85),
    280px 150px 0 rgba(212,175,55,.65),
    60px 140px 0 rgba(212,175,55,.8),
    170px 210px 0 rgba(212,175,55,.72),
    300px 220px 0 rgba(212,175,55,.6);
}

.showcase-grid > *{
  position: relative;
  z-index: 1;
}

.showcase-headings{
  position: relative;
  padding-bottom: .35em;
}

.showcase-headings::after{
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(270deg, var(--link), transparent);
  transform: scaleX(0);
  transform-origin: right center;
  animation: grandmaster-underline 1.6s ease forwards;
}

.action{
  position: relative;
  border-color: rgba(212,175,55,.55);
  background-image:
    linear-gradient(var(--link), var(--link)),
    linear-gradient(var(--link), var(--link));
  background-repeat: no-repeat;
  background-size: 18px 2px, 2px 18px;
  background-position: left top, left top;
}

.action::after{
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--link2), var(--link2)),
    linear-gradient(var(--link2), var(--link2));
  background-repeat: no-repeat;
  background-size: 18px 2px, 2px 18px;
  background-position: right bottom, right bottom;
  opacity: .8;
}

@keyframes grandmaster-underline{
  to{
    transform: scaleX(1);
  }
}

@keyframes grandmaster-glitter-a{
  0%{
    opacity: .25;
    transform: translateY(0) translateX(0);
  }
  45%{
    opacity: 1;
    transform: translateY(-4px) translateX(2px);
  }
  100%{
    opacity: .35;
    transform: translateY(0) translateX(0);
  }
}

@keyframes grandmaster-glitter-b{
  0%{
    opacity: .2;
    transform: translateY(0) translateX(0);
  }
  55%{
    opacity: .95;
    transform: translateY(-6px) translateX(-2px);
  }
  100%{
    opacity: .3;
    transform: translateY(0) translateX(0);
  }
}

@keyframes grandmaster-ambient{
  0%{
    background-position: 0% 0%, 100% 0%, 0 0;
  }
  50%{
    background-position: 100% 20%, 0% 10%, 0 0;
  }
  100%{
    background-position: 0% 0%, 100% 0%, 0 0;
  }
}