/* Mobile menu styling */
.mobileMenu {
  position: fixed; /* Make the menu fixed to the top of the viewport */
  top: 90px; /* Position at the very top */
  left: 0; /* Position at the very left */
  width: 100%; /* Take up the entire width of the viewport */
  height: 500px;
  background-color: #00b0ab;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 100; /* Ensure it appears above other elements */
}

.mobileMenu ul {
  display: flex;
  flex-direction: column;
}

.mobileMenu li {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mobileMenu li a {
  color: white;
  font-size: 1.5rem; /* Increase font size for better readability */
  padding: 1rem 2rem; /* Add padding to make the menu items easier to click */
}

.mobileMenu a:hover {
  opacity: 0.75;
}

/* Pseudo bullet points elements */
.pseudoBullets::before {
  content: "•";
  font-size: 1rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* Default styles for small screens */
.pseudoQuotes::before {
  content: "”";
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  margin-right: 0.5rem;
  vertical-align: top;
}

/* Scroll somewhat up to make h1 element appear first! */
#media,
#program,
#about,
#contact {
  scroll-margin-top: 100px;
}

/* Media query for larger screens (768px and up) */
@media (min-width: 768px) {
  .pseudoQuotes::before {
    font-size: 2rem;
  }
  .pseudoBullets::before {
    font-size: 2rem;
  }
}

/* The 4 Alternative choices for playing Situation 1-9 in Round 1-3 */
input:checked + label.checked-icg-round1 {
  background-color: #fece43;
}

input:checked + label.checked-icg-round2 {
  background-color: #f39432;
}

input:checked + label.checked-icg-round3 {
  background-color: #ea5b0c;
}

.chosen-icg-round1 {
  background-color: #fece43;
}

.chosen-icg-round2 {
  background-color: #f39432;
}

.chosen-icg-round3 {
  background-color: #ea5b0c;
}

input::placeholder {
  font-style: italic;
}

input + label.hover-bg-icg-round1:hover {
  background-color: #fece43;
}

input + label.hover-bg-icg-round2:hover {
  background-color: #f39432;
}

input + label.hover-bg-icg-round3:hover {
  background-color: #ea5b0c;
}

button.hover-bg-icg-round1:hover {
  background-color: #fece43;
}

button.hover-bg-icg-round2:hover {
  background-color: #f39432;
}

button.hover-bg-icg-round3:hover {
  background-color: #ea5b0c;
}

/* A class that rotates an image element  */
.rotate {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  -ms-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animation when Points are added! */
.animate__animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}
.animate__fadeInUp {
  animation-name: fadeInUp;
}
@keyframes fadeInUp {
  from {
    /* opacity: 0; */
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.icg-bg-url1 {
  background-image: url("http://localhost:8080/gd_webbplats/webb/icg_frontend/images/icg-round1-bg.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(255, 255, 255, 0.7);
}

.icg-bg-url2 {
  background-image: url("http://localhost:8080/gd_webbplats/webb/icg_frontend/images/icg-round2-bg.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(255, 255, 255, 0.7);
}

.icg-bg-url3 {
  background-image: url("http://localhost:8080/gd_webbplats/webb/icg_frontend/images/icg-round3-bg.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(255, 255, 255, 0.7);
}

.icg-bg-o-url1 {
  background-image: url("https://www.icaregame.se/images/icg-round1-bg.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(255, 255, 255, 0.7);
}

.icg-bg-o-url2 {
  background-image: url("https://www.icaregame.se/images/icg-round2-bg.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(255, 255, 255, 0.7);
}

.icg-bg-o-url3 {
  background-image: url("https://www.icaregame.se/images/icg-round3-bg.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(255, 255, 255, 0.7);
}