html,
body {
    margin: 0;
    cursor: pointer;
    /* overflow: hidden; */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.wrapper {
    background-image: url('assets/hintergrund_matte.jpg');
    background-size:cover;
    /* background-repeat: round; verzieht proportionen (funny)*/
    /*width: 100vw;*/
    height: 100vh;
    background-attachment: fixed;
    position: relative;
    z-index:0;
}

/* KALENDER_______________________________________________________________________________________________ */

.kalender {
    position: fixed;
    top:10%;
    left: 1%;
    height: 60%;
    width: 30%;
    color: transparent;
}

/* NOTE________________________________________________________________________________________________ */

.information {
    position: fixed;
    left: 45%;
    bottom: 10%;
    width: 40%;
    z-index: 2;
}

/* TASSE________________________________________________________________________________________________ */

.positiontasse {
    position: fixed;
    top: 5%;
    right: 5%;
    width: 22%;
    height: 45%;
}

.tasse {
    width: 100%;
    height: 100%;
    background-image: url('assets/tasse_1.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: teetrinken 60s infinite step-start;
    display:none;
}


/* positionen anpassen */
@keyframes teetrinken {
    0% {
        background-image: url('assets/tasse_1.png');
    }
    20% {
        background-image: url('assets/tasse_2.png');
    }
    40% {
        background-image: url('assets/tasse_3.png');
    }
    60% {
        background-image: url('assets/tasse_4.png');
    }
    80% {
        background-image: url('assets/tasse_5.png');
    }
   100% {
        background-image: url('assets/tasse_1.png');
    }
}

/* KERZE________________________________________________________________________________________________ */

.kerze {
    position: fixed; /*unterschied fixed und absolute?*/
    top: 2%;
    right: 30%;
    width: 10%;
    z-index: 2;
    display: none;
}

.kerzeaus {
    position: fixed; /*unterschied fixed und absolute?*/
    top: 13%;
    right: 30%;
    width: 10%;
    z-index:1;
    opacity:0;
}


/* BOX________________________________________________________________________________________________ */
.jbl {
    position: fixed; /*unterschied fixed und absolute?*/
    top: 2%;
    right: 40%;
    width: 27%;
    display: none;
    z-index: 2;
}

.jbllicht {
    position: fixed;
    top: 3%;
    right: 42%;
    width: 25%;
    display: none;
}

/* GEODREIECK________________________________________________________________________________________________ */

.geodreieck {
    position: fixed; /*unterschied fixed und absolute?*/
    top: 50%;
    right: 30%;
    width: 40%;
    display: none;
    opacity: 0.85;
}

/* STIFT________________________________________________________________________________________________ */

.stift {
    position: fixed; /*unterschied fixed und absolute?*/
    top: 50%;
    right: 5%;
    width: 30%;
    display: none;
    z-index: 3;
}

.zeichnen {
    position: fixed;
    border-radius: 100vw;
    background: linear-gradient(to top right, rgb(6, 6, 96), rgb(80, 0, 94));
    pointer-events: none;
}