@import url('main.css');

cite {
  font-style: italic;
  color: #756abc;
}

hr {
  width: 60%;
  margin: var(--spacing-2) auto;
}

.citation--large {
  font-size: 1.2em;
}

.citation--medium {
  font-size: 1.1em;
}

.essay__content p:first-of-type {
  padding-top: 2em;
}

.essay__content p:first-of-type::first-letter {
  font-size: 5em;
  font-style: normal;
  float: left;
  color: var(--background--primary);
  margin-right: var(--spacing-1);
  margin-top: -0.5em;
  padding: var(--spacing-3);
  background-image: url('../assets/shared/square.svg');
  background-repeat: no-repeat;
  background-position: center;
}

.hero {
  align-self: center;
  max-height: 50%;
  aspect-ratio: 1 / 1;
}

.cutout {
  position: relative;
}

.cutout::before {
  content: '';
  position: absolute;
  inset: -2%;
  background-color: var(--shadow);
}

.cutout::after {
  content: '';
  position: absolute;
  inset: -2%;
  background-color: var(--light);
  opacity: 75%;
}

.hero__cutout::before {
  clip-path: polygon(80% 0%, 89% 0%, 100% 11%, 100% 20%, 98% 18%, 98% 12%, 89% 2%, 84% 2%, 80% 0%, 0% 0%, 0% 2%, 70% 2%, 98% 30%, 98% 100%, 100% 100%, 100% 30%, 70% 0%);
}

.hero__cutout::after {
  clip-path: polygon(84% 2%, 98% 16%, 100% 20%, 80% 0%, 84% 2%, 2% 2%, 2% 78%, 22% 98%, 98% 98%, 100% 100%, 21% 100%, 0% 79%, 0% 0%, 2% 2%);
}

.player__cutout::before {
  inset: -4px;
  clip-path: polygon(0px 0px, calc(100% - 12px) 0px, 100% 12px, 100% 100%, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 12px, calc(100% - 12px)4px, 4px 4px, 0px 0px);
}

.player__cutout::after {
  inset: -4px;
  clip-path: polygon(0px 0px, 4px 4px, 4px calc(100% - 12px), 12px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 100% 100%, 12px 100%, 0px calc(100% - 12px), 0px 0px);
}

.hero img {
  position: relative;
  z-index: 1;
  /* move above paper texture */
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(100% 0%, 90% 0%, 100% 10%, 100% 15%, 85% 0%, 70% 0%, 100% 30%, 100% 100%, 20% 100%, 0% 80%, 0% 0%);
  opacity: 60%;
  display: flex;
  /* gets rid of weird gap between image and border */
}

.essay__title {
  text-align: center;
  margin-top: var(--spacing-3);
}

.player__container {
  --height: 42px;
  width: 650px;
  max-width: 90%;
  align-self: center;
  position: relative;
  height: var(--height);
  margin-bottom: var(--spacing-8);
}

.player__container:last-child {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.player {
  width: 100%;
  height: var(--height);
  overflow: hidden;
  clip-path: polygon(0px 0px, calc(100% - 8px) 0px, 100% 8px, 100% 100%, 8px 100%, 0px calc(100% - 8px), 0px 0px);
}

hr+p::first-letter {
  font-size: 2em;
  font-style: normal;
  float: left;
  color: var(--background--primary);
  margin-right: var(--spacing-1);
  margin-top: -.5em;
  padding: var(--spacing-3);
  background-image: url('../assets/shared/square.svg');
  background-repeat: no-repeat;
  background-position: center;
}