body {
    font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #1b2838;
}
h1, h2, h3,p {
font-family: 'Roboto', sans-serif;
}
#tag_searchResults {
margin-top: 10px;
}

.searchResultButton  {
  margin: 5px;
  padding: 5px 10px;
  background-color: #00A36C;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}
.gameResultButton {
  color: rgba(0, 0, 0);
  margin: 5px;
  padding: 5px 10px;
  background-color: #ffae00;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}
#minuteInput{
  display: none;
}

#minuteInputSet1 ,#minuteInputSet2,#minuteInputSet3
{
    display: none;
}

/* Style for modal window */
/* The modal container */
/* The modal container */
.modal {
display: none; /* Hide the modal by default */
position: fixed; /* Position the modal */
z-index: 1; /* Set the z-index to ensure it appears on top of other content */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: hidden; /* Hide the overflow */
background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
transition: opacity 0.3s ease; /* Smooth fade-in effect */
}

/* Modal content */
.modal-content {
background-color: #fff; /* White background */
margin: 5% auto; /* Center the modal vertically and horizontally */
padding: 20px;
border-radius: 8px;
width: 80%; /* Set the width */
max-width: 500px; /* Max width of the modal */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
animation: slide-in 0.3s ease; /* Slide-in animation */
} 

/* Close button */
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #aaa;
cursor: pointer;
transition: color 0.3s ease;
}

.close:hover,
.close:focus {
color: #333; /* Change color on hover */
}

/* Slide-in animation */
@keyframes slide-in {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}



.game {
width: 50%; /* Each game takes up 50% of the container width */
box-sizing: border-box; /* Include padding and border in the width */
padding: 10px; /* Add padding to each game */
}
.game-text-container {
display: inline-block; /* Display each game name container inline */
margin-right: 10px; /* Add margin between each game name */
border: 1px solid #ccc; /* Add border */
background-color: #f9f9f9; /* Add background color */
padding: 5px; /* Add padding */
}

.searchResultButton:hover {
  background-color: #006d49;
}
.gameResultButton:hover {
  background-color: #aa8330;
}
.container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  text-align: center;
}

form {
  text-align: center;
}

input[type="text"] {
  width: 80%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

input[type="checkbox"] {
  margin-right: 5px;
}

button {
  padding: 5px 10px;
  background-color: #243e51;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 2px;
}

button:hover {
  background-color: #64bbed;
}

.result {
  margin-top: 20px;
}


@media only screen and (max-width: 767px) {
    /* Add your mobile-specific CSS here */
    .image-container , .radio-container {
    
        flex-wrap: wrap;
        justify-content: center; /* Center items horizontally */
        align-items: center; /* Center items vertically */
        }
}
@media only screen and (min-width: 768px) {
    /* Add your desktop-specific CSS here */
    .image-container , .radio-container {
    
    
        display: flex;
        flex-wrap: wrap;
        }
}

 
 
 


/* Hide the default radio buttons */
input[type="radio"] {
    display: none;
}

/* Style the label to look like a button */
label {
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(112, 112, 112);
  border: 1px solid rgb(92, 92, 92);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  color: #ffffff;
}

/* Style the label when the radio button is checked */
input[type="radio"]:checked + label {
    background-color: #73ae22; /* Example color for checked state */
    color: #fff; /* Example text color for checked state */
}
.radio-container {
    display: flex;
    flex-wrap: wrap;
}

.radio-column {
    flex: 1;
    max-width: 50%;
}