:root 
{
    --lightamethyst: #DCB1EC;
    --amethyst: #C595D6;
    --darkamethyst: #69337D;
    --mainWidth: 1200px;
    
}

html
{
    background-color: lightblue;
}

body
{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: white;
}

a
{
    color: blue;
}

a:visited
{
    color: blue;
}

.frontPage
{
    font-size: larger;
    color: blue;
    text-align: center;
}

ul
{
    max-width: min(550px, 80vw);
}

li
{
    line-height: 130%; 
    margin-bottom: 0.11in;
}

.ctr
{
    display: block;
    margin: 0 auto;
    max-width: 90vw;
}

h1
{
    font-size: xx-large;
    color: white;
    background-color: blue;
    font-weight: bold;
    width: 80vw;
    line-height: 110%;
    width: var(--mainWidth);
    max-width: 95vw;
    margin: 0 auto;
    margin-top: 10px;
    padding-left: 0px;
    padding-bottom: 10px;
    padding-top: 20px;
    padding-right: 0px;
    clear: both;
    text-align: center;
}


h2
{
    font-size: x-large;
    color: white;
    background-color: blue;
    font-weight: bold;
    width: var(--mainWidth);
    max-width: 100vw;
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 20px;
    padding-right: 10px;
    clear: both;
    text-align: center;
}

h3
{
    color: blue;
    font-weight: bold;
    font-size: xx-large;
}

h4
{
    color: royalblue;
    font-weight: bold;
}

pre
{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: medium;
    text-align: center;
}

td
{
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

#beehive
{
    border-width: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 400px;

    max-width: min(80vw, 80vh);
    max-height: min(80vw, 80vh);
}

#clickMessage
{
    animation: cssAnimation 3s 5s infinite ease-in-out;
    visibility: hidden;
    text-align: center;
    color: red;
}

@keyframes cssAnimation
{
    to
    {
        visibility: visible;
        color: red;
        background-color: white;

    }
}

.scale50
{
    transform: scale(0.5);
}

.quick
{
    color: black;
    background-color: lightgrey;
    font-size: medium;
    padding: 8px;
    border-radius: 8px;
    margin: 4px;
}

.buttons
{
    background-color: black;
    padding: 12px;
    margin: 0px auto;
    
    max-width: 99vw;
    overflow: auto;
    
}

.active
{
    background-color: white;
}

.disabled
{
    background-color: grey;
}

.para 
{
    max-width: min(800px, 90vw);
    line-height: 115%;
    font-size: x-large;
    color: blue;
    font-weight: bold;
}

.about 
{

    max-width: min(800px, 90vw);
    line-height: 115%;
    font-size: x-large;
    color: blue;
    font-weight: bold;
    text-align: justify;
}



@media (min-width: 500px)
{
    .para { line-height: 170%; }
}

imgO { outline: 2px solid black; }

hr 
{
    height: 5px;
    background-color: red;
}

.wrapper
{
    width: 100vw;
}

.section 
{
    width: var(--mainWidth);
    max-width: 96vw;
    margin: 0 auto;
    padding: 10px;
}

.sectionBox 
{
    width: var(--mainWidth);
    max-width: 100vw;
    margin: 0 auto;
    border: 4px solid blue;
    overflow: auto;
    scrollbar-width: none;
    margin-top: 10px;
}

.secPhotoL {
    width: 300px;
    max-width: 45vw;
    object-fit: scale-down;
    margin: 10px;
    float: left;
}

.secPhotoR 
{
    width: 300px;
    max-width: 45vw;
    object-fit: scale-down;
    margin: 10px;
    float: right;    
}

.medPhoto
{
    width: 400px;
    max-width: 100vw;
    height: auto;
    margin: 0 auto;
}

.creditText
{
    font-size: small;
    line-height: 110%;
}

.creditFoot
{
    font-size: medium;
    line-height: 110%;
    color: blue;
    width: var(--mainWidth);
    max-width: 96vw;
    margin: 0 auto;
    padding: 10px 0 10px 0;
    background-color: aliceblue;
}

@media (max-width: 768px)
{
    .about
    {
        font-size: medium; /* Adjust the font size for mobile */
    }

    .creditFoot
    {
        font-size: small;
        
    }

    h3
    {
        font-size: x-large;
    }
}