@charset "UTF-8";

/*
    Synergy Structure
    Copyright © 2019-2022 Synergy Structure®. All rights reserved.
    This is proprietary software. Any use of any of the contents in this file without permission is strictly prohibited.
*/

:root {
    --bodier-max-width:1400px;
    --synergy-structure-purple:#321B59;
    --synergy-structure-special-font:"Julius Sans One", serif;
}

body {
    color:#6f6f6f;
    font-family:"Ubuntu", serif;
    scroll-behavior:smooth;
    text-rendering:optimizeLegibility;
}
body:not(.fatal-error) {
    background-color:white;
    font-size:1em;
    height:100vh;
}

@media all and
(max-width: 300px),
(max-height: 300px) {
    .small-screen-error {
        align-items:center;
        background-color:var(--synergy-structure-purple);
        display:flex;
        height:100%;
        justify-content:center;
        width:100%;
    }
    .small-screen-error > p {
        color:white;
        font-weight:bold;
        text-align:center;
        width:80%;
    }

    body > header,
    body > main,
    body > footer {
        display:none !important;
    }
}

@media all and
(min-width: 301px) and
(min-height: 301px) {
    .small-screen-error {
        display: none;
    }

    body:not(.fatal-error) {
        display:grid;
        grid-template-areas:
            "header"
            "main"
            "footer";
        grid-template-columns:
            100%;
        grid-template-rows:
            auto
            1fr
            auto;
    }
}

a:active {
    color: #591B1B;
}

.bodier > p a:not([name]):hover,
.bodier > article a:hover {
    text-underline-position:under !important;
    text-decoration:underline !important;
    text-decoration-color:cadetblue !important;
}

a:link {
    color:#1B3C59;
    text-decoration:none;
}

body > header a:link,
body > header a:hover,
body > footer a:link,
body > footer a:hover,
a[name],
a[name]:hover {
    color:inherit;
}

.product-grid > li > p > a:link,
.product-grid > li > p > a:hover {
    
}

.bodier > p > a:visited {
    color:#6c6c6c;
}

body > header {
    display:grid;
    grid-area:header;
    grid-template-areas:
        "system"
        "logo"
        "navigation";
    grid-template-columns:
        auto;
    grid-template-rows:
        auto
        minmax(
            auto,
            94px
        )
        auto;
    max-width:1600px;
    min-width:301px;
    padding-top:1em;
    padding-bottom:2em;
    margin:0 auto;
    width:100%;
}

body > :is(
    header,
    footer
),
.bodier {
    --default-body-area-padding-horizontal:1.5em;
    padding-left:var(--default-body-area-padding-horizontal);
    padding-right:var(--default-body-area-padding-horizontal);
}

body > header > div:nth-child(1) {
    column-gap: 1em;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-area:system;
    justify-content:space-between;
    margin-bottom:1em;
    row-gap: 1em;
}
body > header > div:nth-child(1) > ul {
    display:flex;
}
body > header > div:nth-child(2) {
    background-attachment:scroll;
    background-color:transparent;
    background-image:url("synergy-structure-logo.svg");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    display:block;
    grid-area:logo;
}
body > header ul,
body > footer ul {
    column-gap:4em;
    list-style:none outside none;
    row-gap:1em;
}
body > header li,
body > footer li {
    color:#56421b;
    font-family:var(--synergy-structure-special-font);
    letter-spacing:1px;
    text-transform:uppercase;
}
body > header li > a,
body > footer li > a {
    color:inherit;
    text-decoration: none;
}
body > header li {
    font-size:1em;
}
body > footer li {
    font-size:0.8em;
}
body > header > ul {
    grid-area:navigation;
}
body > header > ul {
    margin-top:3em;
}
body > header > ul,
body > footer > ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:80%;
    margin-right:auto;
    margin-left:auto;
}

body > main {
    display:grid;
    grid-area:main;
    grid-template-areas:
        "header"
        "bodier";
    grid-template-columns:100%;
}

html > .home > main,
html > .legal > main,
html > .error > main,
html > .secret > main {
    grid-template-rows:min-content auto;
}

.bodier {
    margin:0 auto;
    max-width:var(--bodier-max-width);
}

.subtitle {
    /*color:#56421b;*/
    font-weight:bold;
    text-align:left;
    font-size:2em;
    font-family:var(--synergy-structure-special-font);
    letter-spacing:4px;
}

.bodier > .subtitle {
    text-overflow:ellipsis;
    overflow:hidden;
}

.line {
    background-color:#c8c8c8; /*#dddcdc;*/
    height:1px;
}

.bodier > .bodier-title {
    font-weight:bold;
    text-align:center;
    font-size:2em;
    font-family: var(--synergy-structure-special-font);
    letter-spacing:4px;
}

.bodier p/*:not(:nth-child(1))*/
{
    padding:0.5em 0;
}
.library-alphanumeral {
    font-size:1.4em;
    font-weight:bold;
}
.bodier-subtitle {
    padding:2em 0;
    text-align:center;
}

body > main > header > .bodier {
    height:100%;
}
body > main > div:nth-child(2) {
    padding-top:2em;
}

body > footer {
    grid-area:footer;
    padding-top:2em;
    padding-bottom:2em;
    background-color:#E1E1E1;
    margin-top:2em;
}
body > footer > .line {
    margin:2em auto;
}
body > footer > p {
    font-size:1em;
    margin:auto;
    text-align:center;
    color:#646464b5;
}

body > main > header > .bodier > div {
    height:100%;
}


html > .home > main > header > .bodier > p,
html > .legal > main > header > .bodier > p,
html > .error > main > header > .bodier > p,
html > .secret > main > header > .bodier > p {
    padding-top:2ch;
}

html > .home > main > header > .bodier > p:last-of-type,
html > .legal > main > header > .bodier > p:last-of-type,
html > .error > main > header > .bodier > p:last-of-type,
html > .secret > main > header > .bodier > p:last-of-type {
    padding-bottom:2em;
}

.bodier > p {
    line-height:1.7em;
}

html > .home > main > .about-header {
    background-color:#E1E1E1;
    color:var(--synergy-structure-purple);
}
html > .legal > main > .about-header {
    background-color:#E1E1E1;
    color:var(--synergy-structure-purple);
}
html > .error > main > .about-header {
    background-color:#E1A8A8;
    color:var(--synergy-structure-purple);
}
html > .secret > main > .about-header {
    background-color:#E1D3A8;
    color:var(--synergy-structure-purple);
}

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

    body > header > ul,
    body > footer > ul {
        flex-direction:column;
    }

    body > header > ul > li,
    body > footer > ul > li {
        text-align:center;
        /*color:pink;*/
    }
}

@media all and
    (min-width: 701px) {

    body > header > ul,
    body > footer > ul {
        flex-direction:row;
    }

    body > header > ul > li,
    body > footer > ul > li {
        /*color:green;*/
    }
}


.product-grid {
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content:center;
    column-gap:4em;
    list-style:none outside none;
    row-gap:3em;
    column-gap:2em;
    margin:1em 0;
}
.product-grid > li > p {
    text-align:center;
}
.product-grid > li > p:nth-child(1) {
    color:var(--synergy-structure-purple);
    font-family:var(--synergy-structure-special-font);
    font-weight: bold;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:1.25em;
    padding-bottom:0.5em;
    letter-spacing:4px;
}

.project-download-list {
    column-gap:4em;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    list-style:none outside none;
    margin:1em auto;
    row-gap:2em;
    width:fit-content;
}
.project-download-list > li {
    flex:1 1 0;
    text-align:center;
}
.project-download-list > li > p {
    font-family:var(--synergy-structure-special-font);
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom:1em;
}
.project-download-list > li > a {
    display:inline-block;
}
.project-download-list > li > a > div {
    background-attachment:scroll;
    background-color:transparent;
    background-position:top left;
    background-repeat:no-repeat;
    display:inline-block;
}
.download-icon {
    background-image:url("icons/download-icon.svg");
    height:80px;
    width:49px;
}
.software-documentation-icon {
    background-image:url("icons/software-documentation-icon.svg");
    height:96px;
    width:76px;
}
.changelog-icon {
    background-image:url("icons/changelog-icon.svg");
    height:91px;
    width:76px;
}
.versions-icon {
    background-image:url("icons/versions-icon.svg");
    height:91px;
    width:74px;
}
.standard-documentation-icon {
    background-image:url("icons/standard-documentation-icon.svg");
    width:82px;
    height:112px;
}

article > header {
    font-size:1.5em;
}

article > header > .highlight {
    font-weight:bold;
}

article > .publication,
.photo-inforamation {
    font-size:0.75em;
    color:#959595;
    text-align:right;
}

.for-developers-picture,
.about-photo {
    aspect-ratio:5 / 2.655;
    background-attachment: scroll;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    width:100%;
}
.for-developers-picture {
    /*
        Photo by Miguel Á. Padriñán from Pexels
        https://www.pexels.com/photo/photo-of-golden-cogwheel-on-black-background-3785935/
    */
    background-image:url("photos/pexels-miguel-á-padriñán-3785935.jpg");
}
.about-photo {
    /*
        Photo by Benjamin Brown
    */
    background-image:url("photos/manuel-milosavljević-hotel-moskva.jpg");
}

html > .fatal-error > .logo {
    background-attachment: scroll;
    background-color: transparent;
    background-image: url(synergy-structure-logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width:calc(328px - 3em);
    height:calc(93.3px - 3em);
    padding:6em 3em 3em 3em;
    margin:0 auto;
}

html > .fatal-error > p {
    text-align:center;
    font-size:2em;
    padding:1em;
    max-width:600px;
    margin:0 auto;
}

div[data-maximum-page-number] {
    width: 100%;
    justify-content:right;
    display:flex;
    margin-top:4ch;
}
div[data-maximum-page-number] > div {
    list-style:none outside none;
    display: flex;
    border:1px solid #cecece;
    border-radius:5px;
}
div[data-maximum-page-number] > div > :is(
    span,
    a
) {
    padding:1ch 2ch;
}
div[data-maximum-page-number] > div > :is(
    span,
    a
):not(:last-child) {
    border-right:1px solid #cecece;
}
div[data-maximum-page-number] > div > a {
    color:inherit;
}
div[data-maximum-page-number] > div > span {
    color:#cecece;
}
div[data-maximum-page-number] > div > a:hover {
    background-color:#e1e1e1;
}