/*@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");*/

:root {

    --my_braun: #442721;
    --my_dubraun: #230501;
    --my_orange: #c54f0c;
    --my_weiss: #e4e9ec;
    --my_gold: wheat;

}



* {
    box-sizing: border-box;
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-decoration: none;

}

/*====================================
BASE STYLES
====================================*/
header {

    background: url(img/sruktur.jpg);


    background-size: content no repeat;
    background-position: top left;

    box-shadow: 0px -3px 11px 2px;
    color: #000;
}

body {

    background: var(--my_braun);

    font-family: 'Roboto', sans-serif;

    color: var(--my_weiss);

}



h2,
h3,
h4,
h5,
h6 {

    text-align: center;
    margin-top: 3rem;

}

h2 {
    color: var(--my_orange);
}



/*====================================
HEADER STYLES
====================================*/

.header-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;

    align-items: center;
}

.logo {
    max-width: 150px;
    max-height: 150px;
    margin-top: 22px;
}



/*====================================
MENU STYLES
====================================*/

.main-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 25px;
    /* Space for logo */
    overflow: visible;

    max-width: 700px;

}

a {

    color: var(--my_orange);

}

a:hover {
    color: yellowgreen;
    border-bottom-color: yellowgreen;
}

.main-menu a {
    width: 100%;
    text-align: center;
    padding: .75em 1em;
    display: block;
    color: #222;
    border-bottom: 2px solid #ddd;
}

.main-menu a:hover {
    color: var(--my_orange);
    border-bottom-color: var(--my_orange);
}


/*====================================
DROPDOWN MENU STYLES
====================================*/

.drop-menu {


    display: flex;
    flex-direction: column;
    /* This never changes */
    align-items: center;
    width: 100%;

    transition: max-height .4s, opacity .3s;
    max-height: 0;
    opacity: 0;
    overflow: hidden;

}

.drop-menu > .menu-button {
    height: 100%;
    transition: transform .4s;
    transform: translateY(-300%);
    background: #aaa;

}

.dropdown-wrapper:hover > .menu-button {
    color: var(--my_orange);
    background: #333;
}

.dropdown-wrapper:hover .drop-menu {
    max-height: 300px;
    opacity: 1;
}

.dropdown-wrapper:hover > .drop-menu .menu-button {
    transform: translateY(0%);
}

/*
.drop-menu span {
    color: #000;

}*/



/*====================================
MEDIA QUERIES
====================================*/

@media (min-width: 650px) {


    /*====================================
    DROP-MENU EFFECTS (LARGER SCREENS)
  ====================================*/

    .effect {
        transition: max-height 0s;
        opacity: 1;
        background: transparent;
    }

    .effect .menu-button {
        transform: translateY(0%);
    }


    .scissor .menu-button {
        transform: translateX(-100%);
    }

    .scissor .menu-button:nth-child(2n+1) {
        transform: translateX(100%);
    }

    .dropdown-wrapper:hover .scissor .menu-button {
        transform: translateX(0%);
    }


    .fade-in .menu-button {
        transition: opacity .5s;
        opacity: 0;
    }

    .dropdown-wrapper:hover .fade-in .menu-button {
        opacity: 1;
    }



    .header-container {
        width: 90%;
    }

    .header-container {
        height: 250px;
        justify-content: space-between;

    }

    .main-menu {
        flex-direction: row;

        align-items: flex-start;

        height: 48px;

        margin: 0;
    }

    .main-menu > .menu-button {
        width: 25%;
        max-width: 150px;
    }

    .logo {
        max-width: 150px;
        max-height: 150px;
        margin-top: 15px;
    }

}

@media (min-width: 850px) {

    .header-container {
        flex-direction: row;

        justify-content: space-around;
        height: 160px;
    }

    .main-menu {

        width: 65%;
        justify-content: space-between;
    }

    .logo {
        margin: 15px, 0, 0, 0;
    }

}

#start {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    margin: 3rem;
    margin-top: 6rem;


}

#start article h1 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 3.3rem;
}

#start article p {

    margin-top: 1.5rem;

    margin-bottom: 1.2rem;
}

#start article {

    display: block;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 0;

    max-width: 330px;

    text-align: justify;
}

#mm {

    margin-top: 4rem;
}

#ma {

    transform: translateY(19px);
}

#video {

    margin-top: 0;
}



span {

    /*    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;*/
    color: #fff6a9;

    font-family: "Sacramento", "Roboto", cursive;
    text-align: center;
    animation: blink 12s infinite;
    -webkit-animation: blink 12s infinite;
}

@keyframes blink {

    20%,
    24%,
    55% {
        color: #fff;
        text-shadow: none;
    }

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {

        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 55px #ff0000, 0 0 10px #ff8d00, 0 0 80px #ff0000;
        color: #fff6a9;
    }
}



.sch {
    border-style: groove;
    border-color: beige;

    box-shadow: 2px 2px 2px 1px var(--my_dubraun);
}

.gallery {

    text-align: center;

    width: auto;
    margin: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

figure {

    box-sizing: border-box;

    max-width: 330px;
    height: auto;
    margin: auto;

    margin: 1rem 0 2rem 0;
    padding: 6px;
    border: 1px solid var(--my_weiss);
    border-radius: 6px;
    text-align: center;

}

#ozh {

    margin-top: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;


}


#kniga {



    position: relative;
    margin: 35px auto;
    width: 637px;
    border: 4px solid var(--my_weiss);

    outline: 1px solid #999;
    height: 303px;

    background: url(img/titel.jpg);

    background-position: top right;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: wheat;
}

#allpic {
    width: 55px;
    height: 284px;
    background: #ccc;
    margin: 5px 0 0 5px;
    float: left;
    transition: all .5s ease-out;
    overflow: hidden;
    border: 2px solid var(--my_weiss);
    ;
    outline: 1px solid #999;
}

#allpic:hover {
    cursor: pointer;

    width: 200px;
}

#end {

    margin-top: 6rem;

    background-color: none;

    border-style: none;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#end .end {

    border-style: none;

    line-height: 1.5;

    color: var(--my_braun);

}

#end figcaption {

    transform: translateY(-111px);

}


.form {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-top: 5px;
}

.form a:hover {

    background-color: var(--my_braun);

}

.form a {

    display: inline-block;
    padding: 1px 4px;
    padding-bottom: 0;
    border: 2px solid var(my_braun);
    border-radius: 2px;

    background-color: #ffffff55;

}


.leiterlinks {
    position: fixed;
    left: 0;
    bottom: 0;
}

.leiterrechts {
    position: fixed;
    right: 0;
    bottom: 0;
}