:root {
  color-scheme: light;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #000;
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

main::after {
  content: "";
  position: absolute;
  top: calc(40vh - ((100vw * 0.392607) / 2));
  left: 0;
  z-index: 1;
  width: 100vw;
  height: calc((100vw * 0.392607) * 0.45);
  background: linear-gradient(110deg, transparent 43%, rgba(255, 255, 255, 0.6) 50%, transparent 57%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-45%);
  animation: shimmer 20s linear infinite;
}

.portrait {
  position: absolute;
  top: 40%;
  left: 50%;
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%);
}

@keyframes shimmer {
  0% {
    transform: translateX(-45%);
  }

  85% {
    transform: translateX(45%);
  }

  100% {
    transform: translateX(45%);
  }
}

/* From Uiverse.io by vinodjangid07, adapted only for the email text and placement. */
.Btn {
  position: absolute;
  left: 50%;
  bottom: clamp(102px, 15.8vh, 145px);
  z-index: 2;
  transform: translateX(-50%);
  width: auto;
  min-width: 0;
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
  background-size: 250%;
  background-position: left;
  color: #ffd277;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition-duration: 1s;
  overflow: hidden;
}

.Btn::before {
  position: absolute;
  content: "";
  width: calc(100% - 8px);
  height: 90%;
  border-radius: 8px;
  transition-duration: 1s;
  background-color: rgba(0, 0, 0, 0.842);
  background-size: 200%;
}

.Btn span {
  position: relative;
  z-index: 1;
  color: #ffd277;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: lowercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88);
}

.Btn:hover {
  background-position: right;
  transition-duration: 1s;
}

.Btn:hover::before {
  background-position: right;
  transition-duration: 1s;
}

.Btn:active {
  transform: translateX(-50%) scale(0.95);
}