html, body {
    margin: 0px;
    padding: 0px;

    background-color: azure;
    color: white;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;

    overflow: hidden;

    touch-action: manipulation;
}

body {
    background-image: url("media/img/ocean.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*
body::before {
    content: "";
    position: absolute;
    top: 90%;
    height: 10%;
    width: 100%;
    background-color: black;
    z-index: 30;
}
*/
h1 {
    margin: 0px;
    font-size: 3em;
}

h2 {
    margin: 0px;
    font-size: 2.2em;

    animation: font_pulse 400ms linear infinite alternate;
}

.frame {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.frame_content {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: absolute;

    background-color: rgb(10, 10, 40);
    border: 10px solid rgba(10, 10, 30);
    border-radius: 1em;
}
.frame_content > h1 { margin: .6em 2em .1em 2em; }
.frame_content > h2 { margin: 0em 2em .6em 2em; }

@-webkit-keyframes pulsating { 100% { transform: scale(1.1);}}

@keyframes font_pulse {
    from {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}

.overlay_style {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

.big_score {
    display: none;
    justify-content: center;

    font-size: 150%;

    z-index: 55;
}

.big_score h1 {
    position: absolute;
    bottom: 5%;
}

.active { display: flex; }


.fun_label {
    /*background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);*/
    background-image: linear-gradient(to left, violet, yellow, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes nospin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(0deg);
    }
}

@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes pulse {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(0.7);
    }
}

canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

.settings {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lives {
    position: absolute;
    height: 10%;
    width: 100%;
    top: 5%;

    display: flex;
    justify-content: center;
}

.live {
    height: 100%;
    width: 10px;
    margin: 0 10px;
    background-size: contain;
}

.live_true {
    background-image: url("media/img/leben.svg");
}


.live_false {
    background-image: url("media/img/keinleben.svg");
}

#media_credits {
    position: absolute;
    left: 0px;
    bottom: 0px;
    
    display: flex;
    flex-direction: column;
    z-index: 100;
    margin: 1em;
    padding: 1em;
    line-height: 1.5;

    /* shading: https://getcssscan.com/css-box-shadow-examples */
    
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
}

#media_credits a {
    color: deepskyblue;
    text-decoration: none;
    font-size: 0.9em;
}

#media_credits a:visited {
    color: aqua;
}

#media_credits a:after {
    color: aqua;
}

#media_credits h4 {
    color:ivory;
    margin: 0 0 0.2em 0;
}