@import "colors.css";

html,
body {
  position: relative;
  overflow-x: hidden;
}

main {
  margin-left: 20vw;
  margin-right: 20vw;
}

h1.committee-title {
  text-align: left;
  font-size: min(3rem, 12vw);
  color: var(--secondary);
}

h1.committee-title::after {
  content: '';
  display: none;
}

.committee-summary {
  display: flex;
  justify-content: center;
  text-align: justify;
  gap: 3vw;
}

.committee-overview {
  width: 60%;
}

.committee-details {
  width: 40%;
}

.committee-summary h2 {
  font-family: Georgia;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0;
}

.icon {
  transform: translateY(20%);
  height: 1.2em;
}

.chairperson {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  gap: 5%;
}

.chairperson h2 {
  font-family: Georgia;
}

.chairperson:nth-child(odd) {
  text-align: justify;
  text-align-last: right;
}

.chairperson:nth-child(even) {
  text-align: justify;
  text-align-last: left;
}

.chairperson-portrait {
  width: 15rem;
  height: calc(1.3333 * 15em);
  object-fit: cover;
}

.chairperson-portrait:nth-child(odd) {
  border-radius: 100px 20px 100px 20px;
}

.chairperson-portrait:nth-child(even) {
  border-radius: 20px 100px 20px 100px;
}

.chairperson-list {
  padding-top: 10%;
}

.committee-study-guide {
  margin-top: 0;
  background: var(--secondary);
  color: var(--primary);
  font-family: Helvetica;
  font-weight: bold;
  font-size: 1.1rem;
  border: 0.15em solid var(--primary);
  padding: 0.2em 1.4em 0.3em 1.4em;
  border-radius: 32px;
  transition: background ease-in-out 200ms;
}

.committee-study-guide .icon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(334deg) brightness(100%) contrast(104%);
}

.committee-study-guide:hover {
  background: var(--primary);
  border-color: var(--secondary);
}

.committee-study-guide:hover .committee-study-guide-link {
  color: var(--secondary);
  transition: color ease-in-out 200ms;
}

.committee-study-guide:hover .icon {
  filter: invert(11%) sepia(75%) saturate(3717%) hue-rotate(230deg) brightness(89%) contrast(115%);
}

.committee-study-guide-link {
  color: var(--primary);
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

.committee-study-guide#become {
  font-size: 1.5rem;
  margin: 10% auto 10% auto;
  display: flex;
  border-radius: 48px;
  padding: 0;
}

.committee-study-guide-link#become {
  padding: 1em 1.5em 1em 1.5em;
}

.un-logo {
  width: 30rem;
  position: absolute;
  opacity: 0.1;
  filter: invert(7%) sepia(84%) saturate(5028%) hue-rotate(232deg) brightness(101%) contrast(106%);
  z-index: -10;
}

.un-logo#logo-1 {
  left: 0;
  top: 10rem;
  transform: translateX(-50%);
}

.un-logo#logo-2 {
  right: 0;
  top: 50rem;
  transform: translateX(35%);
}

@media only screen and (max-width: 1200px) {
  main {
    margin-left: 8vw;
    margin-right: 8vw;
  }
}

@media only screen and (max-width: 937px) {
  main {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .committee-summary {
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
  }

  .committee-overview {
    width: 100%;
  }

  .committee-details {
    width: 100%;
  }

}

@media only screen and (max-width: 720px) {
  .committee-summary {
    gap: 0;
    width: 100%;
  }

  .committee-overview {
    width: 100%;
  }
}

@media only screen and (max-width: 681px) {
  .chairperson-portrait {
    width: 80%;
  }

  .chairperson:nth-child(odd) {
    flex-direction: column-reverse;
    text-align-last: left;
  }


  .chairperson:nth-child(odd)>.chairperson-portrait {
    margin-right: 0;
    margin-left: auto;
  }

  .chairperson:nth-child(odd)>.chairperson-info {
    text-align-last: right;
  }

  .chairperson:nth-child(even) {
    flex-direction: column;
    text-align-last: left;
  }

  .chairperson {
    padding-top: 1.5rem;
  }

  .chairperson:has(+ .chairperson)::after {
    content: " ";
    display: inline-block;
    position: absolute;
    bottom: -1.5rem;
    width: 60%;
    margin-left: 50%;
    transform: translateX(-50%);
    height: 0.3rem;
    background: var(--secondary);
    border-radius: 32px;
  }


  .un-logo#logo-2 {
    display: none;
  }
}

@media only screen and (max-width: 450px) {
  .chairperson-portrait {
    width: 100%;
  }
}