body {
    font-family: Alef, sans-serif;
    background-color: #f0f0f0;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    margin: 5%;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

#previous-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#previous-container span img {
    margin: 2rem;
    height: 7rem;
}

#pre

input {
    max-width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: #28a745;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#result {
    margin-top: 20px;
}

#result p {
    margin: 10px 0;
    font-size: 18px;
}


img.emoji {
    height: 2rem;
}

#bottom img.emoji, #minds img.emoji, #trophies p img.emoji{
    height: 1rem;
}

#score {
    margin-top: 10px;
    font-size: 18px;
}

#history {
    margin-top: 10px;
    font-size: 16px;
}

#previous-emoji:not(:has(> img)) {
    font-size: 144px;
}

#share {
   display: inline-flex;
   align-items: center;
}


#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  transform: translateX(-50%);
  text-align: center; /* Centered text */
  border-radius: 5px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 9999; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 30px; /* 30px from the bottom */
  justify-content: center;
  color: #000; /* Text color should always be black, even in dark mode */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 3.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
  animation: fadein 0.5s, fadeout 0.5s 3.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}