Как вернуть тень?

Нашел в гугле пример тени, сделал её - работает, но только в том случаи, если у main-container не задано свойство backgroud.
Вопрос первый - как заставить тень появится?
Вопрос второй - как заставить тень появится не изменяя код самой тени?
Вопрос третий - у кого будет правильнее изменить код чтобы тень появилась?
Вот пример на jsfiddle, ниже код (закоментируйте у .main-container свойство background и нужная тень появится)-

<div class="main-container">
    <div class="container dropshadow"></div>
</div>

.main-container {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
}

.container {
  width: 200px;
  height: 70%;
  margin: 0 auto;
}

.dropshadow {
  position: relative;
  padding: 1em;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.dropshadow::before, .dropshadow::after {
  content: "";
  position: absolute !important;
  z-index: -2;
}
.dropshadow::before {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  border-radius: 10px/100px;
}