body {
  font-family: 'Merriweather Sans', sans-serif;
  background-color: rgb(247, 247, 248);      
        }

        #result {
            font-size: 24px;
            margin-top: 40px;
            height: 8vh;
        }

        form {
            margin-top: 20px;
        }

        input[type="text"] {
            padding: 5px;
            font-size: 16px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        div{
          margin: 0;
          border: none;
          padding: 0;
        }
	
	.table-container {
 	max-height: 40vh; /* Set your desired maximum height */
  	overflow-y: auto;
    text-align: center;
 	}

    .table-guess-container {
        max-height: 40vh; /* Set your desired maximum height */
         overflow-x: hidden;  
         text-align: center;
         font-family: 'Merriweather Sans';
         width: 100%;
         margin: 0 auto;
       }
       .table-guess-container tbody {
        display: block;
        width: 100%;
        max-height: 40vh;
        overflow-y: auto;  
        }   
       
         .table-guess-container tr {
        display: table;
        width: 100%;
        table-layout: fixed;
        font-size: 3vh;
    }
        th,
        td {
            padding: 8px;
            text-align: center;
            position: sticky;
        }

        .failed-attempt {
            background-color: lightpink;
            border: 1px solid black;
            padding: 5px;
            margin-top: 5px;
        }

        .sortable {
            cursor: pointer;
        }
        
        .countdown {
            margin-top: 20px;
            text-align: center;
        }

        .countdown span {
            font-size: 24px;
            font-weight: bold;
        }

        #Gameover {
            background-color: yellow;
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px;
            margin: 0;
}

#Gameover div {
    color: red;
    font-size:2.5vh;
    align-items: center;
    text-align: center;
}

#Gameover p {
    color: rgb(0, 0, 0);
    font-size: 2.5vh;
    align-items: center;
    text-align: center;
}
.twinagram{
  color: rgb(255, 0, 0);
  font-size: 3.5vh;
  align-items: center;
  text-align: center;  
}
.top-line {
    display: flex;
    justify-content: center;
    color: #000000; /* Text color for the columns */
    /* padding: 5px;*/
    height: 1.5vh
}



.left-column {
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 4vh;
    font-family: 'Merriweather Sans';
    margin-top: 1vh; 
    }

.right-column {
    width: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2vh;
    font-family: 'Merriweather Sans'; /* Use 'Roboto' as the font family */
    margin-top: 1vh;
}


.dropbtn {
    background-color: rgb(247, 247, 248);
    color: rgb(0, 0, 0);
    /* padding: 1em; */
    font-size: 1em;
    border: none;
    cursor: pointer;
  }
  
  .dropbtn:hover, .dropbtn:focus {
    background-color: rgb(247, 247, 248);
  }
  
  .dropdown {
    float: right;
    position: relative;
    
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {background-color: #ddd;}
  
  .show {display: block;}


  /* Style for the 2nd line buttons pop-up */

  .second-line {
    display: flex;
    justify-content: center;
    background-color: #f5edd6; /* You can change the background color as desired */
    color: #000000; /* Text color for the columns */
    padding: 10px;
  }

  .secondleft-column {
    width: 50%;
    display: flex;
    justify-content: right;
    align-items: right;
}

.secondright-column {
    width: 50%;
    display: flex;
    justify-content: left;
    align-items: left;
}


.second-line-button{
  font-size: 1em;
  font-weight: var(--normal-weight);
  border-radius: 5px;
  }


  /* Style for the floating pop-up */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    z-index: 2;
    display: none; /* Initially hidden */
  }
  
.popupPrev {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    padding: 2px;
    text-align: center;
    z-index: 2;
    display: none; /* Initially hidden */
    }  
    
.popupPrevGO {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    padding: 2px;
    text-align: center;
    z-index: 2;
    display: none; /* Initially hidden */
    }  
    
.rectangular-popup {
    height: auto; /* Auto height */
    max-height: 80vh; /* Maximum height if needed */
    width: 60vw; /* Adjust the width as needed */
    padding: 10px; /* Adjust padding as needed */
}

  .popup h1 {
    align-items: flex-start; /* Aligns the text to the top */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
  }

  #Prevgame
  {
    align-items: flex-start; /* Aligns the text to the top */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
  }
  
  #ClueTextContainer {
    width: 100vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns the text to the top */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    
  }

  #Cluetext {
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
    line-height: 1; /* Ensures the text is snug to the top */
    /*font-size: 16px;  Adjust the font size as needed */
    width: 90vw;
    height: 10vh;
  }

.gametextClue {
  text-align: center;
  font-family: 'Merriweather Sans'; 
  font-size: 2.5vh;
}
  .close-popup {
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
    font-size: 16px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
}
td {
    text-align: center;
    padding: 10px;
}

.centered-container {
    text-align: center;
    padding: 0;
}

.share-button {
    background-color: #4CAF50; /* Green background color */
    color: white; /* Text color */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 3vh;
    transition: background-color 0.3s;
    margin: 10px; /* Add some margin for spacing */
    font-family: 'Merriweather Sans'
}

.share-button:hover {
    background-color: #45A049; /* Darker green on hover */
}

.submit-button {
  background-color: #4c66af; /* Green background color */
  color: white; /* Text color */
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 2.5vh;
  transition: background-color 0.3s;
  margin: 10px; /* Add some margin for spacing */
  font-family: 'Merriweather Sans'
}

.swirl-in-fwd {
	-webkit-animation: swirl-in-fwd 1.6s ease-out both;
	        animation: swirl-in-fwd 1.6s ease-out both;
}


 @-webkit-keyframes swirl-in-fwd {
    0% {
      -webkit-transform: rotate(-540deg) scale(0);
              transform: rotate(-540deg) scale(0);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate(0) scale(1);
              transform: rotate(0) scale(1);
      opacity: 1;
    }
  }
  @keyframes swirl-in-fwd {
    0% {
      -webkit-transform: rotate(-540deg) scale(0);
              transform: rotate(-540deg) scale(0);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate(0) scale(1);
              transform: rotate(0) scale(1);
      opacity: 1;
    }
  }
  

   .animateHint {
    font-size: x-large;
    -webkit-animation: flip-in-hor-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-hor-bottom 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

 @-webkit-keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}

.message-container {
  text-align: center;
  font-size: 4vh;
  font-family: 'Merriweather Sans' /* Use 'Roboto' as the font family */
}

.gametext {
  text-align: center;
  font-size: 4vh;
  font-family: 'Merriweather Sans'; /* Use 'Roboto' as the font family */
  margin: 0; /* Remove any margin within the gametext */
  padding: 0; /* Remove any padding within the gametext */
  line-height: 1; /* Ensures the text is snug to the top */ 
  /*white-space: nowrap;  Prevent wrapping */
}



#popup-content{
  text-align: center;
  font-size: 2.5vh;
  font-family: 'Merriweather Sans'; /* Use 'Roboto' as the font family */
  margin: 0; /* Remove any margin within the gametext */
  padding: 0; /* Remove any padding within the gametext */
  line-height: 1; /* Ensures the text is snug to the top */

}
  
  #result{
    min-height: 8vh;
    text-align: center;
    font-size: 2.5vh;
    color: rgb(38, 141, 34); 
    align-items: center;
  }
  #guessForm{
    margin-top: -26px;  
    height: 5vh;
    max-width: 100%;
    width: 100%;
    text-align: center;
    align-items: center;
    
  }

  #guessInput{
    width: 100%;
    font-size: 3vh;
    text-align: center;
    margin-top: 1vh;
    /*margin: 0 auto; */
  }
  
  #Hint1{
    font-size: 3vh;
  }
  #Hint2{
    font-size: 3vh;
  }
  #Hint3{
    font-size: 3vh;
  }

#congratulations{
  font-size: 3vh;
}


  #attemptHeader {
    width: 20%;
}

#guessHeader {
    width: 80%;
}
#failedAttempts td:nth-child(1) {
  width: 20%;
}

#failedAttempts td:nth-child(2) {
  width: 80%;
}

#countdownTimer{
  font-size: 5vh;
}

#insertAttempts{
  font-size: 3vh;
  color:#006a05
}


#hintgo{
  font-size: 3vh;
  color:#0000ff
}


#Hintstable {
  width: 60%;
  overflow: hidden;
  margin: 0 auto; /* This centers the table */
  }

#Hintstable td {
  width: 20%;
  border-color: #ffffff;

}

.shake {
  animation: shake 0.6s ease-in-out infinite;
  border: 4px solid #ccc;
  outline: 4px solid transparent;
}

@keyframes shake {
  0% {
      transform: translateX(0);
      border-color: #ccc;
  }
  25% {
      transform: translateX(-10px);
  }
  50% {
      transform: translateX(10px);
  }
  75% {
      transform: translateX(-10px);
  }
  100% {
      transform: translateX(0px);
      border-color: red;
  }
}

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#copyright{
  font-size: 8px;  
}


/* Styling for the modal */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 2px solid #000; /* Black border */
    border-radius: 15px; /* Rounded corners */
    width: 70%; /* Could be more or less, adjust as needed */
}

/* Style for the close button */
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}