:root{
--header-size: 60px;
--footer-size: 30px;
}

html {
    font-family: Calibri, 'sans-serif';
}


header {
    display: grid;
    grid-template-areas: ".";
    justify-content: center;
    position: fixed;
    background-color: black;
    width: 100%;
    text-align: center;
    height: var(--header-size);
}

header, footer, h1, h2, .button {
    font-family: Quicksand, Calibri, 'sans-serif';
}

/* Navigation */
#logo-and-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#page-nav {
    display: flex;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    min-width: 160px;
    z-index: 1;
}

.show {
    display: block;
}

li {
    display: inline;
}

li > a {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

li > a:hover, p > a:hover {
    color: rgb(146, 146, 146);
}

#submenu {
    float: none;
    text-align: left;
    display: grid;
    grid-template-areas: ".";
    margin-top: 10px;
}

#submenu li {
    margin: 7px 5px 1px 5px;
    padding-top: 7px;
    border-top: solid white 1px;
}

/* Hauptteil */
main {
    padding-top: 30px;
    overflow: hidden;
}


/* Überschrift */
h1, h2 {
    padding-bottom: 10px;
    text-align: center;
}

h1 {
    font-size: 26pt;
}

.impressum-item h2 {
    padding-top: 15px;
    padding-bottom: 5px;
}

/* Grid-Container für das Haupdesign + Zubehör */
.grid-container-6-4 {
    display: grid;
    /* grid-template-areas: ". ."; */
    grid-template-columns: 6fr 4fr;
}

.grid-container-4-6 {
    display: grid;
    /* grid-template-areas: ". ."; */
    grid-template-columns: 4fr 6fr;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    min-height: 550px;
}

.impressum-item {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-height: 100vh;
    padding-top: calc(var(--header-size) + 5vh);
}

.wrapper-left {
    padding-left: 25%;
    padding-right: 10%;
}

.wrapper-right {
    padding-left: 10%;
    padding-right: 25%;
}

.wrapper-middle {
    padding-left: 12%;
    padding-right: 12%;

}

.content-block {
    margin-bottom: var(--header-size);
}

.centered-text {
    text-align: center;
}

p > a {
    color: black;
}

/* Elemente, die mobil und auf dem Desktop unterschiedlich sind */
.mobile-visible {
    visibility: hidden;
    height: 0px;
    width: 0px;
}

.desktop-visible {
    visibility: visible;
    height: 100%;
    width: 100%;
}

/* Farben */
.orange {
    background-color: #FFB53D;
}

.yellow {
    background-color: #F0E809;
}

.blue {
    background-color: #44BEF2;
}

.cyan {
    background-color: #32FAD8;
}

.purple {
    background-color: #8415FA;
}

.dark-pink {
    background-color: #BA31F0;
}

.brown {
    background-color: #C77224;
}

.red {
    background-color: #D10E00;
}

.light-pink {
    background-color: #c4888a;
}

.dark-brown {
    background-color: #7b3f34;
}

.green1 {
    background-color: #65DB54;
}

.green2 {
    background-color: #039C2F;
}

.black {
    background-color: black;
    color: white;
}

/* Button */ 
.image-with-button {
    height: 60%;
}

.button {
    border:2px solid black;
    top: 0;
    padding: 10px;
    margin: 0% 33%;
    text-align: center;
    font-size: 20pt;
    min-width: 150px;
    text-decoration: none;
    color: black;
}

/* Hoverings für die Buttons */
.button:hover {
    cursor: pointer;
}

#startbutton:hover {
    background-color: #9bf38d;
}

#obstacle-chord-button:hover {
    background-color: #d468ff;
}

#rekursionbutton:hover {
    background-color: #fffa6a;
}

.button-ausgabenliste:hover {
    background-color: #85d8fb;
}

#button-bakery-match:hover {
    background-color: #ba8b5f;
}

#button-komischerknipser:hover {
    background-color: #c49d9e;
}

.button-ausgabenliste:last-of-type {
    margin-top: 2vh;
}

/* Menü  */ 
#menu > li, #logo {
    padding: 10px;
    font-size: 14pt;
}

#logo {
    height: 25px;
}

/* Bilder */ 
#myself {
    visibility: visible;
    bottom: 0;
    width: 75%;
    margin-bottom: -4px;
    min-width: 270px;
}

#myself-mobile{
    visibility: hidden;
    width: 0px;
    height: 0px;
}

#screenshot-ausgabenliste, #screenshot-bakery-match {
    max-height: 55vh;
    min-height: 300px;
    margin-bottom: 15px;
}

#screenshot_komischerknipser, #bild-obstacle-chord {
    max-width: 45vw;
    min-width: 285px;
    margin-bottom: 40px;
}

.anchorpoint {
    top: calc(-(var(--header-size)));
}

/* Bild und Button */ 
.image-with-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3vh;
}

.image-with-button > a {
    width: 20%;
}

/* Footer */ 
footer {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    height: var(--footer-size);
}

/* Hamburger Menü START*/
#hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

/* Gestaltung des "Hamburgers" */
#hamburger .hamburger-inner, #hamburger .hamburger-inner::after,
#hamburger .hamburger-inner::before {
    background-color: white;
    width: inherit;
    height: 4px;
    position: absolute;
    
}

/* Display Block bei Hamburger */
#hamburger .hamburger-inner::after, #hamburger .hamburger-inner::before {
    display: block;
    content: "";
}

/* Strich oben */
#hamburger .hamburger-inner::before {
    top: -10px;
}


/* Strich unten */
#hamburger .hamburger-inner::after {
    bottom: -10px;
}

/* "X", wenn Hamburger aktiv */
#hamburger.active .hamburger-inner {
    transform: rotate(45deg);
}

/* Hamburger, wenn aktiv */
#hamburger.active .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

/* "X", wenn Hamburger aktiv */
#hamburger.active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
}

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

    /* Header */
    header {
        display: grid;
        justify-content: space-between;
    }

    /* Menü */
    #hamburger {
        position: fixed;
        display: flex;
        align-self: center;
        margin-left: 15px;
    }

   #logo {
       align-self: center;
   }

    #logo-and-nav {
        width: 100vw;
        flex-direction: column;
        align-items: flex-start;
    }

    #page-nav {width: auto;}
    #logo-and-nav.active #page-nav ul {
      display: flex;
      flex-direction: column;
    }
    
    #logo-and-nav.active{
        padding-top: 8px;
    }

    #page-nav ul{
      display: none;
    }

    #page-nav ul li{
        width: 100vw;
        background-color: black;
        margin-left: -1.2vw;
    }

    #page-nav #menu li:last-of-type{
        padding-bottom: 1000px;
    }

    .dropdown-content {
        margin-left: 1.2vw;
    }

    #submenu {
        min-width: 100vw;
    }

    #submenu li {
        text-align: center;
        align-self: center;
        max-width: 50vw;
    }

    #submenu li:last-of-type {
        border-bottom: solid white 1px;
    }
    
    /* Grid-Container für das Haupdesign + Zubehör */
    .grid-container-6-4 {
        grid-template-columns: 10fr;
    }

    .grid-container-4-6 {
        grid-template-columns: 10fr;
    }

    .wrapper-left, .wrapper-right {
        padding-left: 12%;
        padding-right: 12%;
    }

    /* Elemente, die mobil und auf dem Desktop unterschiedlich sind */
    .mobile-visible {
        visibility: visible;
        height: 100%;
        width: 100%;
    }

    .desktop-visible {
        visibility: hidden;
        width: 0px;
        height: 0px;
    }

    .button {
        margin: 0% 25%;
    }

    /* Andere Anordnung der Home-Seite */

    .mobile-reversed-first {
        order: 1;
    }

    .mobile-reversed-second {
        order: 2;
    }

    /* Verhindert, dass der Text aus dem Container rutscht. */
    #home-text {
        min-height: 700px;
    }

    /* Welches Myself-Bild wird im mobilen angezeigt */
    #myself {
        visibility: hidden;
        display: none;
        width: 0px;
        height: 0px;
    }

    #myself-mobile{
        visibility: visible;
        height: 100%;
        width: 35%;
        margin-bottom: -4px;
        margin-left: 30%;
        min-width: 160px;
    }
}