body {
    background-color: rgb(246, 234, 236);
    color: rgb(0, 0, 0);
    font-family: Georgia, serif;
    overflow-wrap: break-word
}

button 
    background-color: rgb(246, 234, 236);
    color: black;
    border: 2pt solid black;
    padding: 20px 20px; 
    text-align: center;
    text-decoration: none; /* remove default underline */
    display: inline-block;
    font-size: 16px;
    cursor: pointer; /* make it look clickable */
    transition-duration: 0.4s; /* smooth transition for hover effect */
    border-radius: 8px /* round the corners */
}

button:hover {
    background-color: #000000;
    color: white 
}

.title {
    text-align: center;
    padding-top: 3vw;
    font-size: clamp(32px, 3vw, 64px);
    font-weight: 300
}

.bottom-blob {
    padding-left: 8vw;
    position: fixed;
    bottom: 0
}

.blurb {
    font-size: clamp(32px, 4vw, 92px);
    padding-top: 3vw;
    padding-bottom: 6vw;
    margin-right: 25vw
}

.appointment {

}


@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(59, 54, 52);
        color: rgb(246, 234, 236);
        font-family: Georgia, serif;
        overflow-wrap: break-word
    }

    button {
        background-color: rgb(59, 54, 52);
        color: white;
        border: 2pt solid white;
        padding: 20px 20px; 
        text-align: center;
        text-decoration: none; /* remove default underline */
        display: inline-block;
        font-size: 16px;
        cursor: pointer; /* make it look clickable */
        transition-duration: 0.4s; /* smooth transition for hover effect */
        border-radius: 8px /* round the corners */
    }
}