html {
    background-color: #2d2d2d;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: white;

    --background: #34282C;
    --foreground: #fff;
    --light1: #fff;
    --dark1: #000;
    --dark2: #2d2d2d;
    --dark3: #424949;
    --blue1: #003366;
    --blue2: #0067a5;
    --blue3: #4997d0;
    --blue4: #98AFC7;
    --green0: #003300;
    --green1: #186a3b;
    --green2: #27ae60;
    --green3: #C4D600;
    --orange1: #ff4500;
    --orange2: #ffa500;
    --coral1: #FF7F50;
    --red1: #C0392B;
    --red2: #943126;
    --yellow1: #F4D03F;
    --yellow2: #fff44f;
    --yellow3: #e8f48c;
    --yellow4: #f4d03f;
    --cyan1: #b9dcd2;
    --gray1: #53565A;
    --gray2: #aaa;
    --gray3: #e5e4e2;
    --olive0: #336600;
    --olive1: #558b2f;
    --olive2: #669933;
    --purple1: #af7ac5;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 1rem;
}

.welcome, .app-welcome {
    margin: 1rem 2rem 3rem 2rem;
}

.welcome-np {
    margin: 2rem 2rem 1rem 2rem;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 0 1rem;
    
    a {
        border: 1px solid var(--olive2);
        border-radius: 4px;
        padding: .25rem;
        text-decoration: none;
        background-color: #000;
    }
}

.content-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.content-container-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 2rem;

    p {
        margin: 0 0 .5rem 0;
        padding: 0;
        font-weight: 200;
    }
}

.content-container div {
    width: 50%;
    max-width: 50%;

}

.content-container h2 {
 margin: 1.5rem 0 1rem 0;
 padding: 0;
}

.content-container h2:first-child {
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
   }
   
.welcome h1 {
    background-color: var(--olive2);
    color: #000;
    border-radius: 4px;
    width: fit-content;
    padding: 0 .5rem .15rem .5rem;
    font-size: 2.5rem;
}

.app-welcome h1 {
    background-color: #336699;
    color: #f7f9f9;
    border-radius: 4px;
    width: fit-content;
    padding: 0 .5rem .15rem .5rem;
    text-shadow: 2px 2px 2px #000!important;
    margin: 0 0 .5rem 0;
    font-weight: 800;
}

.project-info {
    font-weight: 600!important;
    color:var(--olive2);
    border-bottom: 2px solid #E67E22;
    margin: 1rem 0 .75rem!important;
    width: fit-content;
}

.project-sub {
    margin: 0;
}

.section-title {
    font-weight: 600!important;
    color:#F4D03F;
    margin-top: .5rem!important;
}

ul {
    margin-bottom: 2rem;
}

li {
    margin-left: 1rem;
    line-height: 1.6;
}

ul li {
    margin-left: 2rem;
    line-height: 1.6;
}



a {
    color:#7cb342;
    text-underline-offset: 4px;
}

a:hover {
    color: #5DADE2;
}

a:active {
    color: red;
}

a.done {
    color: var(--brand-alt1);
}

b {
    font-weight: 600;
  }

.blink {
    color: var(--olive2);
    background-color: #000;
    border-radius: 4px;
    padding: .25rem .5rem .25rem .4rem!important;
    margin: 0 .5rem;
    vertical-align: middle;
}

.wip {
    color: var(--blue2);
    background-color: #000;
    border-radius: 4px;
    padding: .25rem .5rem .25rem .4rem!important;
    margin: 0 .5rem;
    vertical-align: middle;
}

.dev {
    color: var(--coral1);
    background-color: #000;
    border-radius: 4px;
    padding: .25rem .5rem .25rem .4rem!important;
    margin: 0 .5rem;
    vertical-align: middle;
}

pre {
    width: fit-content;
    background: black;
    padding: 1rem;
    box-shadow: white 0 0 2px 2px;
    border-radius: 4px;
}
.top-right-div {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
    background-color: transparent;
    z-index: 1;
}

.top-right-div a {
text-decoration: none!important;
}

.top-right-div a:link {
color: transparent;
background-color: transparent;
padding: .2rem .5rem;
border-radius: 4px;
font-size: 1rem;
text-decoration: none;
}

.top-right-div a:hover {
background-color: #336699;
color: var(--aurl);
}	

.top-right-div a:active {
background-color: var(--aactive-un);
color: var(--aactive);
}

    
.flex-container {
    display: flex;
    flex-direction: row; /* Children in a row */
    width: calc(100% - 4rem)!important; /* Adjust if necessary */
    max-width: calc(100% - 4rem)!important;
    justify-content: left; /* Align children to the start of the container */
    align-items:start!important; /* Vertically align children in the middle */
    margin: 0 auto 0 auto;
    gap: 0 4rem;
    height: 400px;
}

.flex-item-50 {
width: auto;
height: 360px;
}

.flex-item-50 img {
width: auto;
height: 100%;
}

.flex-item-50 p {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-bottom: .5rem;
    vertical-align: top!important;
    }

    @media (max-width: 1190px) {
        .content-container {
        flex-direction: column;
        }

        .content-container h2:first-child {
            margin: 1.5rem 0 1rem 0;
            padding: 0;
        }  
       
.content-container div {
    width: 100%;
    max-width: 100%;
}
}