.eb-garamond-logo {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

:root {
    --color-bg: black;
    --color-fg: white;
    --color-primary: #f3bc34;
    --font-base: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
}

button  {
    /* TODO: add arrow */
    background-color: var(--color-primary);
}

a {
    position: relative;
    text-decoration: none;

    &::after {
        content: '';
        position: absolute;
        bottom: -0.4rem;
        left: -0.25rem;
        right: -0.25rem;
        height: 0.5rem;

        /* z-index: -1; */

        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/664131/underline.svg');
        background-repeat: no-repeat;

        background-size: cover;
    }
}

@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

h1 {
    animation: 1.5s fadeInUp;
    backdrop-filter: blur(8em);
}

p {
    backdrop-filter: blur(4em);
}

.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  max-inline-size: var(--measure);
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.icon {
  width: 0.75em;
  width: 1cap;
  height: 0.75em;
  height: 1cap;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

.centerr {
  /* Or any of https://css-irl.info/how-do-you-vertically-centre-an-element-in-css/ */
  box-sizing: content-box;
  margin-inline: auto;
}

/* .with-icon .icon { */
/*   margin-inline-end: 1rem; */
/* } */