@viewport {
        width: device-width;
        zoom: 1;
}

body{
        position: relative;
        min-height: 100vh;
        margin: 0;
}
.core {
        font-family: 'Roboto', sans-serif;
        max-width: 900px;
        margin: auto;
        padding: 5px;
        padding-top:50px;
        text-align: center; 
        padding-bottom: 85px;
}

@media  (min-width: 370px) {
        .core {
                padding-bottom: 65px;
        }
}
@media  (min-width: 600px) {
        .core {
                padding-bottom: 45px;
        }
}

h1 {
        font-size: 38;
}
       
.dragndrop { 
        margin-top: 5%;
        margin-bottom: 3%;
        background-color: #a3a3a3;
        padding: 1px;
        padding-top: 5%;
        height:40%; 
        font-size: 20px;   
        border: 6px dashed #444444;
        border-radius: 20px;
        min-height: 250px;
        
}
.dragndrop .button {
        cursor: pointer;
        min-height: 30px;
        min-width: 120px;
}
.dragover {
        background-color: #888888;
}

.infobox {
        text-align: left;
        background: #eeeeee;
        border-radius: 20px;
        border: 4px solid #a3a3a3;
        padding: 10px;
}

footer {
        position: absolute;
        padding-top: 10px;
        padding-bottom: 10px;
        bottom: 0;
        width: 100%;
        text-align: center;
        background-color: #eeeeee;
}

footer a {
        color: #555;
        font-weight: bold;
        text-decoration: none;
}
small {
        color: #555;
}