@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes lights {
  0% {
    box-shadow: -1px -1px 10vmin var(--gold);
  } 25% {
    box-shadow: 1px -1px 10vmin var(--gold);
  } 50% {
    box-shadow: 1px 1px 10vmin var(--gold);
  } 75% {
    box-shadow: -1px 1px 10vmin var(--gold);
  } 100% {
    box-shadow: -1px -1px 10vmin var(--gold);
  }
}
:root {
  font-family: Georgia, 'serif';
  font-variant-numeric: lining-nums;
  color: var(--gold);
  background: black;
  scroll-snap-type: y mandatory;
  --gold: oklch(0.8 0.16 85.22);
  scrollbar-color: var(--gold) transparent;
  scrollbar-width: thin;
}
::selection {
  color: black;
  background-color: var(--gold);
}
body {
  animation: fade-in ease-out 1s;
  margin: 0;
  padding: 5vmin;
  display: grid;
  align-items: safe center;
  justify-items: safe center;
  align-content: safe center;
  justify-content: safe center;
  scroll-snap-align: start;
}
section {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  padding: 5vmin 0;
  scroll-snap-align: start;
}
h1 {
  font-size: 15vmin;
  font-weight: normal;
  position: relative;
  margin: 5vmin 0;
  text-align: center;
}
[golden] {
  background: linear-gradient( 135deg, 
    oklch(0.85 0.15 90) 0%,
    oklch(0.95 0.12 90) 10%,
    oklch(0.8 0.2 90) 15%,
    oklch(0.8 0.2 90) 40%,
    oklch(0.85 0.15 90) 45%,
    oklch(0.85 0.15 90) 55%,
    oklch(0.95 0.12 90) 60%,
    oklch(0.8 0.2 90) 65%,
    oklch(0.8 0.2 90) 90%,
    oklch(0.85 0.15 90) 100%
  );
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0px 0px 5vmin var(--gold));
}
h1[before]:before {
  content: '!';
  width: 5vmin;
  position: absolute;
  right: 51.6vmin;
  opacity: .25;
  color: var(--gold);
}
h1[after]:after {
  content: '!';
  width: 5vmin;
  position: absolute;
  right: 20vmin;
  opacity: .25;
  color: var(--gold);
}
h2 {
  font-size: 6vmin;
  font-weight: normal;
  margin: 2vmin 0;
  text-align: center;
}
p {
  font-size: 4vmin;
  margin: 2vmin 0;
}
figure {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  margin: 5vmin;
}
iframe {
  border: none;
  box-shadow: 0 0 10vmin var(--gold);
  border-radius: 1vmin;
  /* animation: lights infinite 1s; */
}
[phone] {
  width: 45vmin;
  height: 80vmin;
}
[laptop] {
  width: 80vmin;
  height: 45vmin;
}
[card] {
  box-shadow: 0 0 10vmin var(--gold);
  border-radius: 10vmin;
  width: 100vmin;
  height: 180vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  overflow: hidden;
  background: black;
  margin: -60vmin -33vmin;
  /* animation: lights infinite 1s; */
}
[front] {
  transform: rotateZ(-10deg) scale(.33);
  justify-content: space-evenly;
}
[back] {
  transform: rotateZ(+10deg) scale(.33);
  justify-content: space-between;
}
div {
  display: flex;
}
a {
  color: unset;
  text-decoration: none;
  padding: 3vmin 5vmin;
  display: block;
}
a:hover {
  color: var(--gold);
}
[major] {
  font-size: 5vmin;
  border-radius: 1vmin;
  box-shadow: 0 0 0 1px var(--gold);
}
img {
  width: 100%;
}
[large] {
  padding: 10vmin 0;
}
aside {
  font-size: 3vmin;
  color: oklch(0.5 0 0);
  opacity: .66;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}