.cursor {
  cursor: pointer;
}

.profile-photo img {
  width: 500px;
  height: 500px;
}

.application-form {
  height: 6100px;
  border: 0;
}

/* Grid reset */

@media (min-width: 768px) {
  .w-md-60 {
    width: 60%;
  }
  .w-md-50 {
    width: 50%;
  }
  .w-md-40 {
    width: 40%;
  }
  .font-size-md-4 {
    font-size: var(--font-size-4);
  }
  .font-size-md-1 {
    font-size: var(--font-size-1);
  }

  .profile-photo img {
    width: 300px;
    height: 300px;
  }
}


@media (min-width: 928px) {
  .w-lg-100 {
    width: 100%;
  }
}

.lh-1 {
  line-height: 1;
}

.lh-copy blockquote {
  border-left: 5px solid var(--yellow);
  color: var(--white-60);
  margin-bottom: 2rem;
  margin-left: 0.5rem;
  padding-left: 1rem;
}

.lh-copy blockquote:first-of-type {
  margin-top: 2rem;
}

.lh-copy blockquote a {
  color: var(--yellow-60);
}

.lh-copy-spaced {
  line-height: 1.75;
}

.debug * {
  outline: 1px solid red;
}

.overlay {
  background: linear-gradient(
    0deg,
    rgba(18, 47, 76, 0.8) 0%,
    rgba(18, 47, 76, 0.7) 30%,
    rgba(18, 47, 76, 0.5) 60%,
    rgba(18, 47, 76, 0) 100%
  );
}

.bg-dark-navy {
  background: var(--dark-navy);
}

.text-dark-navy {
  color: var(--dark-navy);
}

.bg-navy a {
  color: var(--yellow);
}

.btn-outline {
  border: 0.125rem solid var(--white);
  border-radius: 0;
}

.btn-yellow {
  color: var(--black);
  background-color: var(--yellow);
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.25;
}
@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
    line-height: 1.25;
  }
}

.btn-reset {
  border: none;
  background: none;
}

button.disabled {
  opacity: 0.4;
}

.input-cta {
  width: 100%;
  padding: 8px 1rem;
  background: none;
  border: 2px solid var(--white);
  border-top-left-radius: var(--border-radius-2);
  border-bottom-left-radius: var(--border-radius-2);
  color: var(--white);
}
.input-cta::-webkit-input-placeholder {
  color: var(--white-60);
}
.button-cta {
  background: none;
  border: 2px solid var(--white);
  border-top-right-radius: var(--border-radius-2);
  border-bottom-right-radius: var(--border-radius-2);
  border-left: 0;
  color: var(--white);
  padding: 8px 1rem;
  transition: background-color 175ms ease-in;
}


.button-cta:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

.no-underline {
  text-decoration: none;
}

.profile-item .profile-item-img {
  transition: outline 0.05s;
}

.profile-item:hover .profile-item-img,
.profile-item:active .profile-item-img {
  outline: 4px solid var(--yellow);
}

.dynamic-duo-tone-img > img {
  filter: grayscale(100%);
}

.dynamic-duo-tone-img > div {
  z-index: 2;
}

.profile-item > .related::before {
  max-height: 260px;
  max-width: calc(100% - 30px);
  left: 15px;
}

.dynamic-duo-tone-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 47, 76, 0.5);
    z-index: 1; /* Ensures the overlay is above the image */
}

.year-menu {
  background: none;
  border: none;
}

.year-menu:after {
  content: "\2304";
  position: absolute;
  top: -1px;
  margin-left: 10px;
  font-size: 2rem;
}

.year-menu:hover {
  text-decoration: underline;
}

.year-menu:focus {
  outline: none;
  text-decoration: underline;
}

.year-menu-container {
  display: flex;
  flex-direction: column;
  z-index: 10;
  position: absolute;
}

.typeformButton {
  background: none;
  border: 2px solid var(--white);
  border-radius: var(--border-radius-2);
  color: var(--white);
  padding: 8px 1rem;
  transition: background-color 175ms ease-in;
}

.typeformButton:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

.typeformButtonWrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media only screen and (max-width: 720px) {

  .nomination-header-section {
    margin-top: 5rem;
  }

}

div.profileSocialLinks {
  display: inline-flex;
  align-items: center;
  margin-left: 0.67rem;
}

div.profileSocialLinks > a {
  color: var(--black);
  margin-right: 0.67rem;
  font-size: 16px;
}

div.profileSocialLinks > a:hover {
  color: var(--mid-gray);
}