body {
  background-color: #444;
  background-image: repeating-linear-gradient(#444,#383838 4px, #444 8px);
  background-size: 8px 8px;
  background-attachment: fixed;
  margin: 16px 0 0;
  font-family: system-ui, sans-serif;
  min-width: 800px;
}
header {
  width: 590px;
  height: 140px;
  position: relative;
  margin: 0 auto;
}
header .main {
  background: url(./asset/h.svg);
  width: 590px;
  height: 140px;
}
@keyframes g {
  0% {background-position: 0 0}
  100% {background-position: -1002px 0}
}
header .gradient {
  position: absolute;
  width: 376px;
  height: 40px;
  top: 50px;
  left: 189px;
  background: linear-gradient(90deg, #F00 0%, #FF0 18.51%, #0F0 35.94%, #0FF 49.87%, #F0F 88.25%, #F00 100%), #D9D9D9;
  background-size: 1002px 100%;
  background-repeat: repeat;
  animation: 10s infinite g linear;
  mask: url(./asset/h3.svg);
  -webkit-mask: url(./asset/h3.svg);
}
header .text {
  background: url(./asset/h2.svg);
  position: absolute;
  width: 376px;
  height: 40px;
  top: 50px;
  left: 189px;
  z-index: 2;
}
header .gloss {
  background: url(./asset/g.png);
  background-size: contain;
  position: absolute;
  width: 140px;
  height: 112px;
  top: 14px;
  left: 25px;
  z-index: 2;
}
nav {
  margin: -32px auto 0;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.nav {
  display: block;
  width: 96px;
  height: 96px;
  margin-top: 32px;
  transition: .5s;
  position: relative;
}
.nav:after {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  background-size: contain;
  pointer-events: none;
  filter: grayscale(.5);
  transition: inherit;
}
.nav.b:after {background-image: url(./asset/l/b.svg)}
.nav.d:after {background-image: url(./asset/l/d.svg)}
.nav.g:after {background-image: url(./asset/l/g.svg)}
.nav.bs:after {background-image: url(./asset/l/bs.svg)}
.nav:is(:hover, :focus):not(.leaving) {
  transition: .07s;
  outline: none;
}
.nav:is(:hover, :focus):not(.leaving):after {
  filter: none;
  transform: translateY(-8px);
}
.nav p {
  position: absolute;
  margin-top: 100px;
  left: 0;
  right: 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  transition: .5s;
  letter-spacing: .2px;
  text-shadow: 0 1px #000, 0 1px 3px #000;
  pointer-events: none;
}
.nav:is(:hover, :focus):not(.leaving) p {
  transition: .07s;
  transform: translateY(-28px);
}
.nav.leaving {
  pointer-events: none;
}
.nav.leaving:after {
  filter: none;
}
.nav.b p {color:#8f8}
.nav.d p {color:#8af}
.nav.g p {color:#f8f}
.nav.bs p {color:#8ff}
.nav[disabled] {
  pointer-events: none;
  opacity: .5;
  filter: grayscale(1);
}
@keyframes leave {
  0% {translate:0;animation-timing-function: cubic-bezier(0, 0, .5, 1)}
  50% {translate:0 -15px;animation-timing-function: cubic-bezier(.5, 0, 1, 1)}
  100% {translate:0;animation-timing-function: cubic-bezier(0, 0, .5, 1)}
}
.nav.leaving:after {
  transition: .07s;
  animation: 1s leave infinite;
}
content {
  display: block;
  position: relative;
  padding: 16px;
  border-radius: 8px;
  background: #eee;
  box-shadow: inset 0 0 4px #fff, inset 0 0 16px #0008, 0 0 8px #0008;
  width: 800px;
  margin: 0 auto;
  z-index: 20;
  box-sizing: border-box;
}
h1, p {
  margin: 0;
}
h1 {
  font-size: 18px;
  margin-top: 8px;
}
.buttons-top {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.buttons-top-inner {
  display: flex;
  gap: 8px;
}
.btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
  background: linear-gradient(#eee,#ddd);
  box-shadow: inset 0 1px 3px 1px #fff, 0 1px 2px #0004, 0 0 0 1px #0002;
  border-radius: 6px;
  color: #222;
  text-decoration: none;
  -webkit-user-drag: none;
  text-shadow: 0 1px #fff;
  font-weight: 700;
  position: relative;
  outline: none !important;
}
.btn small {
  color: #666;
  font-size: 10px;
}
.btn.off {
  background: none;
  box-shadow: inset 0 1px 2px #0003, inset 0 0 6px #0004, 0 1px #fff;
}
@keyframes r1 {
  0% {transform:translate(0, 0)}
  50% {transform:translate(-3px, -3px)}
  100% {transform:translate(0, 0)}
}
@keyframes r2 {
  0% {transform:translate(0, 0)}
  50% {transform:translate(3px, -3px)}
  100% {transform:translate(0, 0)}
}
@keyframes r3 {
  0% {transform:translate(0, 0)}
  50% {transform:translate(-3px, 3px)}
  100% {transform:translate(0, 0)}
}
@keyframes r4 {
  0% {transform:translate(0, 0)}
  50% {transform:translate(3px, 3px)}
  100% {transform:translate(0, 0)}
}
.btn :is(r1,r2,r3,r4) {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  display: none;
}
.btn:is(:hover,:focus) :is(r1,r2,r3,r4) {
  display: block;
}
.btn r1 {
  top: -4px;
  left: -4px;
  background: url(./asset/r1.svg);
  animation: 1s r1 infinite ease-in-out;
}
.btn r2 {
  top: -4px;
  right: -4px;
  background: url(./asset/r2.svg);
  animation: 1s r2 infinite ease-in-out;
}
.btn r3 {
  bottom: -4px;
  left: -4px;
  background: url(./asset/r3.svg);
  animation: 1s r3 infinite ease-in-out;
}
.btn r4 {
  bottom: -4px;
  right: -4px;
  background: url(./asset/r4.svg);
  animation: 1s r4 infinite ease-in-out;
}
.btn:active :is(r1,r2,r3,r4) {
  filter: hue-rotate(90deg);
  animation: none;
}
.btn p {
  font-size: 12px;
  line-height: 12px;
  color: #555;
}
@media screen and (max-width: 1299px) {
  .webring {
    margin: 16px auto;
  }
}
@media screen and (min-width: 1300px) {
  .webring-container {
    position: absolute;
    top: 256px;
    left: calc(50% + 400px);
    right: 0;
    overflow: hidden;
    padding-top: 16px;
    padding-bottom: 16px;
    transform: translateX(1px);
    animation: 1.5s bc ease-in;
    z-index: 100;
  }
  .webring {
    width: 240px;
    margin: 0;
    animation: 1.5s b ease-in;
  }
  .webring-anim-container {
    animation: 1.5s bm ease-in;
    transform: translateX(-20px);
  }
  @keyframes b {
    0% {transform: translateX(1000px);opacity:0}
    60% {transform: translateX(0px);opacity:1}
    100% {transform: translateX(0px)}
  }
  @keyframes bc {
    0% {transform: translateX(0)}
    60% {transform: translateX(1px);animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1)}
    100% {transform: translateX(1px)}
  }
  @keyframes bm {
    0% {transform: translateX(0)}
    60% {transform: translateX(0px);animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1)}
    100% {transform: translateX(-20px)}
  }
}
/* berry :) */
.webring-container .webring .buttons-top:before {
  content: url("data:image/gif;base64,R0lGODlhGAAYAHAAACH5BAEAAAsALAAAAAAYABgAgzAwMECYQFjQUDBwQPiQMPjYMOjgYOBwMMhIMLCgYJhQOAAAAAAAAAAAAAAAAAAAAAR/cMlJq704670A4JUnBh/YAUIarCUHBCrbusKazjRc467umZQXSSLiYV4fT+qWEXUGnpWNGQIQroABdLrcBQmFAgE1kE2jLStYLPyd3DP1FevcAAzz6wHBN4YMB3N7fAd+QYB8iYmGEwAJBomQfSZ3BpaSCowhj5YJbkBFmkAgEQA7");
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 24px;
  pointer-events: none;
}
/* contrast */
@media (forced-colors: active) {
  content.main, .webring, .btn {
    outline: solid 1px !important;
  }
  .btn, .nav p {
    color: ButtonText !important;
  }
  .btn small, .btn p {
    color: inherit;
  }
  .btn:not(.off):is(:hover,:focus) {
    outline-width: 2px !important;
    outline-offset: -1px !important;
  }
  .btn:not(.off):active {
    outline-width: 4px !important;
    outline-offset: -3px !important;
  }
  .btn.off {
    outline-style: dashed !important;
    color: GrayText;
  }
  .btn :is(r1,r2,r3,r4) {
    display: none !important;
  }
  header .gradient {
    background: ButtonText !important;
  }
}
body {
  background: #000;
}
r1,r2,r3,r4 {
  display: none!important;
}
content {
  border-radius: 0;
  box-shadow: 0 0 8px #0ff4, 0 0 0 1px #0ff;
  background: #022;
  color: #0ff;
  font-family: monospace;
  .btn {
    background: #044;
    border-radius: 0;
    box-shadow: 0 0 2px #0ff, 0 0 0 1px #0ff;
    text-shadow: none;
    color: #0ff;
    transition: 0s;
    &:not(.off):is(:hover,:focus) {
      box-shadow: 0 0 2px #0ff, 0 0 0 2px #0ff;
    }
    &:not(.off):active {
      box-shadow: 0 0 2px #0ff, inset 0 0 0 1px #0ff;
      background: #022;
    }
    small,p {
      color: #0aa;
    }
    &.off {
      background: #011;
      box-shadow: none;
      color: #0ff8;
      small,p {
        color: #066;
      }
    }
  }
}