/* Farbschema 2
#0b0b0d Text
#f0f0f2 Hintergrund
#f0d1b5 Hintergrund 2
#d98943 Primary Button
#8c593b Secondary Button
#d99873 Accent
*/

/*Generelle Einstellungen*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5;
    font-family: arial;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f0d1b5;
    color: #0b0b0d
}

#wrapper{
    width: 80%;
    margin: 0 auto;
}

button:hover{
    cursor: pointer;
}

.container{
    border-radius: 10px;
    background: #f0d1b5;
    box-shadow:  5px 5px 45px #605448,
                -5px -5px 45px #ffffff;
    padding: 20px;
}

/*Navigation*/
.topnav {
    background-color: #d98943;
    overflow: hidden;
    border: 1px;
    margin-bottom: 10px;
    position: sticky;
    top:0px;
    z-index: 100;
}

.topnav a {
    float: left;
    color: #0b0b0d;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    
}

.topnav a:hover {
    background-color: #d99873;
}

.topnav a.active {
    background-color: #8c593b;
    color: #f0f0f2;
}

#platzhalter{
    margin-left: 8%;
}

/*Klassen*/

.subtitle{
    font-size: x-large;
}

.abschnitt{
    padding-top: 60px;
}

.stern{
    float: right;
}

.clearfix{
    clear:both
}

/*Cookie Ansicht*/

#cookies{
    height: 400px;
    width: 70%;
    border: 1px solid;
}

#left, #right{
    width: 14%;
    height: 100px;
    margin-top: 150px;
}

#left{
    float: left;
    border-top: 50.5px solid #f0d1b5;
    border-right: 100px solid #d98943;
    border-bottom: 50.5px solid #f0d1b5;
    border-left: 10px solid #f0d1b5;
    margin-right: 1%;
}

#right:hover{
    border-left: 100px solid #8c593b;
}

#right{
    width: 14%;
    float: right;
    border-top: 50.5px solid #f0d1b5;
    border-left: 100px solid #d98943;
    border-bottom: 50.5px solid #f0d1b5;
    border-right: 10px solid #f0d1b5;
    margin-left: 1%;
}

#left:hover{
    border-right: 100px solid #8c593b;
}


#cookieBeschreibung{
    margin-top: 10px;
}

#zutaten, #zubereitung{
    height: 100%;
}

#zutaten{
    margin-left: 5%;
    width: 35%;
    float: left;
}

#zubereitung{
    margin-left: 40%;
    margin-right: 5%;
    width: 55%;
}

#pdfIcon{
    height: 30px;
    width: 30px;
    margin-right: 10px;
    margin-top: 5px;
    margin-left: 5px;
}

/*Philosophie der Kekse*/

#keksphilosophieVideo{
    float: left;
    margin-left: 5%;
    width: 50%
}

#keksphilosophieAudio{
    float: left;
    width: 35%;
    margin-left: 5%;
}

#keksphilosophieVideo, #keksphilosophieAudio{
    margin-top: 25px;
}

/*Kekse Rangliste*/

#rangliste{
    list-style-type: decimal; 
    width: 95%;
    margin-left: 30px;
}

#rangliste li{
    height: 50px;
    background-color:#d99873;
    margin-bottom: 5px;
    font-size: 30px;
}

#rangliste a{
    color: #0b0b0d;
}

/*Cookie Clicker*/

#keks{
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background-color:#d98943;
    float: left;
    margin-right: 30px;
    transition: 100ms;
}

#keks:hover{
    background-color: #8c593b;
}

#keks:active{
    transform: scale(0.9);
    background-color:#d98943;
}

#count{
    font-size: 50px;
    margin-left: 30px;
}

#game{
    height: 400px;
}

#download{
    height: 50px;
    width: 210px;
    margin-top: 15px;
    margin-left: 20%;
    background-color: #d98943;
    color:#0b0b0d;
    border-color: #d98943;
    border-radius: 10px;
}

#game{
    margin-top: 5px;
}

#counter1{
    margin-top: 10px;
    margin-bottom: 10px;
}

#reset{
    width: 100px;
    height: 50px;
    background-color: #d99873;
    border-color: #8c593b;
    border-radius: 10px;
}

#reset:hover{
    background-color: #8c593b;
    color: #f0f0f2;
    border-radius: 15px;
}

#pdfAusgabe{
    margin-left: 30px;
    height: 30px;
    width:120px;
    background-color: #d99873;
    border-color: #8c593b;
    border-radius: 10px;
}

#pdfAusgabe:hover{
    background-color: #8c593b;
    color: #f0f0f2;
    border-radius: 15px;
}