:root {
  --circle-size: clamp(180px, 28vw, 320px);
  --gold: darkgoldenrod;
}

@font-face {
  font-family: 'MyFont';
  src: url('fonts/yggdrasil.regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@media (max-width: 480px) {
  .center-image {
    height: 30vh;
    min-height: 120px;
  }

  .tagline {
    font-size: 1.2rem;
  }

  .navbar {
    gap: 1rem;
  }
}

html, body {
  margin: 0;
  padding: 0;
  background: purple;
  /*background: black;*/
  height: 100%;
  min-width: 320px;   /* smallest safe mobile width */
  display: flex;
  /*justify-content: center;*/
  flex-direction: column;   /* stack navbar on top */
  /*align-items: center;*/
  font-family: 'MyFont', sans-serif;
}

.navbar {
  height: 8vh;   /*1/10 of the viewport, lessened from 10vh*/
  min-height: 60px;
  width: 100%;
  background: black;
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 0 10px var(--gold);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.nav-inner {
  border-bottom: 2px solid var(--gold);
  width: calc(100% - var(--circle-size) / 2);   /* stops at circle midpoint */
  margin-left: auto;    /* pushes it to the right */
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.nav-link {
  color: var(--gold);
  font-family: 'MyFont', sans-serif;
  /*font-size: 1.2rem;*/
  font-size: clamp(0.9rem, 2vw, 11.2rem);
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}

.content {
  flex: 1;      /* take up remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* center vertically */
  align-items: center;        /* center horizontally */

  /* navbar logo circle shouldn't overlap content */
  padding-left: calc(var(--circle-size)/2);
}

.center-image {
  height: 40vh;   /*33=1/3 of viewport height, dropping it a little lower*/
  width: auto;    /*keep aspect ratio*/
  min-height: 150px;    /* prevents it from shrinking too far */
}

.tagline {
  color: var(--gold);
  /*font-size: 2rem;*/
  font-size: clamp(1rem, 2vw, 2rem);
  margin-top: 1rem;
  text-align: center;
}

/* Nav bar circle */
.circle-mask {
  position: absolute;
  /*left: 0;      /* stick to the left edge -- this has the whole circle */
  left: calc(var(--circle-size) * -0.5);    /* left half of the circle should be off screen */
  /*top: 50%;*/     /* verically center */
  top: 8vh;         /* should line up w/navbar */
  /*transform: translateY(-50%);*/

  /*width: 300px;
  height: 300px;*/
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  overflow: hidden;

  /* Show only the right half */
  clip-path: inset(0 0 0 50%);
  z-index: 3;     /* make sure it's above the background */
}

/* Nav bar circle img */
.circle-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gold highlight on the bottom-right quarter of the circle only */
.circle-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /*border: 2px solid transparent;
  border-right-color: darkgoldenrod;
  border-bottom-color: darkgoldenrod;*/
  border: clamp(2px, 0.6vw, 4px) solid transparent;
  border-right-color: var(--gold);
  border-bottom-color: var(--gold);
  /*box-shadow: 0 0 10px darkgoldenrod;*/

  /* Hide the top-right quarter of the border */
  clip-path: polygon(
    50% 50%,    /* center */
    100% 50%,   /* mid-right */
    100% 100%,  /* bottom-right */
    50% 100%,   /* mid-bottom */
  );
}