.banner {
    background-image: url(/img/kids-at-table.jpg);
    background-size: cover;
    color: var(--white);
    display: flex;
        justify-content: center;
        align-items: center;
    height: 500px;
}

.shadow {
    text-shadow: 2px 2px var(--dark-purple);
}

#panel1 {
    color: var(--med-dark-purple);
    display: flex;
        flex-direction: column;
        align-items: center;
    padding: 0px 20px;
    text-align: center;
}

#panel1 h1 {
    color: var(--dark-purple);
}

#panel1 h1, #panel1 h2 {
    padding: 23.4px 0px;
}

#panel1 h1, #panel1 h2, #panel1 p {
    width: 50%;
}

.rounded-button:link, .rounded-button:visited {
    background-color: var(--dark-purple);
    border: 2px solid var(--dark-purple);
    transition: 0.2s;
    border-radius: 20px;
    color: var(--white) !important;
    margin: 20px;
    padding: 10px;
    text-decoration: none;
}

.rounded-button:hover, .rounded-button:focus {
    background-color: var(--white);
    color: var(--dark-purple) !important;
}

.rounded-button:active {
    background-color: var(--light-purple);
}

.rounded-button p {
    width: 100% !important;
    margin-bottom: 0px;
}

@media only screen and (max-width:992px) {
    #panel1 h1, #panel1 h2, #panel1 p {
        width: 75%;
    }
}

@media only screen and (max-width: 600px) {
    #panel1 h1, #panel1 h2, #panel1 p {
        width: 100%;
    }
}