@charset "UTF-8";
@font-face{
	font-family: 'Aracne';
	font-weight: 500;
	font-style: normal;
	src:  url(/assets/fonts/Aracne/AracneUltraCondensedRegular/Web-TT/ARACNE-ULTRA-CONDENSED_regular.woff2) format("woff2"),
        url(/assets/fonts/Aracne/AracneUltraCondensedRegular/Web-TT/ARACNE-ULTRA-CONDENSED_regular.woff) format("woff"),
        url(/assets/fonts/Aracne/AracneUltraCondensedRegular/Web-TT/ARACNE-ULTRA-CONDENSED_regular.ttf) format("truetype");

}
@font-face {
	font-family: 'Aracne';
	font-weight: 300;
	font-style: normal;
	src:  url(/assets/fonts/Aracne/AracneUltraCondensedLight/Web-TT/ARACNE-ULTRA-CONDENSED_light.woff2) format("woff2"),
        url(/assets/fonts/Aracne/AracneUltraCondensedLight/Web-TT/ARACNE-ULTRA-CONDENSED_light.woff) format("woff"),
        url(/assets/fonts/Aracne/AracneUltraCondensedLight/Web-TT/ARACNE-ULTRA-CONDENSED_light.ttf) format("truetype");

}
@font-face {
	font-family: 'Lato';
	font-weight: 300;
	font-style: normal;
	src:    url(/assets/fonts/Lato/Light/Web-TT/Lato-Light.woff2) format("woff2"),
                url(/assets/fonts/Lato/Light/Web-TT/Lato-Light.woff) format("woff"),
                url(/assets/fonts/Lato/Light/Web-TT/Lato-Light.ttf) format("truetype");

}

html, body {
        margin: 0;
        padding: 0;
        background-color: #fff;
}

.language-switcher {
        list-style: none;
        margin: 1rem;
        padding: 0;
        position: absolute;
        top: 0;
        right: 2rem;

        li {
                display: inline;
                margin-left: 1rem;

                a, span {
                        text-decoration: none;
                        font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                        font-weight: 300;
                        color: #000;
                        font-size: 1.1rem;
                        border-radius: 4px;
                        padding: 0.2rem 0.5rem;
                }

                a:hover {
                        text-decoration: underline;
                        background-color: #e6e2be;
                }

                span {
                        font-weight: 900;
                        text-decoration: underline;
                }
        }
}

address {
        position: relative;
        bottom: 1rem;
        left: 2rem;
        font-size: 0.8rem;
        font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 300;
        display: inline;

        a {
                text-decoration: none;
                color: #000;
                border-radius: 4px;
                padding: 0.2rem 0.5rem;
        }

        a:hover {
                text-decoration: underline;
                background-color: #e6e2be;
        }

        @media screen and (min-width: 1080px) {
                position: fixed;
                right: 2rem;
                left: unset;
        }
}

.page-wrapper {
        margin: 0;
        padding: 0;

        .left-column {
                padding-left: 3vw;
                width: 80vw;
                height: auto;
                display: block;
                object-fit: contain;
                margin: 3vh auto 0 auto;
        }

        .middle-column {
                width: 100%;
                padding: 0 2rem;
                box-sizing: border-box;
                margin-top: -5vh;
        }

        .right-column {
                width: 100%;
                padding: 3rem 2rem 4rem 2rem;
                box-sizing: border-box;
        }

        article {
                padding-top: 3rem;
                padding-bottom: 4rem;

                h1 {
                        font-size: 3.2rem;
                        margin-top: 0;
                        margin-bottom: 2vh;
                        letter-spacing: 0.2rem;
                        font-family: 'Aracne', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                        font-weight: 500;
                }

                p, ul,a, a:visited {
                        font-size: 1.1rem;
                        line-height: 1.4;
                        font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                        font-weight: 300;
                        color: #000;
                }

                a {
                        display: inline-block;
                        position: relative;

                        & span {
                                position: relative;
                                z-index: 2;
                        }

                        &::after {
                                content: '';
                                position: absolute;
                                left: -3px;
                                top: 1px;
                                width: calc(100% + 6px);
                                height: calc(100% - 2px);
                                z-index: 1;
                                border-radius: 5px;
                                background-color: #e6e2be;
                                transform: scaleX(1);
                                transform-origin: right;
                                transition: transform 0.3s ease;
                        }

                        &:hover {
                                color: #000;

                                &::after {
                                        transform: scaleX(0);
                                        transform-origin: right;
                                }

                                &:focus {
                                        font-weight: 900;
                                }
                        }
                }
        }

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

                .left-column {
                        width: 50vw;
                        margin: 3vh auto 0 auto;
                }

                .middle-column {
                        width: 50vw;
                        margin: -5vh auto 0 auto;
                }

                .right-column {
                        width: 50vw;
                        margin: 3vh auto 0 auto;
                }
        }

        @media screen and (min-width: 1080px) {
                grid-template-columns: repeat(3, 1fr);
                column-gap: 8vw;
                display: grid;

                .left-column {
                        grid-column: 1 / 2;
                        padding-left: 3vw;
                        width: 100%;
                        max-width: 28vw;
                        height: auto;
                        display: block;
                        margin: 4vh 0 0 0;
                        object-fit: contain;
                }

                .middle-column {
                        grid-column: 2 / 3;
                        margin: 0;
                        width: unset;
                }

                .right-column {
                        grid-column: 3 / 4;
                        padding-right: 5rem;
                        margin: 0;
                        width: unset;
                }

                article {
                        padding-top: 20vh !important;
                        padding-bottom: 5vw !important;

                        h1 {
                                font-size: 2.7vw;
                                margin-top: 0;
                                margin-bottom: 2vh;
                                letter-spacing: 0.2rem;
                                font-family: 'Aracne', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                                font-weight: 500;
                        }

                        p, ul,a, a:visited {
                                font-size: 1.1vw;
                                line-height: 1.4;
                                font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                                font-weight: 300;
                                color: #000;
                        }

                        a {
                                display: inline-block;
                                position: relative;

                                & span {
                                        position: relative;
                                        z-index: 2;
                                }

                                &::after {
                                        content: '';
                                        position: absolute;
                                        left: -3px;
                                        top: 1px;
                                        width: calc(100% + 6px);
                                        height: calc(100% - 2px);
                                        z-index: 1;
                                        border-radius: 5px;
                                        background-color: #e6e2be;
                                        transform: scaleX(1);
                                        transform-origin: right;
                                        transition: transform 0.3s ease;
                                }

                                &:hover {
                                        color: #000;

                                        &::after {
                                                transform: scaleX(0);
                                                transform-origin: right;
                                        }

                                        &:focus {
                                                font-weight: 900;
                                        }
                                }
                        }
                }
        }
}