@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }
  @media (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 50%; } }

body {
  box-sizing: border-box; }

body {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5C33F6;
  min-height: calc(var(--vh, 1vh) * 100);
  color: #646363; }

.game__container {
  background: #F0D9E7;
  padding: 2rem 4rem;
  border-radius: 2rem;
  min-width: 50%;
  display: flex;
  flex-direction: column;
  box-shadow: 0.5rem 0.5rem 4rem 0.3rem rgba(0, 0, 0, 0.4); }
  @media (max-width: 32em) {
    .game__container {
      width: 95%;
      padding: 2rem 2rem; } }
  .game__container > *:not(:first-child) {
    margin-top: 2.5rem; }
  .game__container h1 {
    align-self: center;
    text-align: center;
    font-size: 4.5rem; }
  .game__container .icons {
    display: flex;
    justify-content: space-evenly; }
  .game__container .far {
    font-size: 6rem;
    margin-top: 2rem; }
  .game__container .user-icon .far {
    cursor: pointer; }
  .game__container .reset {
    width: 20%;
    background: #5C33F6;
    padding: .5rem 1rem;
    border-radius: 50px;
    border: none;
    color: #fff;
    font-size: 2.4rem;
    box-shadow: 0.3rem 0.3rem 2rem rgba(0, 0, 0, 0.4);
    align-self: center;
    cursor: pointer; }
    @media (max-width: 32em) {
      .game__container .reset {
        width: 30%; } }
    .game__container .reset:focus {
      outline: none; }
    .game__container .reset:active {
      transform: translateY(0.3rem); }
  .game__container h3 {
    align-self: center;
    font-size: 3.5rem; }