style.scss

---
---
html {
    scroll-behavior: smooth;
}

@import  '_config';

body {
    font-family: TitilliumWeb;
    margin: 0;
    background-color: $blue;
    /*background-image: url(transparent-background-image-b.png);*/
}

h1, h2 {
    font-family: WalterTurncoat;
}
h1 {
    font-size: 32px;
}
* {
    box-sizing: border-box;
}
.header {
    position: sticky;
    left:0;
    top: 0;
    right: 0;
    background-color: $blue;
    z-index: 10;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    justify-content: space-between;
    padding: 0 1em;

    .logo-wrapper {
        display: table;
        margin-bottom: 4px;
    }
    .logo { /*currently text*/
        display: table-cell;
        vertical-align: middle;
        margin: 0 auto;
        font-size: 2rem;
        font-family: WalterTurncoat;
        color: $white;
        user-select: none;
        cursor:pointer;
    }
    .tab {
        display: inline-block;
        position: relative;
        padding: 0.5em 1em;
        color: $white;
        text-decoration: none;
        font-family: TitilliumWeb;
        font-size: 1.25rem;
        margin-top: 4px;
        margin-bottom: 4px;
        &:after {
            content:"";
            width: 0;
            height: 4px;
            background-color: $lightblue;
            position:relative;
            display: block;
            margin: 0px auto -8px;
            transition:all 0.25s ease-in-out;
        }
        &:hover:after {
            width: 80%;
        }
    }
}

.image-slider {
    display: flex;
    /*max-width: 1280px;*/
    margin: 0.5em 1em 0;
    img {
        width: 100%;
        display: block;
    }
    .single-big {
        flex: 3;
        position: relative;
        .back {
            @include overlay;
        }
        .front.disappearing {
            opacity: 0;
            transition: opacity 0.5s ease-out;
        }
    }
    .multiple-small {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #0008;
        box-sizing: border-box;
    }
    .single-small {
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        .overlay {
            @include overlay;
            transition: background-color 0.25s;
            background-color: #0006;
            display: flex;
            text-align: center;
            p {
                color: white;
                background-color: #0006;
                flex: 1;
                align-self: flex-end;
            }
            p.loading {
                opacity: 0;
            }
        }
        &:not(.active) img{
                filter: grayscale(100%);
        } 
        &:hover {
            .overlay{ background-color: #0000; }
            img { filter: none; }
        }
    }
}
.content {
    margin: 0 1em 0.5em;
    padding: 2em 0;
    background-color: white;
    background-image: url(transparent-background-image-c.png);
    a {
        text-decoration: none;
        color: $blue;
        border-bottom: 2px solid $blue;
    }
    a:hover {
        color: $green;
        border-bottom: 2px solid $green;
    }
}
section {
    max-width: 1280px;
    margin: 6em auto;
    position: relative;
    padding: 0 2em;
}
section.centered {
    ul {
        max-width: 800px;
        padding: 1em 2em;
        font-size: 18px;
        line-height: 1.7;
        margin: 0 auto;
        backdrop-filter: blur(5px);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    }
    p, h1, h2, h3 {
        text-align: center;
    }
    
}
section.two-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    > * {
        width: 50%;
    }
    .right {
        width: calc(50% - 8em) !important;
        margin: 0 2em;
        position: absolute;
        right: 0;
    }
}

[id]{
    scroll-margin-top: 100px;
}

.downloads {
    backdrop-filter: blur(5px);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    padding: 0 2em;
    a {
        background-color: #64A56B !important;
        color: white !important;
        border-bottom: none;
        padding: 0.5em;
        border-radius: 2em;
        display: inline-block;
        position: relative;
        top: -0.5em;
        transition: 0.5s;
        text-align: center;
        width: 100%;
        &:hover, &:focus {
            border-bottom: none;
            box-shadow: inset 30em 0 0 0 #8fc866;
        }
    }
}

ul li {
    &::marker {
        color: $blue;
        content:"─  ";
    }
}

hr {
    color: $blue;
    opacity: 0.25;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2em;
}