
@use "mixins" as *;

$num-subpages: 3;
$forty-white: #f2ecdf;
$forty-brown: #0d0907;

$header-zindex: 500;
$overlay-zindex: 300;

.download {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 4px;
    padding-top: 4px;
    background-image: url("../assets/download_button.webp");
    background-repeat: no-repeat;
    background-size: 100% 105%;
    background-clip: border-box;
    font-size: 0.6cm;
    color: $forty-white;
    text-decoration: none;
    text-align: center;
}

.paper-text-box-always-narrow {
    background-image: url("../assets/text_background_narrow.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: border-box;

    span, p, ul {

        padding-left: 12%;
        padding-right: 12%;

        color: black;
        font-size: 0.5cm;

        @include narrow {
            font-size: 3.5vw;
        }

    }

    a {
        color: $forty-brown;
        font-style: italic;
    }

    a:hover {
        cursor: pointer;
        color: #5f4334;
    }

    h3 {
        color: black;
        font-size: 0.8cm;

        @include narrow {
            font-size: 4vw;
        }
    }

}

.paper-text-box {
    background-image: url("../assets/text_background.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: border-box;

    @include narrow {
        background-image: url("../assets/text_background_narrow.webp");
    }

    span, p, ul {

        padding-left: 12%;
        padding-right: 12%;

        color: black;
        font-size: 0.5cm;

        @include narrow {
            font-size: 3.5vw;
        }

    }

    a {
        color: $forty-brown;
        font-style: italic;
    }

    a:hover {
        cursor: pointer;
        color: #5f4334;
    }

    h3 {
        color: black;
        font-size: 0.8cm;

        @include narrow {
            font-size: 4vw;
        }
    }

}

.emphasis {
    font-weight: bold;            
}

.paper-text-box-alternate {
    background-image: url("../assets/text_background_alternate.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: border-box;

    span, p, ul {

        color: black;
        font-size: 0.5cm;

        @include narrow {
            font-size: 3.5vw;
        }
    }

    a {
        color: $forty-brown;
        font-style: italic;
    }

    a:hover {
        cursor: pointer;
        color: #5f4334;
    }

    h3 {
        margin-left: 4%;
        color: black;
        font-size: 0.8cm;

        @include narrow {
            font-size: 4vw;
        }
    }
}

.deco-card {
    position: absolute;
    width: 18%;
}

body {
    margin: 0 0 0 0;
    overflow-y: scroll;
    // overflow-x: scroll;
    overflow-x: clip;
    font-family: "Bahnschrift";
    color: $forty-white;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background-image: url("../assets/header.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 7px;
    z-index: $header-zindex;

    * + * {
        margin-left: 5%;
    }

    .logo {
        height: 2.0cm;
    }

    a, span {
        margin-top: 0.0;
        margin-bottom: 0;
        font-size: 0.6cm;
        color: $forty-white;
        text-decoration: none;

        @include hamburgerMenu {
            display: none;
        }

        &:hover {
            text-decoration: underline;
        }
    }

    #header-spacer {
        flex-grow: 1.0;
    }

    #header-download {
        margin-right: 0.5cm;
    }

    #hamburger-menu {
        height: 0.8cm;
        display: none;
        margin-right: 2%;

        @include hamburgerMenu {
            display: block;
        }

        @include navbarOpen {
            display: none;
        }
    }

    #header-our-project.cur-page-2, #header-our-project.cur-page-3 {
        display: none;
    }

    #header-to-main.cur-page-1 {
        display: none;
    }

}

nav {
    display: none;
    position: fixed;
    height: 100vh;
    width: 65vw;
    margin-left: 110vw;
    z-index: $header-zindex + 100;

    background-image: url("../assets/hamburger_background.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    transition: margin-left 0.3s;

    a {
        color: $forty-white;
        text-decoration: none;
        font-size: 0.7cm;
    }

    @include hamburgerMenu {
        display: flex;
    }

    @include navbarOpen {
        margin-left: 35vw;
    }

    @include narrow {
        width: 80vw;

        @include navbarOpen {
            margin-left: 20vw;
        }
    
    }

    &:nth-child(1) {
        margin-top: -1cm;
    }

    span {
        font-size: 0.7cm;
    }

    * + * {
        margin-top: 0.8cm;
    }
}

#main-content-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100% * $num-subpages;
    background-image: url("../assets/background.webp");
}

section.sub-page {
    width: 33.3333%;
    position: relative;
}

section.sub-page .title-card {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    width: 90%;
    aspect-ratio: 1.646;

    display: flex;
    flex-direction: column;
    align-items: center;

    @include narrow {
        width: 100%;
        margin-top: -4.5cm;
    }

    @include very-wide {
        width: 31.5cm;
    }
}

#overlays {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-image: url("../assets/overlay.webp");
    // background-repeat: no-repeat;
    // background-size: cover;
    // background-position: center;
    pointer-events: none;
    opacity: 1.0;
    z-index: $overlay-zindex;
    // background-color: red;

    * {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    #overlay-multiply {
        background-image: url("../assets/overlay_multiply.webp");
        background-blend-mode: multiply;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: $overlay-zindex + 1;
        // background-size: 100% 100%;
    }

    #overlay-vignette {
        background-image: url("../assets/overlay_vignette.webp");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: $overlay-zindex + 2;
    }

    #overlay-shadow {
        background-image: url("../assets/overlay_cowboy_shadow.webp");
        width: 20cm;
        left: 50%;
        transform: translate(-50%, 0%);
        background-size: contain;
        background-position: center bottom;
        background-repeat: no-repeat;
        z-index: $overlay-zindex + 3;
    }

}

#main-page {

    display: flex;
    flex-direction: column;
    align-items: center;

    #title-map {
        position: relative;
        background-image: url("../assets/map.webp");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 68%;
        margin-top: 2cm;
        background-clip: border-box;
        background-position-y: center;
        background-position-x: 0;
        
        @include narrow {
            width: 90%;
        }

        #main-logo {
            width: 40%;
            margin-top: 20%;
        }

        .download {
            width: 13%;
            margin-top: 8%;
            font-size: 1.8vw;

            @include wide {
                font-size: 0.5cm;
            }

        }

        #deco-revolver-1 {
            position: absolute;
            width: 38%;
            filter: drop-shadow(-15px 15px 10px rgba(0, 0, 0, 0.978));
            transform: rotate(-75deg) translate(-70%, -210%);
        }

        #deco-card-1 {
            top: 8%;
            left: -14%;
            transform: rotate(120deg);

            @include narrow {
                left: -2%;
            }
        }
    
        #deco-card-2 {
            top: 90%;
            left: -12%;
            transform: rotate(10deg);

            @include narrow {
                left: -4%;
            }
        }
    
        #deco-card-3 {
            top: 18%;
            left: 100%;
            transform: rotate(30deg);

            @include very-wide {
                left: 108%;
            }

            @include narrow {
                left: 95%;
            }
        }

    }

    #trailer-container {
        background-image: url("../assets/trailer_container_background.webp");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 90%;
        background-clip: border-box;
        background-position-y: center;
        background-position-x: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        @include narrow {
            width: 100%;
        }

        @include wide {
            width: 26cm;
        }

        video {
            width: 75%;
            margin-top: 3cm;
            margin-bottom: 3cm;
            transform: rotate(2deg);
        }

    }

    #main-description {
        position: relative;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: -2cm;
        transform: rotate(-1deg);
        z-index: 0;

        @include narrow {
            width: 100%;
        }

        @include wide {
            width: 29cm;
        }

        #main-description-text-container {
            padding: 1cm 10% 2cm 10%;

            @include narrow {
                padding-top: 2.5cm;
                padding-bottom: 6cm;
            }
        }

        p {
            color: black;
            font-size: 0.5cm;

            @include narrow {
                font-size: 3.5vw;
            }
        }

        h3 {
            color: black;
            font-size: 0.8cm;

            @include narrow {
                font-size: 4vw;
            }
        }

        #deco-hat {
            position: absolute;
            display: none;
            z-index: $overlay-zindex - 100;

            @include wide {
                display: block;
                width: 35%;
                transform: translate(145%, -90%);
            }

            @include very-wide {
                display: block;
                width: 53%;
                transform: translate(115%, -80%);
            }

        }

        #deco-card-4 {
            top: 20%;
            left: -10%;
            transform: rotate(10deg);
            @include narrow {
                display: none;
            }
        }

        #deco-card-5 {
            top: 40%;
            left: 90%;
            transform: rotate(15deg);

            @include wide {
                left: 100%;
            }

            @include very-wide {
                left: 107%;
            }

            @include narrow {
                left: 90%;
            }
        }

        #deco-card-6 {
            width: 15%;
            top: 75%;
            left: -8%;
            transform: rotate(32deg);
            z-index: 3;

            @include narrow {
                width: 20%;
                left: 4%;
                top: 85%;
            }
        }

        #deco-card-7 {
            width: 15%;
            top: 88%;
            left: -16%;
            transform: rotate(-10deg);
            z-index: 2;

            @include narrow {
                width: 20%;
                top: 92%;
                left: 4%;
            }
        }

        #deco-card-8 {
            width: 12%;
            top: 88%;
            left: -5%;
            transform: rotate(10deg);
            z-index: 3;

            @include narrow {
                width: 16%;
                top: 92%;
                left: 15%;
            }
        }

        #micro-comic-container {
            background-image: url("../assets/background_grey.webp");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 35%;
            aspect-ratio: 1;
            top: 78%;
            left: 75%;

            @include narrow {
                top: 80%;
                left: 40%;
                width: 52%;
            }

            @include wide {
                width: 40%;
                top: 73%;
                left: 70%;
            }

            @include very-wide {
                width: 40%;
                top: 70%;
                left: 85%;
            }

            #deco-micro-comic {
                width: 60%;
            }

        }

    }

    #feature-list {

        width: 80%;
        padding-top: 2cm;
        padding-bottom: 2cm;
        margin-top: 2cm;
        margin-bottom: 3cm;

        transform: rotate(3deg);

        @include wide {
            width: 60%;
        }

        @include narrow {
            width: 100%;
        }

        ul {
            padding-left: 12%;
            padding-right: 12%;
        }

    }

    #open-source-description {
        
        width: 50%;
        padding-top: 1cm;
        padding-bottom: 1cm;
        padding-left: 2.0cm;
        margin-left: -5cm;
        margin-top: 1cm;
        transform: rotate(-2deg);

        @include narrow {
            width: 70%;
            margin-left: -1cm;
        }

        #deco-card-9 {
            left: 115%;
            top: 25%;
            transform: rotate(-30deg);

            @include narrow {
                display: none;
            }
        }

        #deco-card-10 {
            left: 120%;
            top: 15%;
            transform: rotate(-40deg);
            
            @include narrow {
                display: none;
            }
        }

        #deco-card-11 {
            left: 125%;
            top: 35%;
            transform: rotate(20deg);
            
            @include narrow {
                display: none;
            }
        }

    }

}

#about-page {
    
    display: flex;
    flex-direction: column;
    align-items: center;

    #about-page-title {
        position: relative;
        background-image: url("../assets/about_page_title.webp");
        background-size: 100% 100%;
        margin-top: -0.5cm;
        width: 70%;
        aspect-ratio: 1540 / 1061;

        @include narrow {
            margin-top: 1cm;
        }

        #deco-revolver-2 {
            position: absolute;
            width: 45%;
            transform: rotate(-8deg) translate(-130%, 170%);
            filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.978));
            z-index: 200;

            @include narrow {
                transform: rotate(-8deg) translate(-120%, 170%);
            }
        }
    }

    #behind-the-project {
        position: relative;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 1cm;
        // margin-left: -15%;
        padding-top: 1cm;
        padding-bottom: 1.5cm;
        // transform: rotate(-3deg);
        z-index: 0;

        @include narrow {
            width: 90%;
            margin-top: 2cm;
        }

        @include wide {
            width: 28cm;
        }

        #group-picture-description {
            position: absolute;
            width: 40%;
            top: 30%;
            left: 88%;
            transform: rotate(10deg);

            @include narrow {
                display: none;
            }
        }

    }

    #group-picture-standalone {
        display: none;
        width: 60%;
        transform: rotate(-10deg);
        margin-top: 0cm;

        @include narrow {
            display: block;
        }
    }

    #project-history {
        position: relative;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 1.5cm;
        padding-top: 1.5cm;
        padding-bottom: 1.5cm;
        z-index: 0;

        @include narrow {
            width: 100%;
            padding-top: 2cm;
            margin-top: 2cm;
        }

        @include wide {
            width: 28cm;
        }

        p {    
            font-size: 0.5cm;
    
            @include narrow {
                font-size: 3.0vw;
            }
        }
    
        h3 {
            font-size: 0.8cm;
    
            @include narrow {
                font-size: 3.6vw;
            }
        }

        #group-picture-description {
            position: absolute;
            width: 40%;
            top: 30%;
            left: 88%;
            transform: rotate(10deg);

            @include narrow {
                display: none;
            }
        }
    
    }

    #member-pictures {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        align-content: space-between;
        flex-wrap: wrap;
        width: 80%;
        filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.978));

        .member-picture {
            width: 20%;
            margin: 4%;

            @include very-wide {
                margin: 2cm;
            }

            @include wide {
                margin: 1.2cm;
            }

            @include narrow {
                width: 30%;
            }

        }

        #member-picture-1 {
            transform: rotate(-10deg);
        }

        #member-picture-2 {
            transform: rotate(4deg);
        }

        #member-picture-3 {
            transform: rotate(0deg);
        }

        #member-picture-4 {
            transform: rotate(-6deg);
        }

        #member-picture-5 {
            transform: rotate(10deg);
        }

    }

}

#imprint-page {
  
    display: flex;
    flex-direction: column;
    align-items: center;

    #imprint-text {
        position: relative;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 0;
        margin-top: 2cm;
        padding-bottom: 2cm;
        padding-top: 2cm;

        @include narrow {
            width: 100%;
        }

        @include wide {
            width: 30cm;
        }

    }

}

.footer-spacer {
    flex-grow: 1.0;
}

footer {
    background-image: url("../assets/footer.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 10cm;
    // height: 20vw;
    z-index: $header-zindex;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    @include narrow {
        height: 5cm;
    }

    .easy-name-logo {
        color: $forty-white;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.3cm;
        font-size: 0.7cm;
        line-height: 1.5cm;

        img {
            width: 4cm;
        }

        @include narrow {
            font-size: 0.35cm;
            line-height: 0.75cm;
            img {
                width: 2cm;
            }
        }
    }

    .links {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        flex-grow: 1.0;
        
        a, span {
            color: $forty-white;
            text-decoration: none;
    
            font-size: 3vw;
    
            @include wide {
                font-size: 0.6cm;
            }

        }

    }

    .copyright {
        background-color: rgb(79, 79, 79);
        width: 100%;
        height: 1.2cm;
        line-height: 1.2cm;
        text-align: center;

        @include narrow {
            font-size: 3vw;
            line-height: 6vw;
            height: 6vw;
        }
    }

}

.hover-pointer:hover {
    cursor: pointer;
}
