Дело в том, что ваш класс dropshadow содержит свойство z-index равное -2, определяющее его позицию ниже, чем main-container, позиция которого по умолчанию равна 0. Фон рисуется выше, чем тень и как бы перекрывает её. Чтобы исправить это, следует добавить к main-container, z-index меньше, чем у dropshadow и добавить position равное, absolute, чтобы применить dropshadow.
https://jsfiddle.net/h73x5syv/7/
Вот переписанный .main-container
.main-container {
width: 100vw;
height: 100vh;
background:#00ffff;
z-index:-5;
position:absolute;
}