*{
    /* border-style: solid; */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 330;
}

#page-title{
    font-weight: 100;
    font-family: "Cheese";
    font-size: clamp(2rem, 7vw, 5rem);

    text-decoration: underline;
    margin: 0.25em 0.1em 0.25em;
}

.directions{
    font-family: "Candy";
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: bolder;
    color: #82D173;
    color: darkcyan;
}

.menu-group{
    width: fit-content;
    /* border: solid; */
    display: flex;
    /* justify-content: start;
    align-items: left; */
    gap: 1em;

}

#verse-menu, #season-menu, #people-menu{
    font-family: "Candy";
    font-size: clamp(2.0rem, 4vw, 3rem);
    font-weight: 550;
    background-color: lightyellow;
    color: indianred;
    text-align: center;
    padding: 5px;
    margin-bottom: 0.5em;
    border: 0.1em solid black;
    border-radius: 15px;
    cursor: pointer;
}

.button-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;

    width: 100%;
    /* margin-top: 1.5em; */
}

.buttons{
    /* width: 11em; */
    
    font-family: "Cheese";
    font-size: clamp(1.5rem, 5vw, 3rem);
    
    background-color: #9ea9c7;
    color: black;
    
    /* Top Left-Right Bottom */
    padding: .25em;
    border-radius: 10px;
}

/* #memorize-button, #hide-button{ */
.buttons{
    box-shadow: 0 9px black;
    cursor: pointer;
}

/* #memorize-button:active, #hide-button:active{ */
.buttons:active{
    box-shadow: 0 2px black;
    transform: translateY(5px);
}

#theme-verse{
    font-family: "Candy";
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: bolder;

    background-color: white;
    color: goldenrod;
    
    width: fit-content;
    margin: auto;
    margin-top: 20px;
    padding: 10px 20px;

    border-radius: 5px;
}

#progress, #scripture{
    font-family: "Candy";
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 550;
    color: navy;
    text-align: center;
    margin: 10px;

}

/* .scrambled-button-group{
    width: 55%;
    margin: 0 auto;
    visibility: "hidden";
} */

/* .word-buttons{
    background-color: orange;

    font-family: "Verdana, Geneva, Tahoma, sans-serif";
    font-size: clamp(1.25rem, 3vw, 3rem);  /* min, adjustable, max
    
    color: darkgreen;
    background-color: lightgreen;

    padding: 0.25em 0.5em;
    margin: 0.25em;

    border: solid black 0.125em;
    border-radius: 0.5em;
} 
*/


@media screen and (orientation: portrait) {
    .menu-group{
        flex-direction: column;
    }
/* @media screen and (width <= 1000px) { */
 
    /* .scrambled-button-group{
        width: 100%;
    } */

    /* .button-group{
        flex-direction: column;
    } */
}

/* What about large displays to an audience? */
/* @media screen and ( width >= 1800px ){

    .scrambled-group{

    }

} */