main {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0vw;
    padding: .5vw 3vw 0vw 3vw;
    font-family: sans-serif;
    font-size: 24px;
    text-align: center;
    color: #777;
    position: relative;
    max-width: 1000px;
}

.gradient {
    /* background-image: linear-gradient(#123, #111); */
    /* background-image: linear-gradient(#333, #222); */
    /* background-color: #060606; */
    /* background-color:#222; */

}

h1,
h2 {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-style: italic;
    color: #bbb;
}

.subhead {
    margin: 1em 0px;
}

.subtitle {
    text-transform: uppercase;
    text-align: left;
    font-style: italic;
    margin-bottom: 20px;
}

h2 a {
    color: #888;
    text-decoration: none;
}

h2 a:hover {
    color: #e472c4 !important;
}

.button:hover {
    border: 2px #e472c4 solid !important;
}

.info {
    background-color: #444;
}

.info p {
    margin-top: 2.5em;
}

.info img {
    padding-bottom: .4em;
}

.info p:nth-child(2) {
    margin-top: 2em;
}

.info {
    padding-bottom: 1.6em !important;
}

.examples {
    background-color: #111;
}

.about {
    background-color: #333;
    position: relative;
    z-index: 2;
    margin-top: 1.8em;
    padding: 20px;
    text-align: left;
    border-radius: 1.8em;
    font-size: 1em;
    color: #aaa;
    margin-bottom: 1.5em;
    box-shadow: 6px 6px 14px rgba(0, 0, 0, .1);
}

#features li {
    list-style-image: url(../tri/bul.png);
}

#applications li {
    list-style-image: url(../tri/bul.png);
}

.aboutBar {
    text-align: left;
    position: relative;
    padding: 5px;
    border-bottom: #888 solid 1px;
    color: #bbb;
}

.aboutTitle {
    display: inline-block;
    font-style: italic;
}

.about a {
    color: #d1a170;
    text-decoration: none;
    padding: 0px 6px;
    margin: 2px 0px;
}

.about a:hover {
    color: white;
    background-color: #e472c4;
}

.review {
    background-color: #e472c4;
    padding: 10px;
    margin: 10px;
    margin-bottom: 20px;
    color: white;
}

.review p:first-child {
    margin: 0px 0px;
}

.review p:last-child {
    margin: .3em 0px;
    font-style: italic;
}

.info,
.examples {
    position: relative;
    z-index: 2;
    margin-top: -1.8em;
    padding: 20px;
    text-align: center;
    border-radius: 1.8em;
    font-size: 1em;
    color: #CCC;
    margin-bottom: 3em;
}

.info a {
    color: #5addce;
    text-decoration: none;
    padding: 0px 6px;
    margin: 2px 0px;
}

.info a:hover {
    color: white;
    background-color: #e472c4;
}

.imageLink {
    background-color: transparent !important;
}

.imageLink:hover {
    background-color: transparent !important;
}

#start img,
#help img {
    width: 100%;
    max-width: 200px;
}

#archives img {
    width: 100%;
    max-width: 400px;
    margin-bottom: .5em;
}

#tools img {
    width: 100%;
    max-width: 200px;
}

#featureNav {
    /* DARK MODE LIGHT MODE */
    /* background-color:#000; */
    background-color: #333;
    color: #fff;
    margin-bottom: clamp(15px, 2.5vw, 40px);
}

.lefthead {
    display: inline-block;
    font-size: 14px;
    width: 200px;
    padding: 10px;
    border-top: thin solid #666;
    border-bottom: thin solid #666;
}

.whitecontent {

    line-height: 1.5;
    background-color: #ffffff;
    /* White bubble background */
    padding: 12px 18px;
    /* Internal breathing room for the text */
    border-radius: 8px;
    /* Rounded corners for the bubble */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    /* Subtle shadow to define the bubble edges */

}

/* START LEFT RIGHT LIST */
/* left and right list with headers and white content */
.responsive-table {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Replaces borders with clean spacing between bubbles */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.table-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Keeps items top-aligned */
    gap: 20px;
}

.table-heading {
    text-transform: uppercase;
    flex: 0 0 130px;
    /* Fixed desktop width */
    font-size: 16px;
    font-weight: bold;
    font-family: OpenSans;
    color: rgb(53, 105, 157);
    /* Highlight color for the text itself */
    background-color: transparent;
    /* Removes the background capsule */
    padding: 12px 0;
    /* Aligns vertically with the bubble content padding */
    text-align: right;
    box-sizing: border-box;
}

.table-content {
    flex: 1;
    line-height: 1.5;
    background-color: #ffffff;
    /* White bubble background */
    padding: 12px 18px;
    /* Internal breathing room for the text */
    border-radius: 8px;
    /* Rounded corners for the bubble */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    /* Subtle shadow to define the bubble edges */
}

/* Mobile Layout (Break Point) */
@media (max-width: 600px) {
    .table-row {
        flex-direction: column;
        /* Stacks heading above bubble */
        align-items: center;
        /* Centers layout elements horizontally */
        gap: 8px;
        width: 100%;
    }

    .table-heading {
        flex: none;
        width: 100%;
        text-align: center;
        /* Centers the highlight text above the bubble */
        padding: 0;
        /* Resets desktop baseline padding */
    }

    .table-content {
        text-align: left;
        /* Keeps body paragraph reading left-to-right */
        width: 100%;
        /* Bubble fills the available screen width */
        box-sizing: border-box;
    }
}

/* END LEFT RIGHT LIST */

.linkset {
    margin-top: clamp(25px, 2.5vw, 40px);
    font-size: clamp(10px, 2.5vw, 24px);
}

.infoBar {
    /* DARK MODE LIGHT MODE */
    /* border-bottom: #ccc solid 1px; */
    border-bottom: #666 solid 1px;
    text-align: left;
    position: relative;
    padding: 5px;

}

.infoTitle {
    /* DARK MODE LIGHT MODE */
    /* color:#ccc; */
    color: #666;
    display: inline-block;
    font-style: italic;
}

.infoClose {
    position: absolute;
    right: 10px;
    background-color: #ccc;
    display: inline-block;
    font-size: .8em;
    top: 2px;
    color: #666 !important;
    padding: 3px 14px !important;
}

.infoClose:hover {
    color: white !important;
}

#show {
    position: absolute;
    right: 4em;
    top: -2.5em;
    display: none;
    font-size: .8em;
    color: #777;
    text-decoration: none;
    background-color: white;
    padding: 3px 10px;
}

#show:hover {
    color: white;
    background-color: #e472c4;
}

figcaption {
    color: white;
    padding: 10px 0px 7px 0px;
    text-align: center;
    height: 3vh;
    vertical-align: center;
    font-size: 2vh;
    /*text-transform: uppercase;*/
}

#top {
    color: white;
    padding: 10px 0px 7px 0px;
    text-align: center;
    height: 3vh;
    vertical-align: center;
    font-size: 2vh;
    background-color: #acd241;
}

figcaption a:first-child {
    font-style: italic;
}

figcaption a {
    color: white;
    text-decoration: none;
}

.arrow::after {
    content: "\25B6 \FE0E";
}



#bubbling {
    margin-bottom: 1.5em;
}

#bubbling,
#blog {
    width: 100%;
    max-width: 776px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
}

@media screen and (orientation:portrait) {

    h1 {
        font-size: 2.2vh;
        height: 2.2%;
    }

    h2 {
        font-size: 2.0vh;
        height: 2.2%;
    }

    #info {
        margin-top: 0px;
        margin-bottom: 1em;
    }
}

@media screen and (orientation:landscape) {
    h1 {
        font-size: 3.2vh;
    }

    h2 {
        font-size: 3.0vh;
    }
}

#tagline {
    /* margin-bottom:1.5em; */
    color: #666;
    text-align: center;
}

.thumbs {
    padding-top: .7em;
}

.thumbs div {
    vertical-align: top;
    width: 200px;
    height: 240px;
    text-align: center;
    font-size: 20px !important;
    display: inline-block;
    padding: .4em .4em;
    margin: 1em 0px;
    /* font-size: .8em;     */
}

.thumbs a {
    text-decoration: none;
    color: #777;
    background-color: transparent !important;
}

.thumbs a:hover {
    color: #222 !important;
    background-color: transparent !important;
}

.thumbs div img {
    width: 200px !important;
    margin-bottom: .2em;
    box-shadow: rgba(0,0,0,.2) 6px 6px 9px;
}

.bord {
    outline: thin solid #aaa; 
    outline-offset: -1px;
}



@media all and (max-width: 640px) {

    /* these styles show if screen width is less than or equal to 640 */
    section {
        border-radius: 3vw !important;
        margin-bottom: 6vw !important;
    }

    section a {
        padding: 0px .7vw !important;
        margin: .2vw 0px !important;
    }

    .article-container a {
        padding: 8px .7vw !important;
    }

    .snip {

        font-family: 'Courier New' !important;
        font-size: 14px !important;
    }

    #title h3 {
        width: 100px;
        font-size: 20px;
        background-position: 6px -8px;
        top: 2px;
    }

    nav {
        width: 95% !important;
    }

    nav a {
        font-size: 10px !important;
        margin: 7px 1px 2px 1px !important;
        padding: 4px 2px 3px 2px !important;
    }

    .thumbs {
        text-align: center !important;
    }

    .thumbs div {
        margin: 0px .8vw !important;
        width: 80px !important;
        height: 110px !important;
        text-align: center !important;
        font-size: 10px !important;
    }

    .thumbs div img {
        width: 80px !important;
        margin-bottom: .2em;
        box-shadow: rgba(0,0,0,.2) 2px 2px 5px;
    }

    ul,
    ol {
        margin-left: -4vw
    }

    main,
    section,
    li,
    h3 {
        font-size: 16px !important;
    }

}

@media all and (min-width: 640px) and (max-width: 900px) {

    /* these styles show if screen width is between 640 and 900 */
    #tagline {
        font-size: 2.5vw !important;
    }

    nav {
        width: 90% !important;
    }

    nav a {
        font-size: 14px !important;
        padding: 4px 5px 3px 5px !important;
    }

    main,
    section,
    li,
    h3 {
        font-size: 20px;
    }

    .thumbs {
        text-align: center !important;
    }

    .thumbs div {
        margin: 0px .8vw !important;
        width: 80px !important;
        height: 110px !important;
        text-align: center !important;
        font-size: 10px !important;
    }

    .thumbs div img {
        width: 80px !important;
        margin-bottom: .2em;
        box-shadow: rgba(0,0,0,.2) 2px 2px 2px;
    }
}



section {
    /* DARK MODE LIGHT MODE */
    /* color:#bbb;     
    background-color: #111; */
    color: #333;
    background-color: #eee;

    position: relative;
    z-index: 2;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 2vw;
    text-align: center;
    border-radius: 25px;
    box-shadow: .4vw .4vw 2vw rgba(0, 0, 0, .1);
}

section a {
    text-decoration: none;
    padding: 0px 3px;
    margin: 3px 0px;
    color: #df6356;
}

section a:hover {
    color: white !important;
    background-color: #fa8072 !important;
}



#host {
    width: 100%;
    text-align: center;
    margin-top: 0vw;
    margin-bottom: 0px;
}

#host img {
    width: 50%;
    max-width: 250px;
}

nav {
    /* DARK MODE LIGHT MODE */
    /* background-color:#111; */
    background-color: #333;
    color: #fff;


    margin: auto;
    /* margin-top: 3.5vw !important; */
    /* margin-bottom: 1.8vw; */
    margin-top: clamp(15px, 2.5vw, 40px);
    margin-bottom: clamp(15px, 2.5vw, 40px);
    width: 85%;
    max-width: 900px;
    text-align: center;
    position: relative;
    z-index: 1;
}

nav:first-of-type {
    margin-top: 0px !important;
}

nav a {
    overflow: hidden;
    text-align: center;
    margin: 7px 4px 2px 3px;
    padding: 4px 15px 3px 15px;
    border-radius: 0px;
    font-size: 15px;
    color: #dddddd;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
}

.selected {
    border-radius: 0px;
    border: thin solid #aaaaaa;
    color: #dddddd !important;
}

/* Base Mobile-First Styles */
.arc_container {
    display: flex;
    flex-direction: column;
    /* Stacks image above text on mobile */
    align-items: center;
    /* Centers the image on mobile */
    gap: 20px;
    /* Space between image and bubble */
    padding: 15px;

}

.arc_profile-image {
    width: 100%;
    max-width: 400px;
    /* Limits size to 400px */
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.arc_text-bubble {
    background-color: #ffffff;
    /* White bubble */
    padding: 25px;
    /* Nice internal padding */
    border-radius: 12px;
    /* Smooth rounded corners for the bubble */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Soft shadow for depth */
    text-align: left;
    /* Ensures text is always left-aligned */
    width: 100%;
    /* Allows bubble to fill container width on mobile */
    box-sizing: border-box;
    /* Includes padding in width calculation */
}

/* Desktop Styles (When there is room) */
@media (min-width: 768px) {
    .arc_container {
        flex-direction: row;
        /* Places image on the left, text on the right */
        align-items: flex-start;
        /* Aligns the top of the bubble with the top of the image */
        gap: 30px;
        /* Increased spacing for desktop layout */
    }
}

/* LIST OF ARTICLES */

/* Optional layout container to limit line length for readability */
.article-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;

}

.article-container h4 {
    color: rgb(53, 105, 157);
    font-weight: normal;
}

/* Treat anchor tags as full-width block elements */
.article-container a {
    background-color: white;
    display: block;
    padding: 20px 16px;
    color: #2d3748;
    text-decoration: none;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;

    /* Thin border between items */
    border-bottom: 1px solid #e2e8f0;

    /* Modern fix to prevent single-word line wraps */
    text-wrap: balance;

    /* Prepares the element for smooth rollover animations */
    transition: all 0.2s ease-in-out;
}

/* Clean up the very last link so it doesn't have a trailing border */
.article-container a:last-child {
    border-bottom: none;
}

/* Interactive rollover effect */
.article-container a:hover,
.article-container a:focus {
    background-color: #f7fafc;
    color: #3182ce;
    padding-left: 24px;
    /* Creates a smooth subtle slide-right effect */
    outline: none;
    /* Cleans up default focus rings since we style it manually */
}

/* END LIST OF ARTICLES */