/* basic settings */

body {
    margin: 0;
    color: #eeeeee;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: "Raleway",sans-serif;
}

a {
    color: darkgrey;
}

a:link {
    text-decoration: none;
}
  
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #eeeeee;
}

a:active {
    text-decoration: none;
}

/* global content styling */

.baseframe {
    padding-left: 0;
}

.align-right {
    float: right;
}

.center-content {
    display: flex;
    flex-flow: column;
}

.center-column {
    display: inline-flex;
    justify-content: center;
}

.container {
    width: 900px;
}

.container ul {
    list-style: square;
}

#contact {
    list-style: none;
}

.about-us {
    text-align: justify;
}

@media only screen and (max-width: 920px) {
    .content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .extra-padding {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #menuBtn {
        position: fixed;
        z-index: 100;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
    }
    
    #topbar {
        display: none;
        position: fixed;
        z-index: 99;
        background-color: #111111;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
    }
}

@media only screen and (min-width: 921px) {
    .content {
        width: 900px;
        margin: auto;
    }

    .extra-padding {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #menuBtn {
        display: none;
        position: fixed;
        z-index: 100;
        height: 0;
        width: 0;
    }
    
    #topbar {
        position: fixed;
        z-index: 99;
        background-color: #111111;
        left: 0;
        top: 0;
        width: 100%;
        height: 1.3rem;
        padding-top: 2px;
        margin: 0;
    }
} 

.btnflip {
    /* width: 6rem; */
    height: 6vh;
}

.top {
    position: absolute;
    left: 50%;
    top: 2rem;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}

.bottom {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}

.navelement {
    text-align: center;
    justify-content: center;
}

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.sizedToContentHeight {
    flex: 0 1 auto;
}

.sizedToMaxHeight {
    flex: 1 1 auto;
}

.sizedToFooter {
    flex: 0 1 100px;
}

/* page elements */

#sidebar{
    position: fixed;
    z-index: 100;
    background: #404040;
    height: 100%;
    width: 180px;
    left: -180px;
    transition: left 250ms;
}

#sidebar ul {
    list-style: none;
    font-size: 1.2em;
}

#sidebar ul li {
    padding-bottom: 1em;
}

#menuBtn #openState {
    display: none;
}

#menuBtn:target ~ div#sidebar {
    left: 0;
}

#menuBtn:target #openState {
    display: unset;
}

#menuBtn:target #closedState {
    display: none;
}

.page {
    width: 100vw - 1rem;
    height: calc(100vh - 12vh);
    padding-top: 100px;
    padding-bottom: 100px;
}

#page1 {
    background-image: url("images/scott-graham-5fNmWej4tAA-unsplash_bearbeitet.jpg");
    background-size: cover;
}

#logo {
    width: 50rem;
}

#page2 {
    /* background-color: #3f3f3f; */
    background-image: url("images/florian-steciuk-F7Rl02ir0Gg-unsplash_bearbeitet2.jpg");
    background-size: cover;
}

#page3 {
    background-image: url("images/marvin-meyer-SYTO3xs06fU-unsplash_edited.jpg");
    background-size: cover;
}

#page4 {
    /* background-color: #5f5f5f; */
    background-image: url("images/pawel-czerwinski--0xCCPIbl3M-unsplash.jpg");
    background-size: cover;
}