body {
  margin: 0;
  background: #ecf0f1;
  color: #050620;
}

/* Hero */

.hero {
  min-height: 100%;
  position: relative;
  padding: 0 10%;
  display: grid;
  place-items: center;
  overflow: hidden;
}


/* Glasmorphic design */

.background {
    position: absolute;
    width: 50%;
    height: 100vh;
    top: 0;
    left: 0;
    background: purple;
    z-index: -1;
}

.container {
    position: relative;
    max-width: 30%;
    padding: 3rem;
    border-radius: 3rem;
    background-color: #ecf0f1;
    box-shadow: -1rem -1rem 1rem 0 white,
      1rem 1rem 1rem 0 #05062020;
}