@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
*, *::before, *::after {
  box-sizing: border-box; }

* {
  margin: 0; }

html, body {
  height: 100%;
  user-select: none; }

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%; }

input, button, textarea, select {
  font: inherit; }

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; }

body {
  padding: 0;
  margin: 0;
  background: #446;
  background-size: cover;
  background-position: center;
  background-image: url(../gfx/pet-nut-game_BG-01_small.jpg);
  overflow: hidden;
  font-family: 'Press Start 2P', cursive;
  user-select: none; }

#game {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100vh;
  user-select: none; }
  #game #main-game {
    z-index: 100;
    display: none; }
    #game #main-game #score {
      padding-bottom: 5px;
      color: #fff;
      font-size: 12px;
      text-align: right;
      font-family: 'Press Start 2P', cursive;
      text-shadow: 1px 1px 1px #000; }
    #game #main-game #puzzle {
      width: 800px;
      height: 480px;
      outline: solid 3px #000;
      background: rgba(50, 50, 50, 0.8);
      z-index: 1000;
      box-shadow: 1px 1px 10px #333; }
  #game #highscore {
    width: 800px;
    height: 480px;
    outline: solid 3px #000;
    background: rgba(50, 50, 50, 0.6);
    z-index: 1000;
    box-shadow: 1px 1px 10px #333;
    background: url(../gfx/ilustracija_final-01.jpg) no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    user-select: none; }
    #game #highscore .scoreboard {
      background: rgba(20, 20, 20, 0.95);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: rgba(255, 255, 255, 0.9); }
      #game #highscore .scoreboard h5 {
        margin-top: 2rem;
        text-align: center;
        font-family: 'Press Start 2P', cursive;
        font-size: 14px;
        text-transform: uppercase; }
      #game #highscore .scoreboard h1 {
        margin-top: 1rem;
        text-align: center;
        font-family: 'Press Start 2P', cursive; }
      #game #highscore .scoreboard .scores {
        max-width: 60%;
        margin: 0 auto;
        margin-top: 2rem;
        font-size: 18px; }
        #game #highscore .scoreboard .scores .item {
          display: grid;
          grid-template-columns: 30px auto 2fr;
          grid-gap: 1rem;
          text-align: left;
          padding-bottom: .5rem; }
          #game #highscore .scoreboard .scores .item > div:nth-child(1) {
            color: #ed1a3b; }
          #game #highscore .scoreboard .scores .item > div:nth-child(2) {
            color: #ed1a3b; }
          #game #highscore .scoreboard .scores .item > div:nth-child(3) {
            color: #ed1a3b;
            text-align: right; }
      #game #highscore .scoreboard .play-button {
        margin-top: 2rem;
        text-align: center;
        font-size: 20px;
        cursor: pointer; }
        #game #highscore .scoreboard .play-button:hover {
          color: #00a496; }
  #game #gameover {
    display: none;
    width: 800px;
    height: 480px;
    outline: solid 3px #000;
    background: rgba(50, 50, 50, 0.6);
    box-shadow: 1px 1px 10px #333;
    background: url(../gfx/ilustracija_final-01.jpg) no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    text-align: center; }
    #game #gameover .mainboard {
      background: rgba(20, 20, 20, 0.95);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: rgba(255, 255, 255, 0.9); }
      #game #gameover .mainboard h5 {
        margin-top: 2rem;
        text-align: center;
        font-family: 'Press Start 2P', cursive;
        font-size: 14px;
        text-transform: uppercase; }
      #game #gameover .mainboard h1 {
        margin-top: 1rem;
        text-align: center;
        font-family: 'Press Start 2P', cursive; }
      #game #gameover .mainboard .your-score {
        margin-top: 3rem;
        font-size: 19px;
        color: #00a496; }
      #game #gameover .mainboard .your-name {
        margin-top: 4rem;
        font-size: 12px; }
      #game #gameover .mainboard #yourName {
        display: block;
        margin: 2rem;
        padding: 1rem;
        text-transform: uppercase;
        background: rgba(50, 50, 50, 0.3);
        color: #ed1a3b;
        font-size: 22px;
        border: 0;
        text-align: center;
        margin: 0rem auto;
        caret-color: #ed1a3b;
        margin-top: .4rem; }
      #game #gameover .mainboard #submitScore {
        margin-top: 2rem;
        padding: 1rem; }
        #game #gameover .mainboard #submitScore:hover {
          color: #ed1a3b;
          cursor: pointer; }
      #game #gameover .mainboard input:focus,
      #game #gameover .mainboard select:focus,
      #game #gameover .mainboard textarea:focus,
      #game #gameover .mainboard button:focus {
        border-color: inherit;
        -webkit-box-shadow: none;
        box-shadow: none;
        outline: none; }

/*# sourceMappingURL=puzzle.css.map */