.macbook {
  margin: 0 auto;
  max-width: 800px;
}

.screen {
  background: #000;
  border-radius: 3% 3% 0.5% 0.5% / 5%;
  margin: 0 auto;
  /* for aspect ratio */
  position: relative;
  width: 80%;
}

.screen:before {
  border: 2px solid #3a3a3c;
  border-radius: 3% 3% 0.5% 0.5% / 5%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9) inset, 0 0 1px 2px rgba(255, 255, 255, 0.1) inset;
  content: "";
  display: block;
  /* for aspect ratio ~67:100 */
  padding-top: 60%;
}

.screen:after {
  content: "";
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  position: absolute;
  bottom: 0.75%;
  left: 0.5%;
  padding-top: 1%;
  width: 99%;
}

.viewport {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: 4.3% 3.2%;
  background: #333;
}

.base {
  /* for aspect ratio */
  position: relative;
  width: 100%;
}

.base:before {
  content: "";
  display: block;
  /* for aspect ratio ~33:1000*/
  padding-top: 3.3%;
  /* stylin - Space Black gradient */
  background: linear-gradient(#2d2d30, #1f1f23 55%, #3a3a3c 55%, #1a1a1c 56%, #2a2a2c 61%, #1d1d1f 84%, #0f0f10 89%, rgba(0, 0, 0, .5) 98%);
  border-radius: 0 0 10% 10%/ 0 0 50% 50%;
}

.base::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.3) 0.5%, rgba(0, 0, 0, 0.6) 3.3%, transparent 15%, rgba(255, 255, 255, 0.3) 50%, transparent 85%, rgba(0, 0, 0, 0.6) 96.7%, rgba(255, 255, 255, 0.3) 99.5%, rgba(0, 0, 0, 0.7) 100%);
  content: "";
  height: 53%;
  position: absolute;
  top: 0;
  width: 100%;
}

.notch {
  background: #1d1d1f;
  border-radius: 0 0 7% 7% / 0 0 95% 95%;
  box-shadow: -5px -1px 3px rgba(0, 0, 0, 0.4) inset, 5px -1px 3px rgba(0, 0, 0, 0.4) inset;
  margin-left: auto;
  margin-right: auto;
  margin-top: -3.5%;
  z-index: 2;
  /* for aspect ratio */
  position: relative;
  width: 14%;
}

.notch:before {
  content: "";
  display: block;
  /* for aspect ratio ~1:10 */
  padding-top: 10%;
}


/* Screenshot Hover Scroll Additions
-------------------------------------------------------------- */

.macbook .viewport {
  transition: background-position 3s ease;
  background-position: 0 0;
  background-size: 100% auto;
  overflow: hidden;
}

/* .macbook:hover .viewport {
  background-position: 0 100%;
}

.macbook .viewport:after {
  background: radial-gradient(circle at right bottom, transparent 75%, rgba(255, 255, 255, 0.05) 75%, transparent);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
} */