/* Variables */

:root {
    --black: hsla(213, 72%, 6%, 100%);
    --dark-grey-3: hsla(211, 62%, 9%, 100%);
    --dark-grey-2: hsla(213, 84%, 15%, 100%);
    --dark-grey: hsla(213, 42%, 36%, 100%);
    --light-grey: hsla(213, 48%, 72%, 100%);
    --white: hsla(179, 72%, 90%, 100%);

    --real-black: hsla(213, 12%, 12%, 100%);
    --real-white: hsla(213, 48%, 96%, 100%);
    --clear: hsla(213, 72%, 6%, 100%);

    --accent: hsla(180, 100%, 63%, 100%);
    --blue: hsla(247, 92%, 50%, 100%);
    --purple: hsla(260, 96%, 53%, 100%);
    --pink: hsla(296, 99%, 50%, 100%);
    --red: hsla(332, 97%, 46%, 100%);
    --green: hsla(147, 86%, 60%, 100%);
    --yellow: hsla(47, 91%, 63%, 100%);
    --light-blue: hsla(180, 100%, 63%, 100%);
    --blue-clear: hsla(247, 92%, 50%, 0%);
    --purple-clear: hsla(260, 96%, 53%, 0%);

    --white-red: hsla(332, 72%, 90%, 100%);
    --white-green: hsla(147, 72%, 90%, 100%);

    --plaax: 'Plaax 1', sans-serif;
    --neue-montreal: 'PPMori-Regular', sans-serif;
    --neue-montreal-bold: 'PPMori-SemiBold', sans-serif;
    --iso: 'PPFraktionSans-Bold', sans-serif;
}

body {
    background: var(--black);
    color: var(--white);
}

*::selection {
    background: var(--dark-grey);
    color: var(--white);
}






/* Typography */

.typography_headline-large {
    font-family: var(--plaax);
    font-weight: normal;
    font-size: 288px;
    line-height: 228px;
    letter-spacing: -5px;
    text-transform: uppercase;
}

.typography_headline-medium {
    font-family: var(--plaax);
    font-weight: normal;
    font-size: 144px;
    line-height: 108px;
    letter-spacing: -2.4px;
    text-transform: uppercase;
}

.typography_headline-small {
    font-family: var(--plaax);
    font-weight: normal;
    font-size: 60px;
    line-height: 54px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
}

.typography_headline-x-small {
    font-family: var(--neue-montreal-bold);
    font-weight: normal;
    font-size: 21px;
    line-height: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.typography_paragraph-large {
    font-family: var(--neue-montreal);
    font-weight: normal;
    font-size: 42px;
    line-height: 115%;
    letter-spacing: 1px;
}

.typography_paragraph-medium {
    font-family: var(--neue-montreal);
    font-weight: normal;
    font-size: 32px;
    line-height: 150%;
    letter-spacing: 0.3px;
}

.typography_paragraph-small {
    font-family: var(--neue-montreal);
    font-weight: normal;
    font-size: 21px;
    line-height: 130%;
    letter-spacing: 0.5px;
}

.typography_paragraph-x-small {
    font-family: var(--neue-montreal);
    font-weight: normal;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0.3px;
}

.typography_link-large {
    font-family: var(--iso);
    font-weight: normal;
    font-size: 36px;
    line-height: 100%;
}

.typography_link-medium {
    font-family: var(--iso);
    font-weight: normal;
    font-size: 24px;
    line-height: 100%;
}

.typography_link-small {
    font-family: var(--iso);
    font-weight: normal;
    font-size: 15px;
    line-height: 100%;
}

.typography_caption-large {
    font-family: var(--neue-montreal-bold);
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.typography_caption {
    font-family: var(--iso);
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.typography_caption-small {
    font-family: var(--neue-montreal);
    font-weight: normal;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0.5px;
    text-transform: none;
}

.typography_badge {
    font-family: var(--neue-montreal-bold);
    font-weight: normal;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.typography_credit {
    font-family: var(--neue-montreal);
    font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
}

.typography_credit-emphasis {
    font-family: var(--plaax);
    font-weight: normal;
    font-size: 24px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: uppercase;
}






/* Color */

.color_emphasis {
    color: var(--white);
}

.color_gradient {
    background: linear-gradient(
        120deg, 
        var(--blue), 
        var(--purple),
        var(--pink)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}






/* Background */

.background_blue {
    background: var(--blue);
}

.background_purple {
    background: var(--purple);
}

.background_pink {
    background: var(--pink);
}

.background_red {
    background: var(--red);
}






/* Button */

.button_text-icon {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.button_row {
    display: flex;
    flex-direction: row;
}

.button_secondary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 48px 48px 144px 48px;
    width: 100%;
    text-decoration: none;
    color: var(--white);
    position: relative;
    box-shadow: -6px -6px 24px -6px #1404A3, 6px 6px 24px -6px #6114FA, 0 0 1px 1px #E872F7;
    background: var(--black);
    transition: .2s all ease-in;
}

    .button_secondary::before {
        transition: .2s all ease-in;
        z-index: -1;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: calc(100% + 12px);
        width: calc(100% + 12px);
        background: linear-gradient(
            120deg, 
            var(--blue-clear), 
            var(--blue-clear),
            var(--purple-clear)
        );
        transform-origin: center center;
        transform: translate(-6px, -6px);
    }

    .button_secondary:hover {
        cursor: pointer;
        box-shadow: 0 0 0 0 #1404A3, 0 0 0 #6114FA, 0 0 0 0 #E8036E;
        z-index: 2;
    }

    .button_secondary:hover::before {
        height: calc(100% + 24px);
        width: calc(100% + 24px);
        transform: translate(-12px, -12px);
        background: linear-gradient(
            120deg, 
            var(--blue), 
            var(--purple),
            var(--pink)
        );
    }

.button_info {
    display: block;
    color: var(--light-grey);
}






/* Badge */

.badge {
    color: var(--white);
    width: max-content;
}






/* Layout */

.layout_outer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 93vw;
}

.layout_inner {
    display: flex;
    flex-direction: column;
    gap: 72px;
    width: 100%;
    max-width: 800px;
    align-items: flex-start;
}

.layout_typography {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: calc(100% / 3 * 2);
    width: 100%;
}






/* Ornament */

.censor {
    background: var(--white);
    height: 18px;
    width: 48px;
}

.censor_text {
    display: inline-block;
    position: relative;
}

.censor_text::after {
    content: '';
    display: block;
    position: absolute;
    background: var(--white);
    height: 51%;
    width: 100%;
    top: 27%;
    transform-origin: center center;
}

.censor_text-large {
    display: inline-block;
    position: relative;
}

.censor_text-large::after {
    content: '';
    display: block;
    position: absolute;
    background: var(--white);
    height: 78%;
    width: 100%;
    top: 3%;
    transform-origin: center center;
}

.underline {
    border-bottom: 1px solid red;
}






/* Action */

.action_project {
    position: relative;
}

    .action_project:hover {
        background: var(--white);
    }

        .action_project_cvs:hover {
            background: linear-gradient(
                120deg, 
                var(--red), 
                var(--blue),
                var(--purple)
            );
            background: url('../img/2020-07_collaborative-extended-sessions/icon_collaborative-extended-sessions.png');
            background-size: cover;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.action_project-poster {
    transform: scale(1);
    transition: transform .3s ease-in-out;
}

    .action_project-poster:hover {
        transform: scale(1.03);
    }

.action_text {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-position: under;
    color: var(--white) !important;
}

    .action_text:hover {
        cursor: pointer;
        color: var(--accent) !important;
    }

.action_text_subtle {
    color: inherit;
}

    .action_text_subtle:hover {
        text-decoration: underline;
        text-decoration-style: dotted;
        text-decoration-thickness: 1px;
        text-underline-position: under;
        cursor: pointer;
        color: inherit;
    }

.action_headline {
    transition: .2s all ease-in-out;
}

    .action_headline:hover {
        text-decoration: underline;
        text-decoration-style: dotted;
        text-decoration-thickness: 0px;
        text-underline-offset: 6px;
    }

    .action_headline_red:hover {
        cursor: pointer;
        color: var(--red) !important;
    }

    .action_headline_blue:hover {
        cursor: pointer;
        color: var(--blue) !important;
    }

    .action_headline_light-blue:hover {
        cursor: pointer;
        color: var(--light-blue) !important;
    }

    .action_headline_green:hover {
        cursor: pointer;
        color: var(--green) !important;
    }

    .action_headline_yellow:hover {
        cursor: pointer;
        color: var(--yellow) !important;
    }






/* Share */

.share_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}






/* Responsive */

/*@media
(max-width: 780px) {

    .typography_headline-large {
        font-size: 24vw;
    }

    .typography_headline-medium {
        font-size: 24vw;
    }

    .typography_paragraph-large,
    .typography_paragraph-medium {
        font-family: var(--neue-montreal);
        font-weight: normal;
        font-size: 21px;
        line-height: 160%;
        letter-spacing: 0.03em;
    }

    .button_secondary-row {
        width: calc(100% - 72px);
        padding: 36px;
    }

}*/