@font-face {
    font-family: "Cheese";
    src: url(../../fonts/GRILCB.TTF);
}

@font-face {
    font-family: "Candy";
    src: url(../../fonts/CANDRB.TTF);
}

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

body{
    text-align: center;
    min-width: 300;
}

h1#title{
    font-family: "Cheese";
    font-size: clamp(2.25rem, 4vw , 5rem);
    font-weight: 100;
    text-decoration: underline;
    margin: 0.1em 0;
}

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

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

.scrambled-button-group{
    width: 55%;
    margin: 0 auto;
}

.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) {
/* @media screen and (width <= 1000px) { */
 
    .scrambled-button-group{
        width: 100%;
    }
}

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

    .scrambled-group{

    }

}