.blue-container {
    padding: 20px;
    text-align: center;
    margin-top: 45px;
    border-radius: 5px;
}

.blue-container h1 {
    color: #393F4A;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

button.override {
    background-color: #F0F7FF;
    color: #A4B8C4;
    padding: 20px 20px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 20px;
    margin: 10px auto;
    width: 10%;
}

/* Style the search bar and button */
.search-form {
    margin-top: 10px;
}

.search-form input[type="text"] {
    padding: 8px;
    width: 200px;
}

.search-form button {
    padding: 8px 16px;
}

h2 {
    font-size: 17px; /* Adjust the font size as needed */
    color: #358285; /* Set the color to match the header */
    text-align: center;
    margin: 20px 0;
}

.container {
    text-align: center;
}

.button-label {
    background-color: #F0F7FF;
    color: #A4B8C4;
    padding: 15px 20px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    width: 300px;
    display: block;
    margin: 0 auto;
}

.toggle-checkbox {
    display: none;
}

.content {
    display: none;
    background-color: #F0F8FF;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    text-align: center;
    width: 300px;
    margin: 0 auto;
}

.toggle-checkbox:checked + .content {
    display: block;
}

.accordion {
    background-color: #358285;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 80%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-family: Poppins;
    font-size: 16px;
    margin: 20px 10%;
}

.active, .accordion:hover {
    background-color: #F0F8FF;
    color: #393F4A;
    font-size: 16px;
    font-family: Poppins;
}

.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    margin: auto 10%;
}

/* Issue: p elements do not take up full div */

.show{
    display: block;
}

.header{
    margin: 100px 10% 50px 10%;
}

/* specifying behaviour when on phone size screen */
@media screen and (max-width: 600px){
    /* the search word is no longer inside the button
    but it looks cool so will not fix */
    .accordion{
        margin: 20px 5%;
        width: 90%;
    }

    .panel{
        margin: auto 5%;
    }

    .header{
        margin: 100px 5% 20px 5%;
    }
}