body {
    padding: 0;
    margin: 0;
    font-family: monospace;
    color: white;
    transform: translate3d(0,0,0);  
    background-color: #abce67 ;
    background: linear-gradient(246deg, #abce67, #2a3e68, #8bd5a3,#586685, #B05959, #8B8BD5);
    background-size: 1000% 1000%;

    -webkit-animation: backgroundAnimation 39s ease infinite;
    -moz-animation: backgroundAnimation 39s ease infinite;
    animation: backgroundAnimation 39s ease infinite;
}

@-webkit-keyframes backgroundAnimation {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
}
@-moz-keyframes backgroundAnimation {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
}
@keyframes backgroundAnimation { 
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
}

@keyframes loadAnimation {
    0% {
      transform: translateY(30%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}

.animates-on-load {
    animation: 0.8s ease-out 0s 1 loadAnimation;
}

/* With a non-custom fallback: */
.custom-cur {
    cursor: url(/static/images/Cursor79.cur),
    default;
}

a {
    color: inherit;
    cursor: url(/static/images/Cursor107.cur),
    pointer
}

.spacer {
    height: 15%;
}

#container {
    display: flex;
    height: 100vh;
    justify-content: space-between;
    flex-direction: column;
}

#album-cover {
    align-self: center;
    justify-self: center;
    object-fit: contain;
    max-height: 50vh;
    max-width: 70vw;
    box-shadow: 10px 10px black;
    margin-bottom: 1.5em;
}

@media only screen and (max-width: 600px) {
    album-cover {
        max-height: 50vmin;
        max-width: 50vim;
    }
  }

.impressum {
    margin: 1em;
}
#bandcamp-player {
    align-self: center;
    width: 300px;
}

#social-media-container {
    display: flex;
    justify-content: center;
}

.social-media-links {
    background-color: white;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    margin: 1rem;
    box-shadow: 5px 5px black;
    transition: 0.2s;
}

.social-media-links:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    box-shadow: 7px 7px black;
  }

.social-media-logo {
    width: 80%;
    max-height: 80%;
    align-self: center;
}

#instagram {
    width: 60%;
}

#contact-container {
    display: flex;
    flex-direction: column;
}

.link {
    font-size: 2vmin;
    text-decoration: underline;
}

.contact {
    text-align: center;
    font-weight: bold;
    font-size: 3vmin;
}

#mail {
    font-size: 4vmin;
    font-size-adjust: inherit;
}


.link:hover {
    color: lightgray;
}

#footer {
    align-self: center;
    margin: 2em;
}