body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 18px;
    background: url(../background/01-Brocken.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.ll_h1, .ll_h2 {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding: 10px;
}
.ll_h1 {
    margin-top: 50px;
    margin-bottom: 0;
    background-color: #005BA1;
    rotate: -1deg;
}
.ll_h2 {
    margin-top: -5px;
    margin-bottom: -5px;
    background-color: #00a9bd;
    rotate: 2deg;
}
.ll_h2_sm {
    margin-top: 30px;
    rotate: -2deg;
}
.linklist {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 10px;
    background-color: white;
}
.linklist a {
    display: block;
    width: calc(100% - 20px);
    max-width: 500px;
    padding: 10px;
    color: white;
    text-decoration: none;
    background-color: red;
    text-align: center;
    
    animation-name: LeaveHoverAnimation;
    animation-duration: 0.5s;
}
.linklist a:hover {
    scale: 1.01;
    filter: brightness(110%);
    animation-name: HoverAnimation;
    animation-duration: 0.5s;
}
.ll_wlkn a {
    background-color: #005BA1;
}

.ll_mastodon a {
    background-color: #5C53E1;
}
.ll_pixey a {
    background-color: #161618;
}
.ll_twitch a {
    background-color: #9147ff;
}
.ll_steam a {
    background-color: #171d25;
    color: #C4C3C0;
}


/* The animation code */
@keyframes HoverAnimation {
  from {
        scale: 1.0;
        filter: brightness(100%);
    }
  to {
        scale: 1.01;
        filter: brightness(110%);
    }
}
@keyframes LeaveHoverAnimation {
  from {
        scale: 1.01;
        filter: brightness(110%);
    }
  to {
        scale: 1.0;
        filter: brightness(100%);
    }
}