body, h1, h2, h3, h4, h5, h6, button, title  {
    font-family: 'Dark Ages', sans-serif;
}
.menu {
    display: flex;
    justify-content: center;

}
.top-menu {
    background-color: white;
    overflow: hidden;
}

.top-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

}

.top-menu li {
    float: left;

}

.top-menu li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.top-menu li a:hover {
    background-color: #ddd;
    color: black;
}
.container {
    display: flex;
    justify-content: space-between;
    max-height: fit-content;
}
.column {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    max-height: fit-content;
    float: left;
    width: 33.33%;
}
@media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
}
#cardContainer img {
    margin-top: 20px;
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: auto;   /* Maintain aspect ratio */
    max-height: 100%;
}
#deckImage {
    margin-top: 20px;
    max-width: 100%; /* Ensure the image doesn't exceed its container width */
    height: auto;   /* Maintain aspect ratio */
    max-height: 100%;

}
.column:nth-child(1) {
    display: flex;
    flex-direction: column;
    text-align: center;
    vertical-align: text-top;
    max-height: fit-content;

    
}
.column:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: normal;
    vertical-align: text-top;
    
}
.column:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: text-top;
}
.styled-button {
    position: relative;
    margin-top: 20px;
    width: 150px; /* Set the width and height to be equal */
    height: 150px;
    border-radius: 75%; /* Make the buttons round */
    background-color: #01444f; /* Set black background color */
    border: 2px solid #01444f; /* Add white border */
}
.styled-button img {
    max-width: 100%;
    max-height: 100%;
} 
.styled-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center;
}
#shuffleBtn:disabled {
    background-color: #ccc; /* Set grey background color */
    color: #fff; /* Set white text color */
    border: 1px solid #fff; /* Add white border */
}
#drawBtn:disabled {
    background-color: #ccc; /* Set grey background color */
    color: #fff; /* Set white text color */
    border: 1px solid #fff; /* Add white border */
}



.requestDescription {
    text-align: center;
    padding: 10px 0; 
}

header {
    text-align: center;
    background-color: #333; /* Set header background color */
    color: white; /* Set header text color */
    padding: 10px 0; /* Add some padding for spacing */
}
.header-text {
    margin: 0;
}
a.backLink:link {
    color: #333;
}
a.backLink:visited {
    color: #333;
}
a.backLink:hover {
    color: #01444f;
}
a.backLink:active {
    color: #333;
}


.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
form {
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 1rem;
    
    border: 4px solid #333;
    background-color: #01444f;
    color: #fff;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 50%;
  }

.label {
    display: inline-block;
    font: bold 1.5rem;
    margin-bottom: 0.5rem;
}  

.submitFormBtn {
    background-color: #01444f;
    color: #fff;
    width: 50%;
    padding: 0.5rem 0.75rem;
}

.button-container-div {
    text-align: center;
    margin: auto;
    width: 100%;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
  cursor: text;

}


.thankyouPage {
    text-align: center;
    place-items: center;
}
.thankyouSubHdng{
    padding-top: 10%;
}

#backBtn img {
    max-width: 100%;
    max-height: 100%;
    }
    
    #backBtn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center;
    }
    
    #backBtn {
    position: relative;
    margin-top: 20px;
    width: 150px; /* Set the width and height to be equal */
    height: 150px;
    border-radius: 75%; /* Make the buttons round */
    background-color: #01444f; /* Set black background color */
    border: 1px solid goldenrod; /* Add white border */
    }

footer {
    text-align: left;
    background-color: white; /* Set footer background color */
    color: #333; /* Set footer text color */
    width: 95%; /* Make the footer span the full width of the page */
    bottom: 0; /* Align the footer at the bottom */
    font-size: 10px;
}

@media screen and (max-width: 600px) {
    /* Existing styles for mobile view */
    .regular-menu {
        display: none; /* Initially hide the regular menu items */
    }

    .additional-menu {
        list-style-type: none;
        padding: 0;
        margin: 0;
        text-align: center; /* Center the additional menu items */
    }

    .additional-menu li {
        display: inline-block;
        margin: 0 10px; /* Add some spacing between menu items */
    }

    .additional-menu li a {
        color: #333;
        text-decoration: none;
        font-size: 16px; /* Adjust font size for mobile */
    }
}

@media screen and (max-width: 600px) {
    .button-container {
        display: flex;
        justify-content: center;
        margin-bottom: 0px; /* Add some margin between the buttons and the rest of the content */
    }

    .button-container .styled-button {
        width: 100px; /* Adjust the button width for mobile */
        height: 100px; /* Adjust the button height for mobile */
        margin: 5px; /* Add some margin for spacing between buttons */
    }

    .styled-button img {
        max-width: 100%; /* Adjust the max-width of the image */
        max-height: 100%; /* Adjust the max-height of the image */
        object-fit: cover;
    }

    .button-container .styled-button span {
        font-size: 10px; /* Adjust the font size for the button text on mobile */
        color: #333;
    }

    .container {
        flex-direction: column;
        align-items: center;
    }

    .column {
        width: 100%;
        border: none;
        order: 1; /* Set the default order for all columns to 1 */
    }
    .column:nth-child(3) {
        display: none; /* Hide the column containing the buttons for mobile view */
    }
    .column:nth-child(1) {
        order: 2; /* Change the order for the first column to 2 */
    }
    .styled-button:disabled {
        background-color: #ccc; /* Set grey background color */
        color: #fff; /* Set white text color */
        border: 1px solid #fff; /* Add white border */
    }
}

@media screen and (min-width: 601px) {
    .button-container {
        display: none; /* Hide the button container when screen width is greater than 600 pixels */
    }
    .additional-menu {
        display: none; /* Hide additional menu items */
    }
}

#deckImage {
    transition: transform 0.1s ease-in-out;
}