@layer font, framework, base, page, library, components;

@layer font {
    *:not(.semi-font)>* {
        font-family: 'Barlow Condensed', serif;
    }

    .semi-font {
        font-family: 'Barlow semi Condensed', 'Barlow Condensed', serif;
    }
}

@layer base {
    :root {
        --light-green: rgba(111, 173, 162, 54%);
        --green: rgba(22, 125, 106, 100%);

        --pale-blue: rgb(108, 174, 210);
        --dark-blue: rgb(24, 90, 125);
        --light-blue: rgb(0, 210, 238);

        --bg-light-gray: rgb(238, 242, 244);

        /* font size */
        --h1: 35;
        --h2: 29.25;
        --h3: 22.5;
        --h4: 18;

        --sub: 15;
        --detail: 11.5;

        /* default */
        --font-size: 10;
    }

    @media only screen and (max-width: 768px) {
        :root {
            /* font size */
            --h1: 100;
            --h2: 77;
            --h3: 67.6;
            --h4: 55.8;

            --sub: 42.8;
            --detail: 39.2;

            /* default */
            --font-size: 30.8;
        }

        html,
        body {
            overflow-x: auto;
        }
    }

    html,
    body {
        width: 100vw;
        overflow-x: hidden;
        color: var(--dark-blue);
        margin: unset;
        line-height: normal;
    }

    * {
        font-size: calc(var(--font-size) /10 * 1vw);
    }

    a {
        text-decoration: none;
    }

    .pl-container {
        position: relative;
        height: 100%;
        display: inline-block;
    }

    .display-inline {
        display: inline;
    }

    .bigButton {
        padding: 1em 3em;
        height: 3em;
        background: var(--green);
        color: white;
        font-weight: bolder;
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        white-space: pre;
    }

    .hidden {
        display: none !important;
    }

    /*#region font size*/
    .txt-h2 {
        --font-size: var(--h2);
    }

    .txt-sub {
        --font-size: var(--sub);
    }

    .txt-h3 {
        --font-size: var(--h3);
    }

    .txt-h4 {
        --font-size: var(--h4);
    }

    .txt-detail {
        --font-size: var(--detail);
    }

    /*#endregion*/

    .txtStrong {
        font-weight: bolder;
    }

    .txCenter {
        text-align: center;
    }

    .txRight {
        text-align: right;
    }

    .upper {
        text-transform: uppercase;
    }

    #condition-page {
        margin: 2em;

        table.table-condition>tbody>tr:has(+ tr)>td {
            border-bottom: 1px solid var(--pale-blue);
        }

        .condition-text {
            font-style: italic;
            font-size: .75em;
            margin-top: 1em;
        }
    }
}

@layer library {

    /*#region margins*/
    .mv0 {
        margin-top: 0;
        margin-bottom: 0;
    }

    .mh0 {
        margin-left: 0;
        margin-right: 0;
    }

    /*#endregion margins*/

    /*#region space child*/
    .spaceChild,
    .spaceChild-1,
    .spaceChild50,
    .spaceChild33,
    .spaceChildNotFlex,
    .spaceChild50NotFlex {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .spaceChild:not(.row-in-it)>*:last-child,
    .spaceChild-1:not(.row-in-it)>*:last-child,
    .spaceChild50:not(.row-in-it)>*:last-child,
    .spaceChild33:not(.row-in-it)>*:last-child,
    .spaceChildNotFlex:not(.row-in-it)>*:last-child,
    .spaceChild50NotFlex:not(.row-in-it)>*:last-child {
        margin-right: 0;
    }

    .spaceChild:not(.row-in-it)>*:first-child,
    .spaceChild-1:not(.row-in-it)>*:first-child,
    .spaceChild50:not(.row-in-it)>*:first-child,
    .spaceChild33:not(.row-in-it)>*:first-child,
    .spaceChildNotFlex:not(.row-in-it)>*:first-child,
    .spaceChild50NotFlex:not(.row-in-it)>*:first-child {
        margin-left: 0;
    }

    .spaceChild>*,
    .spaceChildNotFlex>* {
        margin: 0 2em;
    }

    .spaceChild33>* {
        margin: 0 .67em;
    }

    .spaceChild50>*,
    .spaceChild50NotFlex>* {
        margin: 0 1em;
    }

    .spaceChild>*,
    .spaceChild-1>*,
    .spaceChild50>*,
    .spaceChild33>* {
        flex: 1 1;
    }


    .spaceChild-1>* {
        margin: 0 10px;
    }

    /*#endregion space child*/

    /*#region flex*/
    .flexRow,
    .flexColumn,
    .flexRowReverse,
    .flexAlignEnd,
    .flexAlignCenter,
    .flexStretch,
    .flexAlignStart,
    .flexAlignBaseline,
    .flexAround,
    .flexAroundS,
    .flexBetween,
    .flexCenter,
    .flexEvenly,
    .flexStart,
    .flexStartS,
    .flexEnd,
    .flexEndS,
    .flexWrap,
    .flexWrapReverse,
    .flexNoWrap {
        display: flex;
    }

    /*#region flex-direction*/
    .flexColumn {
        flex-direction: column !important;
    }

    .flexRow {
        flex-direction: row !important;
    }

    .flexRowReverse {
        flex-direction: row-reverse !important;
    }

    /*#endregion*/

    /*#region flex-align*/
    .flexEndS,
    .flexAlignEnd {
        align-items: flex-end !important;
    }

    .flexAlignCenter {
        align-items: center !important;
    }

    .flexAroundS,
    .flexStartS,
    .flexAlignStart {
        align-items: flex-start !important;
    }

    .flexAlignBaseline {
        align-items: baseline !important;
    }

    .flexStretch {
        align-items: stretch !important;
    }

    /*#endregion*/

    /*#region justify-content*/
    .flexAround,
    .flexAroundS {
        justify-content: space-around !important;
        align-items: center;
    }

    .flexBetween {
        justify-content: space-between !important;
        align-items: center;
    }

    .flexCenter {
        justify-content: center !important;
        align-items: center;
    }

    .flexEvenly {
        justify-content: space-evenly !important;
        align-items: center;
    }

    .flexEndS,
    .flexEnd {
        justify-content: flex-end !important;
        align-items: center;
    }

    .flexStartS,
    .flexStart {
        justify-content: flex-start !important;
        align-items: center;
    }

    /*#endregion*/

    /*#region wrap*/
    .flexWrap {
        flex-wrap: wrap !important;
    }

    .flexWrapReverse {
        flex-wrap: wrap-reverse !important;
    }

    .flexNoWrap {
        flex-wrap: nowrap !important;
    }

    /*#endregion*/

    .flexChild>* {
        flex: 1 1;
    }

    .flexChild4>* {
        flex: 4 1 20%;
    }

    /*#endregion*/
}

@layer components {

    .green {
        color: var(--green);
    }

    .absolute {
        position: absolute;
    }

    .absolute-img {
        position: absolute;
        z-index: 2;
        border-radius: 15px;

        img {
            max-width: max-content;
            height: auto;
        }
    }

    .bigger {
        height: 4.5em;
        transition: all 0.1s ease-in;

        &:hover {
            transform: scale(105%, 105%);
        }
    }

    @media only screen and (max-width: 768px) {
        .hide-mobile {
            display: none;
        }
    }

}