style.css

:root {
    --main-bg-color: #eff5fe;
    --border-color: #0288d147;
}

body, html{
    font-family: system-ui;
    background: var(--main-bg-color);
    height: 100%;
    padding: 0;
    margin: 0;
}

body, .drop-zone{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.upload-container{
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0px 20px 20px #0000002e;
}

.drop-zone{
    width: 500px;
    min-height: 200px;
    border: 2px dashed var(--border-color);
    margin: 30px;
    border-radius: 10px;
    transition: all .2s ease;

}

.dragged.drop-zone {
    background: var(--main-bg-color);
    border-color: #2196f3;
}

.icon-container {
    width: 75px;
    height: 100px;
    position: relative;
}

.icon-container img{
    width: 75px;
    position: absolute;
    transform-origin: bottom;
    transition: transform 250ms ease-in-out;
}

.icon-container .centre {
    z-index: 2;
}

.icon-container .right, .icon-container .left {
    filter: grayscale(.5);
}

.dragged .icon-container .right{
    transform: rotate(10deg) translateX(20px) scale(.9);
}

.dragged .icon-container .left{
    transform: rotate(-10deg) translateX(-20px) scale(.9);
}

.dragged .icon-container .center {
    transform: translateY(-5px);
}

#fileInput{
    display: none;
}

.browseBtn{
    color: #2196f3;
    cursor: pointer;
}