<div id="container">
  <div id="inner-container">
  </div>
</div>
* {
  margin: 0;
  top: 0;
  left: 0;
}
#container {
  width: 100vw;
  height: 100vh;
  background: #bbd0c9;
  display: flex;
}
#inner-container {
  width: 20vw;
  height: 20vw;
  margin: auto;
  background: #bbd0c9;
  border-radius: 50%;
  box-shadow: 
    5px 5px 10px rgba(0,0,0,.1),
    -5px -5px 10px rgba(255,255,255,.2);
}
@media (max-width: 720px) {
  #inner-container {
    width: 50vw;
    height: 50vw;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.