*, html {
  padding: 0; margin: 0;
  box-sizing: border-box;
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

  --font-special: "Londrina Solid", serif;

  --p1: #1c1c1c;
  --p2: #252525;
  --s1: #EEEEEE;
  --s2: #b9b9b9;
  --t1: #3653a3;
  --t2: #922424;
  /* Make sure to update in game.js aswell */

  --g1: linear-gradient(43deg, var(--p1) 0%, var(--p2) 100%);
  --g2: linear-gradient(43deg, var(--s1) 0%, var(--s2) 100%);
  --g3: linear-gradient(43deg, var(--t2) 0%, var(--t1) 100%);




  view-transition-name: root;
}

html {
  height: 100%;
}

body {
  overflow: hidden;
  height: 100%;
}

main {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background-color: var(--p1); gap: 3rem;
  overflow: hidden;
  position: relative;
}


#start-full-container, #start-full-container-match {
  display: flex;
  background: linear-gradient(283deg, black 0%, var(--p1) 100%);
  width: 100%; height: 100%;
  justify-content: space-between; align-items: center;
  z-index: 10;
  overflow: hidden;
}

#start-full-container-match {
  position: absolute;
}

#start-menu-img-container {
  position: relative;
  padding-right: 5%;
  transition: transform 1s ease, opacity .5s ease;
}

#start-menu-img-container::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: 
  linear-gradient(75deg, transparent 20%,
  color-mix(in srgb, var(--t2), transparent 70%) 35%,
  color-mix(in srgb, var(--t1), transparent 70%) 65%,
  transparent 80%);
  z-index: -1;
  left: -50%; top: -50%;
}

#start-menu-img {
  width: 75vh; max-width: 50vw;
  position: relative;
  z-index: 20;
  /* animation: ghostmove 12s infinite ease alternate-reverse; */
}

/* @keyframes ghostmove {
  0%{transform: translateY(0) rotate(0deg);}
  33% {transform: translateY(.2rem) rotate(-2deg)}
  66%{transform: translateY(0) rotate(0deg)}
  100% {transform: translateY(.2rem) rotate(2deg)}
} */

.smi-moved {
  transform: translateY(20%);
  /* opacity: 0; */
}


#start-menu-container {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 2rem 6rem 15%;
  gap: 2rem;
  height: fit-content;
}

#start-menu-text-container img {
  max-height: 15rem;
}


#start-menu-button-container {
  display: flex;
  width: 100%;
  gap: 1rem;
}

.start-menu-button {
  height: 3.5rem; width: 11rem;
  display: flex; justify-content: center; align-items: center; 
  background: transparent;
  font-family: var(--font-special);
  color: var(--s1); font-weight: 300; 
  font-size: 1.25rem;
  border-radius: 1.5rem; border: var(--s1) 2px solid;
  transition: .25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.start-menu-button:hover, #start-back-button:hover {
  background: var(--s1);
  color: var(--p1);
}

.disabled-button {
  border-color: var(--p2) !important;
  color: var(--p2) !important;
  pointer-events: none;
}

.w-sub:hover {
  background: transparent;
  color: var(--s1);
}

.w-sub span {
  transition: .25s ease;
}

.w-sub:hover span {
  opacity: 0;
  transform: translateY(100%);
}

.w-sub:hover span {
  opacity: 0;
  transform: translateY(100%);
}

#sub-button-container {
  position: absolute; display: flex;
  opacity: 0; transform: translateY(-150%);
  transition: .25s ease;   
  width: 100%; height: 100%;
}

.w-sub:hover #sub-button-container {
  opacity: 1; transform: translateY(0);
}

.sub-button {
  place-content: center;
  flex: 1;
  transition: .25s ease;
  text-decoration: none;
  color: var(--s1);
}

.sb-h {border-right: 1px solid var(--s1);}
.sb-j {border-left: 1px solid var(--s1);}

.sub-button:hover {
  background-color: var(--s1);
  color: var(--p1);
}

#start-back-button {
  position: absolute;
  top: 2rem; left: 2rem;
  border-radius: .75rem;
  background-color: transparent;
  border: 2px solid var(--s1);
  width: 2.5rem; aspect-ratio: 1 / 1;
  z-index: 99;
  color: var(--s1); text-decoration: none; text-align: center;
  place-content: center;
  font-size: .8rem;
  transition: .25s ease;
}

#start-pre-game-menu-container {
  color: var(--s1);
  font-family: var(--font-special);
  padding: 15% 0 25% 0;
  gap: 1rem;
  display: flex; flex-direction: column;
}


#code-enter-box {
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}

#code-enter-box::placeholder {
  padding: 0; margin: 0;
}

#code-display-box {
  padding: 0rem 3rem;
}

#code-enter-box, #code-display-box {
  font-size: 8rem;
  width: 25rem;
  cursor: pointer;
  border-radius: 1.5rem;
  transition: .25s ease;
  margin: 1rem;
  border: none;
  background-color: transparent;
  color: var(--s1);
  text-align: center;
  font-family: var(--font-special);
  text-wrap: nowrap;
}

#code-display-box:hover {
  background-color: var(--p2);
}

#spgm-button-container {
  display: flex;
  gap: .25rem;
}

#cm-button {
  flex: 5;
  cursor: pointer;
}

#cm-button:hover {
  background-color: var(--s1);
  color: var(--p1);
}

#mm-timer {
  cursor: default;
  flex: 1;
}

#join-button {
  cursor: pointer;
  flex: 1;
}

#join-button:hover {
  background-color: var(--s1);
  color: var(--p1);
}

#cm-button, #mm-timer, #join-button {
  height: 2.5rem;
  display: flex; justify-content: center; align-items: center; /* Flex */ 
  background: transparent;
  font-family: var(--font-special);
  color: var(--s1); font-weight: 300; 
  font-size: 1.25rem;
  border-radius: .75rem; border: var(--s1) 2px solid;
  transition: .25s ease;
  position: relative;
  overflow: hidden;
}

#warning {
  width: 50%; max-width: 30rem;
  position: absolute;
  right: 1rem; bottom: 1rem;
  background-color: var(--p2); color: var(--s2);
  border-radius: 1.5rem;
  z-index: 99;
  padding: 1rem;
  text-align: center;
  transform: translateY(200%);
  opacity: 0;
  transition: transform .5s ease, opacity .35s ease;
}

footer {
  position: absolute;
  width: 100%;
  display: flex; align-items: center;
  justify-content: flex-start;
  bottom: 0; padding: 2rem;
  z-index: 99;
  gap: 1rem;
}

footer * {
  transition: .25s ease;
  color: var(--s2);
  font-family: var(--font-special);
  background-color: transparent;
  border: none; font-size: 1rem; text-decoration: none;
}

.footer-hover:hover {color: var(--s1); cursor: pointer;}

#tutorial-callout {
  position: absolute;
  padding: 1rem;
  top: -4rem;
  width: 16rem;
  background-color: var(--p2);
  border-radius: 2rem;
  transition: .4s cubic-bezier(.36,.02,.34,1.29);
  transform: scale(0);
  transform-origin: bottom center;
  z-index: 99;
}

#tutorial-pointer {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 2rem;
  transform: rotate(57.5deg);
  background-color: var(--p2);
  bottom: -1rem; left: 6rem;
  z-index: 90;
}

.version {
  cursor: default;
}

@media (max-width: 1000px) {
  #start-menu-img {display: none;}
  #start-menu-img-container {width: 100%; height: 100%; position: absolute; padding-right: unset; z-index: -1; overflow: hidden;}
  #start-menu-img-container::before {left: 0; top: 0; right: 0; bottom: 0;}
  #start-full-container-match, #start-full-container {display: flex; align-items: center; justify-content: center;}
  #start-menu-container {padding: 0;}
  #start-menu-button-container, #start-menu-text-container {display: flex; justify-content: center;}

  #first-time-modal {height: 35rem; width: 90%; max-width: 40rem; justify-content: center; padding: 0 3rem 6rem 3rem;}
}

@media (max-width: 500px) {
  #start-menu-text-container img {width: 80%;}
  #start-menu-container {width: 100%; align-items: center;}
  #start-pre-game-menu-container {width: 100%; align-items: center;}
  #spgm-button-container {width: 80%; height: 5rem;}
  #join-button {height: 100%;}

  #code-enter-box {width: 90%; font-size: 6.5rem;}
}

@media (max-width: 400px) {
  #start-menu-button-container {flex-direction: column; align-items: center;}
}

@view-transition {
  navigation: auto;
}