/* CSS Variables */
:root {
    --color-white: 255, 255, 255;
    --color-black: 0, 0, 0;
   
    --color-magenta-200: 239, 231, 241;
    --color-magenta-700: 99, 11, 121;
    --color-magenta-800: 71, 35, 80;
    --color-magenta-900: 61, 21, 71;
    --color-pink-200: 249, 219, 231;
    --color-pink-600: 214, 12, 91;
    --color-green-200: 235, 247, 235;
    --color-green-600: 0, 168, 0;
    --color-green-700: 0, 151, 1;
    --color-green-800: 0, 103, 1;
    --color-cyan-100: 241, 250, 253;
    --color-cyan-300: 193, 234, 245;
    --color-cyan-400: 106, 203, 230;
    --color-cyan-600: 0, 158, 201;
    --color-orange-500: 255, 177, 0;
    --color-orange-600: 204, 142, 0;
    --color-red-600: 228, 0, 0;
    --color-red-700: 193, 3, 3;
    --color-yellow-100: 254, 253, 240;
    --color-blue-200: 204, 234, 255;
    --color-blue-700: 41, 77, 102;
    --color-primary: var(--color-magenta-700);
    --color-primary-contrast: var(--color-white);
    --color-secondary: var(--color-magenta-900);
    --color-secondary-contrast: var(--color-white);
    --color-accent: var(--color-pink-600);
    --color-accent-contrast: var(--color-white);
    --color-action: var(--color-green-700);
    --color-action-contrast: var(--color-white);
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --formitem_border-width: 1px;
    --formitem_border-radius: 5px;
    --border-width: 1px;
    --border-style: solid
}

/* Layout */
.layout {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.header-stripe {
    position: relative;
    z-index: 1;
}
/* Markdown Content */
.markdown-holder h1,
.markdown-holder h2,
.markdown-holder h3 {
    margin-bottom: .5em;
    margin-top: 1.5em;
    font-weight: 600
}

.markdown-holder h2,
.markdown-holder h3 {
    line-height: 1.1
}

.markdown-holder h1 {
    font-size: 2rem
}

.markdown-holder h2 {
    font-size: 1.75rem
}

.markdown-holder h3 {
    font-size: 1.5rem
}
.markdown-holder h1 small{
    font-size: initial;
    font-weight: 400;
    display: block;
}

.markdown-holder a {
    color: rgb(var(--color-accent))
}

.markdown-holder p {
    margin-bottom: 0.7em
}
.markdown-holder p:has(strong) {
    margin-bottom: 0.2em;
}

.markdown-holder p:last-of-type {
    margin-bottom: 0
}

/* Static Page Content */
.static-page-content {
    --tw-text-opacity: 1;
    color: rgba(64, 64, 69, var(--tw-text-opacity));
}

/* Aside Navigation */
.aside-navigation__item {
    font-size: 80% !important;
    padding-bottom: 5px;
}

img {
    margin:auto;
}

/* Tables */
table {
    width: 100%;
    margin-top: 1.5rem;
}

td {
    padding: 1.5rem !important;
    border: 1px solid #fff;
    line-height: 1.5rem;
}

td:first-child {
    width: 30%;
}

td a {
    color: #fff !important;
    text-decoration: underline;
}

/* Figures */
figure {
    margin-bottom: 1.5rem;
}

figcaption {
    font-size: 0.875rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
    margin-top: 5px;
}


blockquote {
    margin: 1.5rem auto;
}

ul{
    margin:1em 4em;
}
ul li{
    list-style: disc;
}

li p {
    padding: 0 25px;
}

/* Colors */
.text-primary-c {
    color: rgb(var(--color-primary-contrast));
}

.bg-primary {
    background-color: rgb(var(--color-primary));
}

/* Media Queries */
@media(min-width:768px) {
    .layout {
        grid-template-columns: minmax(1rem, 1fr) 17rem
    }

    .layout.layout--inverted {
        grid-template-columns: 17rem minmax(1rem, 1fr)
    }

    .sm\:container {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-right: 20px;
        padding-left: 20px
    }

    .sm\:aspect-w-3 {
        position: relative;
        padding-bottom: calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)
    }

    .sm\:aspect-w-3>* {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .sm\:aspect-w-3 {
        --tw-aspect-w: 3
    }

    .sm\:aspect-h-1 {
        --tw-aspect-h: 1
    }

    .sm\:aspect-h-2 {
        --tw-aspect-h: 2
    }

    .sm\:absolute {
        position: absolute
    }

    .sm\:sticky {
        position: sticky
    }

    .sm\:inset-auto {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto
    }

    .sm\:top-5 {
        top: 1.25rem
    }

    .sm\:top-full {
        top: 100%
    }

    .sm\:right-0 {
        right: 0
    }

    .sm\:left-auto {
        left: auto
    }

    .sm\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .sm\:mx-8 {
        margin-left: 2rem;
        margin-right: 2rem
    }

    .sm\:mt-0 {
        margin-top: 0
    }

    .sm\:mt-xs {
        margin-top: 5px
    }

    .sm\:mb-0 {
        margin-bottom: 0
    }

    .sm\:block {
        display: block
    }

    .sm\:flex {
        display: flex
    }

    .sm\:grid {
        display: grid
    }

    .sm\:h-4 {
        height: 1rem
    }

    .sm\:w-4 {
        width: 1rem
    }

    .sm\:w-auto {
        width: auto
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:items-center {
        align-items: center
    }

    .sm\:justify-center {
        justify-content: center
    }

    .sm\:self-start {
        align-self: flex-start
    }

    .sm\:overflow-x-hidden {
        overflow-x: hidden
    }

    .sm\:rounded {
        border-radius: 5px
    }

    .sm\:rounded-r-none {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .sm\:rounded-l-none {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .sm\:border-0 {
        border-width: 0
    }

    .sm\:border {
        border-width: 1px
    }

    .sm\:border-gray-200 {
        --tw-border-opacity: 1;
        border-color: rgba(234, 234, 240, var(--tw-border-opacity))
    }

    .sm\:bg-gray-100 {
        --tw-bg-opacity: 1;
        background-color: rgba(245, 245, 249, var(--tw-bg-opacity))
    }

    .sm\:bg-yellow-100 {
        --tw-bg-opacity: 1;
        background-color: rgba(254, 253, 240, var(--tw-bg-opacity))
    }

    .sm\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .sm\:px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .sm\:px-2\.5 {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .sm\:px-md {
        padding-left: 15px;
        padding-right: 15px
    }

    .sm\:px-xxl {
        padding-left: 30px;
        padding-right: 30px
    }

    .sm\:py-3 {
        padding-top: .75rem;
        padding-bottom: .75rem
    }

    .sm\:py-xxl {
        padding-bottom: 30px
    }

    .sm\:pt-xxl,
    .sm\:py-xxl {
        padding-top: 30px
    }

    .sm\:pb-md {
        padding-bottom: 15px
    }

    .sm\:pb-xxl {
        padding-bottom: 30px
    }

    .sm\:pl-4 {
        padding-left: 1rem
    }

    .sm\:text-sm {
        font-size: .875rem
    }

    .sm\:text-xl {
        font-size: 1.25rem
    }

    .sm\:text-2xl {
        font-size: 1.5rem
    }

    .sm\:leading-6 {
        line-height: 1.5rem
    }

    .sm\:text-gray-500 {
        --tw-text-opacity: 1;
        color: rgba(128, 128, 133, var(--tw-text-opacity))
    }

    .sm\:text-gray-700 {
        --tw-text-opacity: 1;
        color: rgba(64, 64, 69, var(--tw-text-opacity))
    }
}

@media(min-width:768px)and (min-width:1230px) {
    .sm\:container {
        max-width: 1230px
    }
}

@media(min-width:1024px) {
    .layout.layout--inverted {
        grid-template-columns: 18.7rem minmax(1rem, 1fr)
    }

    .md\:mx-16 {
        margin-left: 4rem;
        margin-right: 4rem
    }

    .md\:mt-8 {
        margin-top: 2rem
    }

    .md\:ml-60 {
        margin-left: 15rem
    }

    .md\:inline-block {
        display: inline-block
    }

    .md\:h-auto {
        height: auto
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:gap-xl {
        gap: 25px
    }

    .md\:gap-x-xxl {
        -moz-column-gap: 30px;
        column-gap: 30px
    }

    .md\:gap-y-lg {
        row-gap: 20px
    }

    .md\:justify-self-start {
        justify-self: start
    }

    .md\:border-t {
        border-top-width: 1px
    }

    .md\:border-b {
        border-bottom-width: 1px
    }

    .md\:border-magenta-800 {
        --tw-border-opacity: 1;
        border-color: rgba(71, 35, 80, var(--tw-border-opacity))
    }

    .md\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .md\:text-lg {
        font-size: 1.125rem
    }

    .md\:text-3xl {
        font-size: 1.75rem
    }

    .md\:text-5xl {
        font-size: 2.25rem
    }
}

@media(min-width:1366px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:pr-4 {
        padding-right: 1rem
    }

    .lg\:pl-6 {
        padding-left: 1.5rem
    }

    .lg\:text-md {
        font-size: 1rem
    }
}

@media(min-width:2050px) {
    .xl\:text-xs {
        font-size: .75rem
    }

    .xl\:text-sm {
        font-size: .875rem
    }
}

.header-stripe {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 5rem;

    background-color: rgb(var(--color-secondary));
}

.header-stripe__container {
    display: flex;
    justify-content: start;

    @media only screen and (min-width: 900px) {
        justify-content: start;
        width: 848px;
    }
}

.header-stripe__image {
    width: 3.5rem;
    height: 3.5rem;
}

/* Navigation Menu Styles */
.nav-menu {
    position: relative;
    width: 100%;
    padding: 1rem;
    background-color: #630B79;
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.hamburger-btn span {
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

.nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    background: #630B79;
    width: 100%;
    padding: 2rem;
    display: none;
    list-style: none;
    margin: 0;
}

.nav-list.active {
    display: block;
}

.nav-list li {
    margin: 1rem 0;
}

.nav-list a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav-list a:hover {
    color: #ddd;
}