#dropzone {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 4px;
    transition: 500ms ease height;
    height: 260px;
    background: transparent;
    margin: 60px 0;
}

#dropzone.expanded {
    height: 750px;
}

#dropzone .hint {
    margin-top: 20px;
    text-transform: uppercase;
    color: #8F4066;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.15rem;
    font-size: 0.875em;
    line-height: 1.625;
}

#dropzone .help {
    align-self: flex-start;
    cursor: pointer;
    margin-top: auto;
}

#dropzone .settings {
    align-self: flex-end;
    cursor: pointer;
    margin-left: auto;
}

#dropzone .help i, #dropzone .settings i {
    border: 2px dotted #8F4066;
    border-radius: 50%;
    padding: 10px;
    color: #8F4066;
    cursor: pointer;
    display: block;
    width: 46px;
    height: 46px;
}

#dropzone .buttons {
    display: flex;
    margin-top: auto;
    width: 100%;
}

#dropzone .settings-menu {
    margin-top: 50px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#dropzone .settings-menu hr {
    border-color: #8F4066;
    width: 100%;
    margin: 0 0 50px 0;
    border-width: 2px;
    border-style: dotted;
}

#dropzone .dz-preview .dz-details .dz-filename span, #dropzone .dz-preview .dz-details .dz-size span {
    font-weight: 600;
}

#dropzone .dz-message .dz-button, #dropzone .dz-preview .dz-details .dz-filename span, #dropzone .dz-preview .dz-details .dz-size span {
    text-transform: uppercase;
    color: #8F4066;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.15rem;
    width: calc(100% + 0.15rem);
    font-size: 0.875em;
    line-height: 1.625;
}

#dropzone, #dropzone .dz-preview.dz-file-preview .dz-image {
    border: 2px solid #8F4066;
}

#dropzone .dz-preview .dz-details .dz-filename span, #dropzone .dz-preview .dz-details .dz-size span, #dropzone .dz-preview.dz-file-preview .dz-image {
    background-color: #1A1721;
    background-attachment: fixed;
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.1640625%200%200%200%200%200%200.16015625%200%200%200%200%200%200.2890625%200%200%200%200%200%200.34765625%200%22%20%2F%3E%3C%2Ffilter%3E%3Crect%20filter%3D%22url%28%23noise%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E), linear-gradient(to top, rgba(15, 12, 18, 0.749), rgba(15, 12, 18, 0.749)), url(/img/bg.svg?v=81f23adc);
    background-size: 512px, auto, cover;
    background-position: center, 0 0, center;
    background-position-x: center, 0, center;
    background-position-y: center, 0, center;
    background-repeat: repeat, repeat, no-repeat;
}

#dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 0;
    background-color: transparent;
}

#dropzone .dz-message {
    margin: 50px 0 0 0;
}