div#dropzone {
    border-radius: 10px;
    border:        3px dashed #aaa;
    cursor:        pointer;
    height:        400px;
    left:          50%;
    position:      relative;
    top:           50%;
    transform:     translate(-50%, -50%);
    transition:    border-color 0.1s linear;
    width:         min(700px, 85%);
}

div#dropzone p {
    color:      #aaa;
    display:    inline-block;
    left:       50%;
    margin:     0;
    position:   relative;
    text-align: center;
    top:        50%;
    transform:  translate(-50%, -50%);
}

div#dropzone p::before {
    content:     "Drag a file to upload it\Aor click to select one or more file(s)";
    white-space: pre;
}

@media (hover: none) and (pointer: coarse) {
    div#dropzone p::before {
        content: "Tap to select a file to upload";
    }
}

div#dropzone input {
    display: none;
}

@media (hover: hover) {
    div#dropzone.hover, div#dropzone:hover {
        border: 3px dashed white;
    }

    div#dropzone.hover p, div#dropzone:hover p {
        color: white;
    }
}