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

:root {
  --colors-memory-ligth: #f6f8fc;
  --colors-memory-medium: #e9ebf0;
  --colors-memory-dark: #0d1e2f;
  --colors-red: #ff5350;
  --colors-yellow: #ffc300;
  --colors-gray-600: #8b9296;
  --colors-black: #000000;
  --colors-white: #ffffff;
  --space-px: 1px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-26: 6.5rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-50: 12.5rem;
  --space-64: 16rem;
  --space-80: 20rem;
  --font-size-xxs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-4xl: 2rem;
  --font-size-5xl: 2.25rem;
  --font-size-6xl: 3rem;
  --font-size-7xl: 4rem;
  --font-size-8xl: 4.5rem;
  --font-size-9xl: 6rem;
  --font-weight-light: 300;
  --font-weight-medium: 400;
  --font-weight-bold: bold;
  --line-height-shorter: 90%;
  --line-height-short: 110%;
  --line-height-base: 130%;
  --line-height-tall: 160%;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  --border-width-heavy: 8px;
  --radii-xs: 2.5px;
  --radii-sm: 4px;
  --radii-md: 10px;
  --radii-lg: 20px;
  --radii-full: 999999px;
  --opacity-default: 100%;
  --opacity-semi-opaque: 90%;
  --opacity-intense: 75%;
  --opacity-medium: 50%;
  --opacity-light: 25%;
  --opacity-semi-transparent: 10%;
  --z-index-very-hide: -100;
  --z-index-hide: -1;
  --z-index-overlay: 9995;
  --z-index-modal: 9999;
}

@media screen and (max-width: 1080px) {
  html {
    font-size: 93.75%;
  }
}
@media screen and (max-width: 720px) {
  html {
    font-size: 87.5%;
  }
}
@font-face {
  font-family: "Neufreit";
  src: url("../../assets/fonts/Neufreit-ExtraBold.ttf");
}
body {
  width: 100%;
  background: url("/icons/background.svg") var(--colors-eddig-ligth) no-repeat content-box fixed;
  background-size: auto 80%;
  background-position: -20vh -20vh;
}

body,
input,
textarea,
button {
  font-family: "Neufreit";
  font-size: var(--font-size-sm);
  color: var(--colors-eddig-dark);
  line-height: var(--line-height-tall);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-shorter);
}

#name-container {
  max-height: 16rem;
  height: 100%;
  max-width: 30rem;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#name-container h1 {
  margin-top: 20px;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  text-align: center;
}
#name-container input {
  margin: auto;
  max-height: 4.5rem;
  height: 100%;
  max-width: 20rem;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
#name-container button {
  margin-bottom: 20px;
  padding: 10px 20px;
  color: white;
  border: none;
  background-color: #ff83ce;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
#name-container button:hover {
  background-color: #ff5abd;
}

#end-container {
  max-height: 18rem;
  height: 100%;
  max-width: 30rem;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#end-container h1 {
  margin-top: 20px;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  text-align: center;
}
#end-container input {
  margin: auto;
  height: 5vw;
  width: 20vw;
  text-align: center;
}
#end-container button {
  margin-bottom: 20px;
  padding: 10px 20px;
  color: white;
  background-color: #ff83ce;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
#end-container .playAgain {
  background-color: #ff83ce;
}
#end-container .playAgain:hover {
  background-color: #ff5abd;
}
#end-container .backToMenu {
  background-color: #90c841;
}
#end-container .backToMenu:hover {
  background-color: #80c51f;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

::-moz-selection {
  color: var(--colors-memory-ligth);
  background: var(--colors-red);
}

::selection {
  color: var(--colors-memory-ligth);
  background: var(--colors-red);
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-thumb {
  background: var(--colors-gray-600);
  border-radius: var(--radii-full);
  border: 4px solid var(--colors-memory-ligth);
}

input::-moz-placeholder {
  -moz-user-select: none;
       user-select: none;
}

a,
img,
svg,
button,
iframe,
input::placeholder {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.wrapper {
  position: relative;
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#memory-game {
  width: 100%;
  margin-top: var(--space-10);
}
#memory-game .wrapper {
  flex-direction: column;
  align-items: flex-start;
}
#memory-game .flips {
  margin-bottom: var(--space-4);
}
#memory-game canvas {
  width: 100%;
  background: url("../../assets/images/background.jpg") center/cover;
  border-radius: var(--radii-sm);
}
#memory-game .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

#controls {
  margin-top: var(--space-12);
}
#controls .moveKeys button {
  width: var(--space-10);
  aspect-ratio: 1/1;
  border-radius: var(--radii-sm);
  background: var(--colors-red);
}
#controls .moveKeys button img {
  width: 50%;
}
#controls .moveKeys #up,
#controls .moveKeys #down {
  margin: 0 var(--space-10);
}
#controls .moveKeys .middle {
  display: flex;
  gap: var(--space-10);
  align-items: center;
}
#controls .actionKeys button {
  width: var(--space-10);
  aspect-ratio: 1/1;
  border-radius: var(--radii-full);
  background: var(--colors-yellow);
}

.sprites img {
  display: none;
}

.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media only screen and (min-width: 720px) {
  .wrapper {
    position: relative;
    max-height: 100vh;
    max-width: calc(140vw - 30rem);
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #memory-game {
    margin-top: 0;
    width: 100%;
  }
  #memory-game .wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  #memory-game .flips {
    font-size: var(--font-size-5xl);
    color: #ffffff;
    position: absolute;
    left: var(--space-10);
    top: var(--space-10);
    z-index: 6;
  }
  #memory-game canvas {
    width: 100%;
    background: url("../../assets/images/background.jpg") center/cover;
    border-radius: var(--radii-sm);
  }
  #memory-game .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  #controls {
    z-index: 6;
    margin-top: 0;
  }
  #controls .moveKeys {
    position: absolute;
    left: 2vw;
    bottom: 5vw;
  }
  #controls .moveKeys button {
    width: 5vw;
    aspect-ratio: 1/1;
    border-radius: var(--radii-sm);
    background: var(--colors-red);
  }
  #controls .moveKeys button img {
    width: 50%;
  }
  #controls .moveKeys #up,
  #controls .moveKeys #down {
    margin: 0 5vw;
  }
  #controls .moveKeys .middle {
    display: flex;
    gap: 5vw;
    align-items: center;
  }
  #controls .actionKeys {
    position: absolute;
    right: 6vw;
    bottom: 10vw;
  }
  #controls .actionKeys button {
    width: 7vw;
    aspect-ratio: 1/1;
    border-radius: var(--radii-full);
    background: var(--colors-yellow);
    font-size: 2vw;
  }
}
@media only screen and (max-width: 720px) {
  .wrapper {
    position: relative;
    width: 98%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #memory-game {
    width: 100%;
    margin-top: var(--space-10);
  }
  #memory-game .wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  #memory-game .flips {
    margin-bottom: var(--space-4);
  }
  #memory-game canvas {
    width: 100%;
    background: url("../../assets/images/background.jpg") center/cover;
    border-radius: var(--radii-sm);
  }
  #memory-game .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  #controls {
    margin-top: var(--space-12);
  }
  #controls .moveKeys {
    margin-left: 2rem;
  }
  #controls .moveKeys button {
    width: var(--space-12);
    aspect-ratio: 1/1;
    border-radius: var(--radii-sm);
    background: var(--colors-red);
  }
  #controls .moveKeys button img {
    width: 50%;
  }
  #controls .moveKeys #up,
  #controls .moveKeys #down {
    margin: 0 var(--space-12);
  }
  #controls .moveKeys .middle {
    display: flex;
    gap: var(--space-12);
    align-items: center;
  }
  #controls .actionKeys {
    margin-right: 2rem;
  }
  #controls .actionKeys button {
    width: var(--space-12);
    aspect-ratio: 1/1;
    border-radius: var(--radii-full);
    background: var(--colors-yellow);
  }
}/*# sourceMappingURL=app.css.map */