/*@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');*/

:root {
  color-scheme: dark;
  background: #000;
}

* { box-sizing: border-box; }

body {
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: #d9a64b;
}

body::before,
body::after {
  position: fixed;
  right: 0;
  left: 0;
  height: 30px;
  content: "";
  pointer-events: none;
  z-index: 2;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='30' viewBox='0 0 120 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23c52d35' d='M0 0h12l8 8 8-8h12L28 12l12 12H28l-8-8-8 8H0l12-12zM40 0h12l8 8 8-8h12L68 12l12 12H68l-8-8-8 8H40l12-12zM80 0h12l8 8 8-8h12l-12 12 12 12h-12l-8-8-8 8H80l12-12z'/%3E%3Cpath fill='%231f7d45' d='M0 12h12l8 8 8-8h12L28 24l12 6H28l-8-6-8 6H0l12-6zM40 12h12l8 8 8-8h12L68 24l12 6H68l-8-6-8 6H40l12-6zM80 12h12l8 8 8-8h12l-12 12 12 6h-12l-8-6-8 6H80l12-6z'/%3E%3Cpath fill='%232860b5' d='M12 0h8v8h-8zm0 22h8v8h-8zm40-22h8v8h-8zm0 22h8v8h-8zm40-22h8v8h-8zm0 22h8v8h-8z'/%3E%3C/svg%3E");
}

body::before { top: 0; }
body::after { bottom: 0; transform: scaleY(-1); }

main {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-content: center;
  justify-items: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: 2rem;
}

.mark {
  display: block;
  width: min(55vw, 420px);
  max-height: 66svh;
  object-fit: contain;
  filter: sepia(.12) saturate(1.12) contrast(1.08) drop-shadow(0 0 28px rgba(215, 157, 56, .11));
  user-select: none;
}

.links {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.8vw, 1.15rem);
}

.platform {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(217, 166, 75, .28);
  border-radius: 50%;
  background: rgba(14, 12, 11, .52);
  box-shadow: inset 0 0 20px rgba(217, 166, 75, .04), 0 5px 18px rgba(0, 0, 0, .2);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.platform:hover, .platform:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(239, 190, 94, .8);
  background: rgba(93, 61, 21, .44);
  outline: none;
}

.platform img { display: block; opacity: .92; }

@media (max-width: 430px) {
  .mark { width: min(82vw, 360px); }
  .platform { width: 2.6rem; height: 2.6rem; }
  .platform img { width: 23px; height: 23px; }
}