@import url(reset.css);

.startGameContainer {
  margin-top: 3.2rem;
  max-width: 42rem;
  display: grid;
  place-content: center;
  gap: 2.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  & h1 {
    text-align: center;
    font-size: 2.4rem;
    color: var(--color-secondary-400);
  }

  & img {
    width: 100%;
  }

  & input {
    width: 100%;
    padding: 1.6rem;
    border-radius: 0.8rem;
    border: 1px solid var(--color-light-400);
  }

  & .startGameButton {
    width: 100%;
    padding: 1.6rem;
    border-radius: 0.8rem;
    background: linear-gradient(
      200deg,
      var(--color-primary-400),
      var(--color-primary-500)
    );
    transition: filter 200ms;

    &:hover {
      cursor: pointer;
      filter: brightness(1.1);
    }
  }

  & .buttonRank {
    font-size: 1.6rem;
    margin: 0 auto;
    display: block;
    padding: 1.6rem;

    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}

.test {
  background: red;
  display: block;
}