html, body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    margin: 0px;
    font-size: 1em;
    background-color: lightgrey;
}

#karten {
    width: 80%;
    min-height: 50%;
    margin: 0px 10% auto 10%;
    text-align: center;
}

#abstand {
    float: left;
    width: 100%;
    height: 300px;
}

.karte {
    float: left;
}

.karte:nth-child(last) {
    margin-bottom: 200px;
}


.kartenbild {
    width: 80%;
    height: 80%;
    margin: 10%;
    background-color: greenyellow;
    background-image: url(img/uc.png);
    background-size: cover;
}

.kartenbild img {
    float: left;
}

#header {
    text-align: center;
    background-color: white;
    border-bottom: 2px dashed black;
}

#header input {
    height: 5%;
    margin: 1%;
    font-size: 1.2em;
    padding: 6px;
}

#header input:nth-child(1) {
    width: 40%;
}


#footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 20%;
}

#status {
    width: 100%;
    height: 50%;
    bottom: 0px;
    background-color: white;
    border-top: 2px dashed black;
}

#status p {
    font-size: 2em;
    float: left;
    width: 33.33%;
    text-align: center;
    margin-top: 1.2%;
}

#gefundenspace {
    width: 100%;
    height: 10%;
    
    background-color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid white;
}

#gefunden {
    width: 100%;
    height: 40%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.gefunden {
    height: 70%;
    margin: auto 10px auto 10px;
}

@media only screen and (max-width: 1000px) {
    
    html, body {
        background-color: black;
        font-size: 1.5em;
    }
    
    #karten {
        width: 100%;
        margin: 0%;
    }
    
    #status p {
        font-size: 1em;
    }
    
    #footer {
        height: 10%;
    }
    
    
    .kartenbild {
        width: 90%;
        height: 90%;
        margin: 5%;
    }

    
    #header input {
        height: auto;
        margin: 2% 1% 2% 1%;
        font-size: 1em;
        padding: 6px;
        width: 25%;
    }
    
    #header input:nth-child(1) {
        width: 70%;
    }

}