body {
  background-color: #a59b8b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.outer-box {
  height: min(800px, 80vh, 80vw);
  width: min(800px, 80vh, 80vw);
  background-color: #cdc2b2;
  margin: auto;
  border: 20px #f6f1e3 solid;
  box-shadow: -20px 12px #5d534662, -10px 25px #5d53467e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.circle {
  height: min(700px, 70vh, 70vw);
  width: min(700px, 70vh, 70vw);
  border-radius: 100vh;
  border: 10px #a59887 solid;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.circle-overlay {
  height: min(700px, 70vh, 70vw);
  width: min(700px, 70vh, 70vw);
  border-radius: 100vh;
  border: 10px #a59887 solid;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  z-index: 3;
  position: absolute;
  overflow: hidden;
}

.circle-overlay:after {
  content: "";
  position: absolute;
  border-radius: 100%;
  height: min(700px, 70vh, 70vw);
  width: min(700px, 70vh, 70vw);
  box-shadow: 0px 0px 0px 2000px #e3dfd2;
}

.top-circle-overlay {
  pointer-events: none;
}

.row {
  display: flex;
  height: 100%;
}

.col {
  width: 100%;
}