@layer settings, tools, generic, elements, objects, components, trumps;

@layer settings {
    @font-face{
        font-family:'Roboto';
        font-style:normal;
        font-weight:500;
        font-display:swap;
        src: url('/assets/fonts/roboto500.woff2') format('woff2');
    }
    @font-face{
        font-family:'Lato';
        font-style:normal;
        font-weight:700;
        font-display:swap;
        src:url('/assets/fonts/Lato-Bold.woff2') format('woff2');
    }
    @font-face{
        font-family:'Lexend';
        font-style:normal;
        font-weight:400;
        font-display:swap;
        src:url('/assets/fonts/Lexend-SemiBold.ttf');
    }
    @font-face{
        font-family:'Hind';
        font-style:normal;
        font-weight:400;
        font-display:swap;
        src:url('/assets/fonts/main400.woff2') format('woff2');
    }
    @font-face{
        font-family:'Hind';
        font-style:normal;
        font-weight:600;
        font-display:swap;
        src:url('/assets/fonts/main600.woff2') format('woff2');
    }
        :root{
        --extremes-color: #CCFAFF;
        --accent-color: #305CDE;
        --accent-color-2: #7531DE;
        --light-background: #EBFEFF;
        --dark-color: #1F3A8B;
        --shadow-color: rgba(31, 58, 139, .2);
        --menu-font:"Roboto", sans-serif;
        --title-font: "Lato", sans-serif;
        --default-font: "Hind", sans-serif;
        --button-different: "Lexend", sans-serif;
    }
}
@layer generic {
    :root {
        accent-color:var(--accent-color);
        box-sizing: border-box;
        scroll-behavior: smooth;
    }
    * {
        box-sizing: inherit;
    }
    body {
        margin: 0;
        display:flex;
        flex-direction:column;
        min-height: 100vh;
        font-family: var(--default-font);
        line-height: 1.5;
        overflow-x:hidden;
        background-color: var(--light-background);
    }
}
@layer elements {
    main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    address {
        font-style: normal;
    }
    section {
        margin: 2rem 1.5rem;
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        background-color: white;
        border-radius: 1rem;
        box-shadow: 2px 2px 4px 2px var(--shadow-color);
        &.page__section--fill {
            margin: 2rem 0 0 0;
            border-radius: 0;
            flex-grow: 1;
        }
        @media (min-width: 1024px) {
            margin: 2rem 5% 2rem 5%;
            padding: 2rem;
            @media (min-width: 1300px) {
                margin: 2rem 10%;
                @media (min-width: 1700px) {
                    margin: 2rem 12.5%;
                    @media (min-width: 2500px) {
                        margin: 2rem 20%;
                        @media (min-width: 4000px) {
                            margin: 2rem 25%;
                        }
                    }
                }
            }   
        }
    }

    footer {
        background-color: var(--dark-color);
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;
        padding: 1.5rem;
        color:white;
        @media (min-width: 600px) {
            flex-direction: row;
            justify-content: space-between;
            @media (min-width: 1024px) {
                    padding: 1.5rem 4rem;
                @media (min-width: 1300px) {
                    padding: 1.5rem 5rem;
                }
            }
        } 
    }
    header {
        background-color: var(--extremes-color);
        display: flex;
        justify-content: space-between;
        padding: .25rem .5rem;
        border-bottom: 5px solid var(--accent-color);
        font-family: var(--menu-font);
        font-weight: 500;
        position: sticky;
        transition:ease-in-out .4s;
        top: -200px;
        z-index: 3;
        @media (min-width: 600px) {
            padding: .25rem .5rem;
            @media (min-width: 1024px) {
                padding: .25rem 0 .25rem 6rem;
                gap: 32px;
            }
        }
    }
    button {
        cursor: pointer;
        border: none;
    }
}
@layer components {
    .headerSection {
        padding: 1.5rem 1rem;
        margin: 0 0 2rem 0;
        border-radius: 0;
        flex-grow: 1;
        @media (min-width: 1024px) {
            padding: 2rem 5%;
            @media (min-width: 1300px) {
                padding: 2rem 10%;
                @media (min-width: 1700px) {
                    padding: 2rem 12.5%;
                }
            }
        }
    }
    .page__sentence {
        width: 100%;
        text-align:left;
        margin: 0;
    }
    .page__textImage {
        max-width: 100%;
        height: auto;
    }

    .page__title{
        font-family: var(--title-font);
        text-align: center;
        font-size: 2.25rem;
        margin: 0;
    }
    .page__subtitle {
        font-family: var(--title-font);
        font-size: 1.75rem;
        margin: 0;
        line-height: 1.75rem;
        text-align: center;
    }
    .page__footerLine {
        margin: 0;
    }

    
    /* textBlock block */
    .textBlock {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .textBlock__title {
        font-family: var(--title-font);
        font-size: 1.75rem;
        text-align: center;
        margin: 0;
    }
    .textBlock__paragraph {
        margin: 0;
    }

    /* buttonPack block */
    .buttonPack{
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        width: fit-content;
    }

    .buttonPack__button {
        display: block;
        margin: .2rem;
        background-color: var(--accent-color);
        color: white;
        font-weight: 600;
        width: 15rem;
        padding: .6rem 1rem;
        text-align: center;
        border-radius: 10px;
        font-size: 1rem;
        text-decoration: none;
        transition: background-color .2s linear;
    }
    .buttonPack__button.buttonPack__button--small {
        width:7.5rem;
        padding:.5rem;
    }
    .buttonPack__button:hover, .buttonPack__button:active {
        background-color: var(--accent-color-2);
    }
    .buttonPack__socialMediaBox {
        display: flex;
        gap:.5rem;
        justify-content: center;
    }

    .buttonPack__socialMediaLogo {
        width: auto;
        height: 24px;
    }

    .header__logo {
        display: block;
        width: auto;
        height: 80px;
    }

    /* navPanel block */
    .navPanel{
        display: flex;
        align-items: flex-end;
        gap:1rem;

    }
    .navPanel__button{
        font-size: .9rem;
        color: var(--accent-color);
        cursor: pointer;
        padding: .2rem ;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
    }
    .navPanel__icon{
        height: 1.75rem;
        width: auto;
    }

    .navPanel__menu {
        display: flex;
        gap: 2rem;
        overflow-y: auto;
        position: absolute;
        width: 100%;
        height: calc(100vh - 100% - 5px);
        left: -100%;
        top: calc(100% + 5px);
        opacity: .75;
        bottom: 0;
        background-color: var(--light-background);
        flex-direction: column;
        align-items: center;
        transition: left .4s ease-in-out, opacity .4s ease-in-out;
        padding: 3rem 0 2rem 0;
    }
    .navPanel__menu.navPanel__menu--open{
        left: 0;
        opacity: 1;
    }
    .navPanel__title{
        font-size: 2.5rem;
        margin: 0;
    }
    .navPanel__linkList{
        list-style: none;
        padding: 0;
        font-size: 1.2rem;
        display:flex;
        flex-direction:column;
        gap: 1rem;
        margin: 0;
    }
    .navPanel__link{
        padding: .75rem 0;
        display: flex;
        align-items: flex-end;
        gap: 1rem;
        border-bottom: 2px dotted var(--accent-color);
        text-decoration: none;
        line-height: 1rem;
        color: var(--accent-color);
    }
    .navPanel__logo {
        height: auto;
        width: 96px;
    }
    /* burgerButton block */
    .burgerButton{
        display:flex;
        flex-direction:column;
        flex: 0 0 1.75rem;
        width: 2.5rem;
        justify-content: space-between;
        align-items: stretch;
    }
    .burgerButton__line{
        border-radius:1rem;
        flex: 0 0 .4rem;
        background-color:var(--accent-color);
        transition:0.4s;
    }
    .burgerButton__line.burgerButton__line--openTop{
        transform:translate(0, 11px) rotate(-45deg);
    }
    .burgerButton__line.burgerButton__line--openMid{
        opacity:0;
    }
    .burgerButton__line.burgerButton__line--openBottom{
        transform:translate(0, -11px) rotate(45deg);
    }

    /* mergeBox block */
    .mergeBox{
        position: relative;
        width: fit-content;
        display: flex;
        height: fit-content;
        margin: 0;
    }
    .mergeBox__image{
        height: auto;
        max-width: 100%;
    }
    .mergeBox__label{
        position: absolute;
        bottom: 0;
        left: 0;
        padding: .5rem;
        background-color: rgba(255, 255, 255, .96);
        border:var(--dark-color) dashed;
        border-width: .15rem .15rem 0 0;
        border-radius: 0 1rem 0 0;
        color: var(--dark-color);
    }
    .mergeBox__title{
        margin: 0;
        font-size: 1rem;
        font-family: var(--title-font);
        text-align: right;
    }
    .mergeBox__text{
        font-size: 1rem;
        margin: 0;
        text-align: right;
    }

    .mergeBox__abbr{
        text-decoration: none;
    }

    /* horizontalContainer block */

    .container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .containerHorizontal {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1.25rem;
    }
    /* subtitleBox Block */
    .titleBox {
        display: flex;
        gap: 1rem;
        align-items: flex-end;
    }
    .titleBox__icon {
        height: 40px;
        width: auto;
    }

    /* arrowList block */

    .arrowList {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding-left: 1.5rem;

    }
    .arrowList__item::marker{
        color:var(--accent-color);
        content:'➔ ';
    }

    .arrowList__item--light::marker{
        color:white;
    }
    /* system block */

    .system {
        text-align: center;
        width: 100%;
    }
    .system__success {
        color: darkgreen;
    }
    .system__error {
        color: darkred;
    }

    /* twoColumnIcons block */

    .twoColumnIcons{
        display: grid;
        grid-auto-rows: 90px;
        grid-template-columns: 90px 90px;
        grid-gap: 25px;
        margin-bottom: 1rem;
    }
    .twoColumnIcons__item{
        max-height: 100%;
        max-width: 100%;
        object-fit:scale-down;
    }

    /* sideBySide block */

    .sideBySide {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        padding: 1rem;
    }
    .sideBySide__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .sideBySide__mid{
        padding: .2rem 0 .5rem 0;
    }
    .sideBySide__title, .sideBySide__text{
        margin: 0;
    }

    /* whiteBox block */
    .whiteBox{
        outline: #000 solid 2px;
        background-color: white;
        border-radius: 12px;
        padding: .75rem 1rem;
        font-style: normal;
        transition: all 1s ease-in-out;
        width: calc-size(auto, size);
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        &.hidden{
            width: 0;
            padding: .75rem 0;
            outline-width:0;
        } 
        & .invisible{
            visibility: hidden;
        }
    }

    /* addressBox block */
    .addressBox{
        font-style: normal;
    }
    /* featureList block */

    .featureList{
        display: flex;
        gap: 1rem;
    }

    .featureList__item{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 600;
    }

    .featureList__icon{
        width: auto;
        height: 40px;
    }
    /* map block */


    .map {
        height: 450px;
        flex-grow: 1;
        width: calc(100% + 2rem);
    }

    /* aboutMe, xGrid blocks */
    .aboutMe, .xGrid, .yGrid {
        display: contents;
    }
    
    .locationButtons{
        display: flex;
        flex-direction: column;
        gap: .75rem;
        justify-content: center;
    }
    .locationButton{
        width: 10rem;
        padding: .5rem;
        background-color: var(--accent-color);
        color: white;
        font-weight: 600;
        font-family: var(--button-different);
        font-size: 1.2rem;
        width: 260px;
        padding: 1rem;
        transition: background-color .5s ease-in-out, box-shadow .2s ease-in-out;

        &:first-child{
            border-radius: 16px 16px 0 0;
        }
        &:last-child{
            border-radius: 0 0 16px 16px;
            
        }
        &.active{
            background: var(--accent-color-2);
            box-shadow: 0 0 12px var(--accent-color-2);
        }
        &:hover{
            background: var(--accent-color-2);
        }

    }
}
@layer trumps {
    .page--paused {
        overflow-y: hidden;
    }
    .header--show{
        top:0;
    }
    .mobileKill{
        @media (max-width:599px){
            display: none;
        }
    }
    .fullHide{
        display: none;
    }
    *[hidden]{
        display: block;
        visibility: hidden;
        height: 0;
    }
}




@media only screen and (min-width: 600px) {
    /* page Block */

    .page__title {
        font-size: 2.5rem;
    }


    /*navPanel Block*/
    .navPanel, .navPanel__menu{
        display: contents;
    }
    .navPanel__title, .navPanel__logo, .navPanel__button {
        display: none;
    }
    .navPanel__linkList{
        flex-grow: 1;
        font-size: .9rem;
        flex-direction:row;
        align-items: flex-end;
        justify-content: space-around;
        font-weight: 500;
    }
    .navPanel__link{
        flex-direction: column;
        gap: 0;
        align-items: center;
        border-bottom: 0;
        text-decoration: none;
        padding: 0;
    }

    /* mergeBox block */
    .mergeBox {
        flex-direction: column;
    }
    .mergeBox__label{
        position: static;
        background-color: var(--dark-color);
        border: 0;
        border-radius: 0 0 1.25rem 75%;
        padding: .5rem 1rem;
        color: white;
    }

    /* aboutMe block */
    .aboutMe {
        margin: 1rem 0;
        display: grid;
        grid-template-columns: fit-content(45%) minmax(0, 1fr);
        place-items: center;
        gap: 2rem;
        place-content: center;
        grid-template-areas: "l r" "b b"
    }

    .aboutMe__left {
        align-self: start;
    }
    .aboutMe__bottom {
        align-self: start;
        grid-area: b;
    }

    /* xGrid block */

    .xGrid {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "a a b" "c d d";
        gap: 30px;
        max-width: 54rem;
        align-items: center;
    }

    .xGrid__largeItem1 {
        grid-area: a;
        justify-self: end;
    }

    .xGrid__largeItem2 {
        grid-area: d;
    }

    /* container Block */

    .container_swap {
        flex-direction: row;
    }
}

@media only screen and (min-width: 800px) {

    @layer components {
        .locationButtons{
            flex-direction: row;
            justify-content: center;
        }
        .locationButton{
            &:first-child{
                border-radius: 16px 0 0 16px;
            }
            &:last-child{
                border-radius: 0 16px 16px 0;
            }
        }
    }
    /* aboutMe block */
    .aboutMe {
        grid-template-areas: "l r" "l b";
    }
    .aboutMe__left {
        grid-area: l;
    }
    .aboutMe__right {
        grid-area: r;
        align-self: end;
    }

    /* yGrid block */

    .yGrid {
        display: grid;
        grid-template-columns: fit-content(50%) minmax(0, 800px) ;
        grid-template-areas: "a b" "c c";
        gap: 0 30px;    
        place-items: center;
    }
    .yGrid__left {
        grid-area: a;
    }
    .yGrid__right {
        grid-area: b;
    }
    .yGrid__bottom {
        grid-area: c;
    }

    /* sideBySide block */

    .sideBySide {
        flex-direction: row;
        gap: 1.5rem;
        align-items: flex-start;
        justify-content: center;
        padding: 1rem;
    }
}

@media only screen and (min-width: 1024px) {
    /*navPanel Block*/
    .navPanel__linkList{
        justify-content: flex-start;
        gap: 24px;
    }

    /* xGrid block */
    .xGrid {
        align-items: end;
    }

    /* yGrid block */

    .yGrid {
        grid-template-areas: "a b" "c b";
        align-items: end;
        place-items: center;
    }
    .yGrid__left {
        grid-area: a;
        align-self: end;
    }
    .yGrid__right {
        grid-area: b;
    }
    .yGrid__bottom {
        grid-area: c;
        align-self: start;
    }
}