body {
    background-color: black;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    height: 2000px;
}

.div {
    font-family: ;
}

/* Menü */
.dropbtn {
    background-color: grey;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color:lightgrey;
}


/* Pfeil back to top */
#backtotop {
    position: fixed;
    bottom: 10px;
    float: right;
    right: 20%;
    left: 90%;
    max-width: 30px;
    width: 100%;
    background-color: lightgrey;
    padding: .5px;

}

#backtotop:hover {
    background-color: #201e20;
}

/* Reihe / Schatten */
.row {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    flex: wrap;
    font-size: 20px;
    padding: 2%;
}

.row:hover {
    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
}

.row-white:hover {
    -moz-box-shadow: inset 0 0 5px #ffffff;
    -webkit-box-shadow: inset 0 0 15px #ffffff;
    box-shadow: inset 0 0 20px #ffffff;
}

/* Animation to see */
.row:hover .letterspacing {
    letter-spacing: 20px;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    font-size: 150%;
    color: lightskyblue;
    font-family: 'Mate SC', serif;
}

/* Animation and me */
.row:hover .andme {
    font-family: 'Mate SC', serif;
    background: linear-gradient(53.13deg, #FFD33D 0, #FB8532 16.02%, #EA4A5A 28.06%, #8A63D2 56.92%, #2188FF 72.93%, #34D058 84%, #FFD33D 100%);
    background-size: auto;
    background-clip: border-box;
    background-clip: text;
    display: inline-block;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 6.28s alternate infinite;
    animation-duration: 6.28s;
    background-size: 300%;
    font-size: 50px;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

@keyframes shine {
    0% {
        background-position: 200% center
    }

    62.8% {
        background-position: 100% center
    }

    100% {
        background-position: 200% center
    }
}

/* Animation heart*/
.row:hover .heart {
    margin: 1%;
    position: relative;
    width: 10px;
    height: 25px;
    text-align: left;
    line-height: 10px;
    animation: beat 2s ease 0s infinite;
    font-family: 'Mate SC', cursive;
    font-size: 20px;
    color: red;
}

.heart:before,
.heart:after {
    position: absolute;
    width: 10%;
    height: 10%;
    top: 0;
    left: 0;
    opacity: 0.4;
    border-radius: inherit;
}

.heart:before {
    z-index: -2;
    animation: beat-before 1.5s ease-out 200ms infinite;
}

.heart:after {
    z-index: -1;
    animation: beat-after 1.5s ease-out 400ms infinite;
}

@keyframes beat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2.1);
    }
}

@keyframes beat-before {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }
}

@keyframes beat-after {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.6);
    }
}

/* Animation Mond im Hintergrund */
@keyframes slidein {
    0% {
        transform: translateX(-60vw);
    }

    50% {
        transform: translateX(10vw) translateY(80vw);
    }

    100% {
        transform: translateX(-10vw) translateY(200vw);
    }
}

.moon {
    animation: slidein 30s infinite ease-in-out;
    position: absolute;
}

/*About Hintergrund*/
  .stars {
   background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png);
   position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
      z-index: -1;
  }


/* Klaviertasten black and white */
.section-white {
    padding-top: 15px;
    background-color: rgb(255, 255, 255);
    padding-bottom: 15px;
    width: 80%;
    height: 170px;
    cursor: pointer;
    border-color: black;
    border: solid 2px;
    font-size: 150%;
}

.section-black {
    padding-top: 15px;
    background-color: rgb(255, 255, 255);
    padding-bottom: 15px;
    width: 60%;
    height: 90px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background-color: black;
    color: white;
    font-size: 150%;
}

/* Device size */
@media screen and (max-width:768px) {
    .dropbtn {
        display: none;
    }

}