@import url("__theme.css");

:root {
    --font-family: "Helvetica Now", sans-serif, "Verdana", "Consolas";
    --font-size-largest: 3.73rem;
    --font-size-larger: 2.53rem;
    --font-size-large: 1.77rem;
    --font-size-normal: 1rem;
    --font-size-small: .73rem;
    --z-index-ally: 100;
    --z-index-back: -1;
    --space-largest: 117px;
    --space-larger : 80px;
    --space-large  : 55px;
    --space-normal : 30px;
    --space-small  : 10px;
    --space-smaller: 5.13px;
}

*, 
*::before,
*::after {
    box-sizing: border-box;
}

ul,
li,
h1,
h2,
h3,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}


ul, 
li {
    list-style: none;
}

img {
    image-rendering: optimizeSpeed;
}

a {
    text-decoration: none;
}

html, 
body {
    margin: 0;
    padding: 0;
    background-color: var(--website-background);
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    color: var(--color-text);
    letter-spacing: 1.07211;
}

a#button-link {
    color: var(--color-link);
    margin: 4px 0 4px 0;
    padding: 9px 11px;
    border-radius: 10px;
    background-color: var(--background-link);
    font-weight: 540;
    transition: background-color 217ms linear;
}

a#button-link:hover {
    background-color: var(--background-link-hover);
}

.subject-name {
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    background-image: linear-gradient(to right, rgb(150, 170, 220) 35%, rgb(10, 144, 245), rgb(5, 90, 210) 70%);
}

.section-view {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100vw;
    min-height: 324px;
    text-align: center;
    z-index: 2;
}

.section-view> * {
    z-index: 3;
}

.section-view#list {
    display: flex !important;
    flex-direction: column;
}

.section-view.center#list {
    min-height: 38vh;
    align-items: center;
}

.hero-text> h1 {
    font-size: var(--font-size-largest);
    font-weight: 717;
    padding-bottom: 13px;
}

.sub-text> h2 {
    font-size: var(--font-size-larger);
    font-weight: 417;
    padding-bottom: 8px;
}

section.bg-theme {
    background-color: var(--website-secondary-background);
}

section.bg-theme .bg-theme {
    background-color: var(--website-background);
}

*[class^="section"]#table {
    display: grid;
    grid-template-columns: 2.77fr 2.13fr;
    padding: var(--space-large) var(--space-normal);
    text-align: left;
    gap: var(--space-small);
    max-width: 1010px;
}

*[class^="section"].reverse#table {
    grid-template-columns: 2.13fr 2.77fr;
}

*[class^="section"]#table img, 
*[class^="section"].reverse#table img {
    border-radius: max(8px, 5%);
    max-width: 484px;
}

.text-upper {
    text-transform: uppercase;
}

@media only screen {

    body {
        --button-width: 22.17px;
        --button-height: 19.77px;
        --icon-small-size: 24px;
    }

    .global-footer {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
    }

    .global-footer {
        padding: var(--space-normal);
        background-color: var(--global-footer-background);
        min-height: 117px;
        width: 100%;
    }

    .global-footer-container {
        width: 100%;
    }

    .global-footer-platform {
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: 17.13px;
        width: 400px;
        height: 33px;
    }

    .global-footer-platform img,
    .global-footer-platform svg {
        display: block;
        width: 27px;
        height: 25px;
        border-radius: 3px;
        outline: 1.73px solid var(--color-text);
        outline-offset: 4px;
    }

    .global-footer-platform a:hover img,
    .global-footer-platform a:hover svg {
        outline-width: 2.17px;
    }

    :is(.section-view .hero-content) {
        display: inline-block;
        padding: var(--space-largest) 
                 var(--space-normal) 
                 var(--space-larger) 
                 var(--space-normal);
        width: 100%;
    }

    :is(.section-view img.background-image) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100vw;
        height: auto;
        z-index: 1;
    }

    :is(.section-view .content) {
        width: 100%;
        height: auto;
    }

}


@media screen and ( width <= 800px ) {
    
    *[class^="section"]#table, 
    *[class^="section"].reverse#table {
        grid-template-columns: 100%;
        justify-items: center;
    }

    *[class^="section"]#table img, 
    *[class^="section"].reverse#table img {
        max-width: 100%;
        border-radius: 3%;
    }

    *[class^="section"].reverse#table *:nth-child(n) {
        order: 2;
    }

    *[class^="section"].reverse#table *:nth-child(even) {
        order: 1;
    }

}