: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;
    border: none;
    background-color: rgb(239,237,237);
    margin: 0 auto;
    width: var(--mainWidth);
    max-width: 100vw;
}

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;
}



.redFlash
{
    color: white;
    background-color: red;
    margin: 0 auto;
}

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

p
{
    padding-top: 8px;
    padding-bottom: 8px;
    max-width: 98vw;
    max-width: 500px;
    margin: 0 auto;
    font-size: large;
    text-align: center;
    line-height: 110%;
    color: black;
}

pMed 
{
    font-size: large;
    color: black;
}

@media (min-width: 768px) /* For desktop */
{
    p
    {
        font-size: x-large;
        max-width: 500px;
    }
    pMed { font-size: x-large; }
}

.b 
{
    font-weight: bold;
}

.redB {
    background-color: red;
}

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

pH1 {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: medium;
    color: white;
    background-color: red;
    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;
    font-size: x-large;
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

h5 {
    color: black;
    font-weight: bold;
    font-size: large;
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    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;
}

#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-top: 12px;
    padding-bottom: 12px;
    margin: 0px auto;
    max-width: 100vw;
    overflow: auto;
    text-align: center;
    width: var(--mainWidth);
    line-height: 260%;
}

.nowrap {
    white-space: nowrap;
}

.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%;
    }
}

.fit400Mob {
    width: 400px;
    height: auto;
    margin: 0 auto;
    max-width: 80vw;
}


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;
    padding: 0 0 0 0;
    float: left;
}

.secPhotoR {
    width: 300px;
    max-width: 45vw;
    object-fit: scale-down;
    margin: 10px;
    padding: 0 0 0 0;
    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;
    }
}