@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

:root {
  --font-main: "Fredoka", sans-serif;
  --font-title: "Sigmar One", sans-serif;
  --color-bg: #252924;
  --color-fg: #CFD4CE;
  --color-shadow: black;
  --color-accent: #F94144;
  --color-accent-shadow: #b92527;
}

* {
  font-family: var(--font-main);
}

html, body, #app, main {
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
  background-color: var(--color-bg);
  color: var(--color-fg);
  user-select: none;
}

.icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

/*** game title ***/

#game-title {
  width: 100vw;
  max-width: 1024px;
  font-size: 4em;
  animation: bob 1.5s ease-in-out infinite;
}

#game-title * {
  font-family: var(--font-title);
}

#game-title text {
  stroke: var(--color-shadow);
  fill: var(--color-fg);
  paint-order: stroke fill markers;
}

#game-title feFlood {
  flood-color: var(--color-shadow);
}

@keyframes bob {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px) scale(1.02);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes bgpan {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 128px -128px;
  }
}

/*** layout ***/

main.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  position: relative;
}

main.title > * {
  z-index: 1;
}

main.title::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='%23CFD4CE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='icon icon-tabler icons-tabler-outline icon-tabler-device-gamepad'%3E%3Cpath d='M2 8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zM6 12h4m-2-2v4M15 11v.01M18 13v.01M26 32a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H28a2 2 0 0 1-2-2zM30 36h4m-2-2v4M39 35v.01M42 37v.01'/%3E%3C/svg%3E");
  background-size: 128px;
  opacity: 0.05;
  transform: rotate(5deg);
  animation: bgpan 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}

main.title.page {
  font-size: 2em;
}

/*** menu ***/

nav.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.5em;
  gap: 0.5em;
}

nav.menu a {
  color: var(--color-accent);
  text-decoration: none;
  transform: rotate(var(--rotation));
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-out;
  text-shadow: 0 4px 0 var(--color-shadow);
}

nav.menu a:hover {
  color: var(--color-fg);
  transform: rotate(var(--rotation)) scale(1.3);
}

nav.menu a:active {
  transform: rotate(var(--rotation)) scale(1.1);
}

nav.menu a:nth-child(1) { --rotation: -2deg; }
nav.menu a:nth-child(2) { --rotation: 3deg; }
nav.menu a:nth-child(3) { --rotation: -1deg; }
nav.menu a:nth-child(4) { --rotation: 2deg; }
nav.menu a:nth-child(5) { --rotation: -2deg; }
nav.menu a:nth-child(6) { --rotation: 1deg; }
nav.menu a:nth-child(7) { --rotation: -3deg; }
nav.menu a:nth-child(8) { --rotation: 2deg; }

button, .button {
  cursor: pointer;
}

button.cta, .button.cta {
  background-color: var(--color-accent);
  color: var(--color-fg);
  padding: 0.75rem 2.5rem;
  border-radius: 10px;
  margin-top: 1rem;
  box-shadow: 0 5px 0 var(--color-accent-shadow);
  font-weight: bold;
  text-decoration: none;
}

button.cta:active, .button.cta:active {
  box-shadow: none;
  transform: rotate(var(--rotation, 0deg)) translateY(5px) scale(1.2);
}