*{
    margin: 0;
    padding: 0;

}


/* Styling for the main modal container */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* Full width */
    height: 70%; /* Full height */
    background-color: rgba(0,0,0,0.4); /* Black background with opacity */
    padding-top: 100px; /* Location of the box */
    margin-top: auto;
    margin-bottom: auto;
}

/* Styling for the modal content box */
.modal-content {
    background-color: #fefefe;
    margin: auto; /* Center horizontally */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    text-align: center;

}

/* The Close Button (x) */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

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

/* Container for the buttons using Flexbox */
.button-container {
    display: flex; /* Enables flexbox layout */
    justify-content: space-around; /* Distributes space evenly between and around items */
    margin-top: 20px;
    gap: 10px; /* Adds space between buttons */
}

/* Styling for the individual buttons */
.choice-btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    flex-grow: 1; /* Makes buttons grow to fill the container width equally */
}

.title{
    margin-top: 100px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color:white;
}
.description{
    margin-top: 50px;
    font-size: 20px;
    text-align: center;
    color: white;
    margin-left: 40px;
    margin-right: 40px;

}

html{
    background-color: #38240D;
}
/* The Dropdown Listbox (The Picker) */
.custom-select::picker(select) {
  appearance: base-select;
  background-color: #f4f4f4;
  border: 1px solid #aaa;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 5px;
}
.modern
/* Individual Options */
option {
  padding: 10px;
  border-radius: 4px;
}

option:hover {
  background-color: #007bff;
  color: white;
}
/* Base styling for the container and label */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

/* The Select Element */
.custom-select {
  appearance: base-select; /* Enables modern customization in 2025 browsers */
  width: 80%;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;

}

.chooseLabel{
    margin-top: 100px;
    color: white;
    text-align: center;

}

.macImage{
    display: block;
    width: 50%;
    height: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

.custom-select-wrapper{
    display: flex;
  
  /* Center horizontally */
    justify-content: center; 
  
  /* Center vertically */
    align-items: center; 
}
.btn {

    background-color: #007bff; /* Primary Blue */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer; /* Shows hand icon on hover */
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #0056b3; /* Darker blue */
}

.btn:active {
    transform: scale(0.98); /* Slight shrink on click */
}
.container {
    margin-top: 50px;
    display: flex;
    justify-content: center; /* Centers horizontally */
  /* Optional: Add align-items: center; for vertical centering */
}
@media all and (max-width: 768px){

    .modal-content {
        width: 30%; 
        height: 80%;
    }
    .button-container{
        display: flex;
        gap: 40px;
        flex-direction: column;
    }


}