@import url("https://fonts.googleapis.com/css?family=Lato:200");
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg);
  background-size: cover;
  background-position: center;
}

.frosted-glass {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72vw;
  height: 36vh;
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: 0.5s ease;
}
.frosted-glass:hover {
  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157),
    0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28),
    0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
}
.frosted-glass .title {
  padding-left: 0.375em;
  font-size: 3.6em;
  font-family: Lato, sans-serif;
  font-weight: 200;
  letter-spacing: 0.75em;
  color: white;
}
@media (max-width: 640px) {
  .frosted-glass .title {
    font-size: 2em;
  }
}