:root {
    --color1: #E8EEF2;  /* Alice Blue */
    --color2: #D6C9C9;  /* Timberwolf */
    --color3: #C7D3DD;  /* Columbia Blue */
    --color4: #77B6EA;  /* Argentinian Blue */
    --color5: #37393A;  /* Onyx */
}

body {background-color: #E8EEF2;}
h1, h2 {font-family: "Quicksand", serif;}
p {font-family: "Montserrat", sans-serif;}

button {
    background-color:#77B6EA;
    color: #37393A;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
}
button:hover {background-color: #4C99C0;}

main {
    display: flex; justify-content: center; gap: 1rem;
    margin-left: auto; margin-right: auto; margin-top: 1rem; margin-bottom: 1rem;
}

main section {
    text-align: center; padding: 1rem;
    background-color: var(--color2); border-radius: 15px;
}

.joke-container{width: 500px;}
.joke-controls {width: 200px;}

footer {text-align: center; margin-top: 3rem; font-style: italic;}
header {text-align: center; margin-top: 4rem; margin-bottom: 4rem;}
header p{text-decoration: underline;}

@media (max-width: 700px) {
    main {
        flex-direction: column;
        align-items: center;
        padding: 0 1rem;
    }

    .joke-container,
    .joke-controls {
        width: 100%;
        max-width: 500px;
    }

    header {
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    footer {
        margin-top: 2rem;
        padding: 0 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.3rem;
    }
}