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

.welcome {
    margin: 2rem 2rem 3rem 2rem;
}

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


ul {
    margin-bottom: 2rem;
}

ul li {
    margin-left: 2rem;
}

a {
    color: #F4D03F;
}

a:hover {
    color: #5DADE2;
}

a:active {
    color: red;
}

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