*{
    /* border-style: solid; */
}

h1#title{
    /* display: inline; */
    /* padding-left: 0.70em; */
}

#info-icon{
    width: clamp(25px, 2vw, 50px);
    margin-left: clamp(0.25em, 1vw, 0.5em);
    cursor: pointer;
}

#info-icon:hover{
    /* border: 10px red solid; */
    /* background-color: #fff; */
    content: url("../images/info-black.png");
}

#badge-dialog{

    /*  When the Margin is changed universally to 0 then the dialog modal will not be centered.
    So I have to reset the margin  */
    margin: auto;
    
    background-color: beige;
    border-radius: 50px;
    padding: 30px 25px 0px 25px;
    
}

#badge-dialog::backdrop{
    background-color: black;
}

#badge-dialog:focus{
}

.highlightCloseButton{
    border-color: crimson;
    background-Color: white;
    color: darkred;
    letter-spacing: 2;
    scale: 1.3;
    /* transform: translate(-10px, 80px); */
    transition: 2s;
}

#dialog-close-button{

    font-family: Cheese;
    font-size: 20px;

    padding: 0.2em 0.55em;
    border-width: 0.5em;
    border-radius: 100px;

    /* Top Right Corner of Dialog*/
    /* position: absolute; */
    top: 0.75em;
    right: 0.75em;
    float: right;
    cursor: pointer;
}

#badge-group{
    display: flex;
    flex-direction: row;
    gap: 2em;
}

#badge-group h1{
    font-family: Cheese;
    font-size: 3.0vw;
    /* font-size: 2.0rem; */
    font-weight: 100;
    
    color: navy;
    text-decoration: none;
}

#badge-group img{

    width: 50%;
    height: 41.25%;
    /* scale: 75%; */

    z-index: 2; 
    scale: 0.95;

}

#bible-section img{
    scale: 1.1;
}

/* #heart-section img{
    scale: 68%;
    margin-top: -28%;
    margin-bottom: -30%;
    z-index: 2;
}

#star-section img{
    scale: 62%;
    margin-top: -28%;
    margin-bottom: -28%;
    z-index: 2;
} */

#badge-group p{

    font-family: Candy;
    /* font-size: 1.5rem; */
    font-size: 2.5vw;
    font-weight: bolder;
    
    background-color: black;
    color: #628B48;
    color: deepskyblue;
    color: goldenrod;
    
    border-radius: 2em 2em 1em 1em;
    padding: 0.65em;
    border: goldenrod 4px solid;
    /* box-shadow: 1px 1px 1px 1px black; */
    /* margin-top: -30px; */
}

#bible-section, #heart-section, #star-section{
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
    /* min-width: 436px; */
    /* height: 500px; */
}





/* I realize that I need the meta tag for Media Queries to work! */
/* @media screen and (width <= 1024px) { */
@media screen and (orientation: portrait) {
        
    /* hide scroll bars */
    #badge-dialog::-webkit-scrollbar{
        display: none;
    }

    #info-icon{
        /* background-color: yellow; */
        /* width: clamp(12px, 1.5vw, 24px); */
        width: 24px;
        /* margin-left: clamp(0.5em, 1vw, 1em); */
        cursor: pointer;
    }

    #badge-dialog{
        border-radius: 20px 20px 50px 50px;
    }

    #badge-dialog::backdrop{
        background-color: black;
    }

    #dialog-close-button{
        position: fixed;
        left: 0.75em;
        top: 0.75em;
        z-index: 10;
    }
       
    #badge-group{
        flex-direction: column;
    }
    
    #bible-section{
        margin-top: 35px;
    }

    #badge-group h1{
        font-size: 8vw;
        margin-top: 30px;
        text-decoration: overline;
    }
    
    #badge-group p{
        font-size: 7vw;
        max-width: 450px;
        margin: auto;
    } 

}