* {
    padding: 0;
    margin: 0;
}

body {
    background: #39f;
    font-family: 微軟正黑體;
}

main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    flex-direction: column;
    padding-top: 15vh;
}

h1 {
    background-color: #555;
    padding: 10px;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 0px;
    user-select: none;
    font-size: 6.66em;
    font-weight: 500;
}

main>.container {
    /* border: 1px solid #333; */
    border-radius: 15px;
    background: #fff;
    position: relative;
}

#upload {
    background-color: rgba(255, 255, 255, .1);
    height: 40vh;
    font-size: 24px;
    transition: opacity, background .5s;
    color: #333;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    cursor: pointer;
}

#upload.mouseover {
    background: rgba(51, 153, 255, .35);
}

#upload::after {
    background-image: url('data:image/png;base64,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');
    background-repeat: no-repeat;
    background-position: center center;
    content: " ";
    width: 100px;
    height: 100px;
}

#uploadProgress {
    display: none;
}

#uploadProgress>div {
    height: inherit;
}

#upload-file-input {
    display: none;
}

#url,
#error {
    font-weight: 500;
    margin-bottom: 0;
    align-self: flex-start;
    position: absolute;
    width: 100%;
    display: none;
    z-index: 99;
}

#url>a {
    text-decoration: underline;
}

#qrcode {
    color: #000;
    border: 1px solid #333;
    padding: 5px;
    text-decoration: none;
}