@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zeyada&display=swap");
.handwriting {
  font-family: "Zeyada", cursive;
  font-weight: 400;
  margin-top: 8px;
  margin-bottom: 8px;
}

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-min-size: 16;
  --fluid-max-size: 18;
  --fluid-min-ratio: 1.2;
  --fluid-max-ratio: 1.25;
  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) /
      ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16))
  );
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
  --fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));
  --fluid-min-scale--2: var(--fluid-min-scale--1) * var(--fluid-min-ratio) * var(--fluid-min-negative);
  --fluid-max-scale--2: var(--fluid-max-scale--1) * var(--fluid-max-ratio) * var(--fluid-max-negative);
  --fluid-min-size--2: (var(--fluid-min-size) * var(--fluid-min-scale--2)) / 16;
  --fluid-max-size--2: (var(--fluid-max-size) * var(--fluid-max-scale--2)) / 16;
  --step--2: calc(((var(--fluid-min-size--2) * 1rem) + (var(--fluid-max-size--2) - var(--fluid-min-size--2)) * var(--fluid-bp)));
  --fluid-min-scale--1: var(--fluid-min-ratio) * var(--fluid-min-negative);
  --fluid-max-scale--1: var(--fluid-max-ratio) * var(--fluid-max-negative);
  --fluid-min-size--1: (var(--fluid-min-size) * var(--fluid-min-scale--1)) / 16;
  --fluid-max-size--1: (var(--fluid-max-size) * var(--fluid-max-scale--1)) / 16;
  --step--1: calc(((var(--fluid-min-size--1) * 1rem) + (var(--fluid-max-size--1) - var(--fluid-min-size--1)) * var(--fluid-bp)));
  --fluid-min-scale-0: var(--fluid-min-ratio);
  --fluid-max-scale-0: var(--fluid-max-ratio);
  --fluid-min-size-0: (var(--fluid-min-size)) / 16;
  --fluid-max-size-0: (var(--fluid-max-size)) / 16;
  --step-0: calc(((var(--fluid-min-size-0) * 1rem) + (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)));
  --fluid-min-scale-1: var(--fluid-min-scale-0) * var(--fluid-min-ratio);
  --fluid-max-scale-1: var(--fluid-max-scale-0) * var(--fluid-max-ratio);
  --fluid-min-size-1: (var(--fluid-min-size) * var(--fluid-min-scale-0)) / 16;
  --fluid-max-size-1: (var(--fluid-max-size) * var(--fluid-max-scale-0)) / 16;
  --step-1: calc(((var(--fluid-min-size-1) * 1rem) + (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)));
  --fluid-min-scale-2: var(--fluid-min-scale-1) * var(--fluid-min-ratio);
  --fluid-max-scale-2: var(--fluid-max-scale-1) * var(--fluid-max-ratio);
  --fluid-min-size-2: (var(--fluid-min-size) * var(--fluid-min-scale-1)) / 16;
  --fluid-max-size-2: (var(--fluid-max-size) * var(--fluid-max-scale-1)) / 16;
  --step-2: calc(((var(--fluid-min-size-2) * 1rem) + (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)));
  --fluid-min-scale-3: var(--fluid-min-scale-2) * var(--fluid-min-ratio);
  --fluid-max-scale-3: var(--fluid-max-scale-2) * var(--fluid-max-ratio);
  --fluid-min-size-3: (var(--fluid-min-size) * var(--fluid-min-scale-2)) / 16;
  --fluid-max-size-3: (var(--fluid-max-size) * var(--fluid-max-scale-2)) / 16;
  --step-3: calc(((var(--fluid-min-size-3) * 1rem) + (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)));
  --fluid-min-scale-4: var(--fluid-min-scale-3) * var(--fluid-min-ratio);
  --fluid-max-scale-4: var(--fluid-max-scale-3) * var(--fluid-max-ratio);
  --fluid-min-size-4: (var(--fluid-min-size) * var(--fluid-min-scale-3)) / 16;
  --fluid-max-size-4: (var(--fluid-max-size) * var(--fluid-max-scale-3)) / 16;
  --step-4: calc(((var(--fluid-min-size-4) * 1rem) + (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)));
  --fluid-min-scale-5: var(--fluid-min-scale-4) * var(--fluid-min-ratio);
  --fluid-max-scale-5: var(--fluid-max-scale-4) * var(--fluid-max-ratio);
  --fluid-min-size-5: (var(--fluid-min-size) * var(--fluid-min-scale-4)) / 16;
  --fluid-max-size-5: (var(--fluid-max-size) * var(--fluid-max-scale-4)) / 16;
  --step-5: calc(((var(--fluid-min-size-5) * 1rem) + (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)));
}

header {
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-bottom: 1px solid rgba(149, 157, 165, 0.4);
}

/* nav */
.menu-button {
  cursor: pointer;
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 2;
  display: none;
  width: 32px;
}
.menu-button svg {
  fill: rgb(59, 29, 71);
  width: 100%;
  height: auto;
}

nav.main {
  width: 100%;
  max-width: 1200px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: "Lato", sans-serif;
}
nav.main .logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav.main .logo {
  width: 250px;
  align-self: center;
  display: flex;
  align-items: center;
}
nav.main .logo img {
  width: 100%;
}
nav.main ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.125rem;
}
nav.main ul li {
  padding: 0 8px;
  margin-left: 16px;
}
nav.main ul li a {
  padding-bottom: 8px;
  text-decoration: none;
  color: rgb(59, 29, 71);
  transition: 0.2s all ease-in-out;
}
nav.main ul li a:hover {
  border-bottom: 4px solid rgb(244, 91, 105);
}

@media (max-width: 700px) {
  .menu-button {
    display: block;
  }
  nav.main .logo-container {
    width: 200px;
  }
  nav.main ul.main-menu {
    z-index: 4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #f2f2f2;
    width: 50%;
    height: 100%;
    background-repeat: 1px solid #ccc;
    opacity: 0.9;
    padding: 32px;
    transform: translateX(-500px);
    transition: transform 0.5s ease-in-out;
    margin-top: 0;
  }
  nav.main ul.main-menu li {
    padding: 10px;
    border-bottom: 1px solid hsl(0, 0%, 30%);
  }
  nav.main ul.main-menu li a {
    color: hsl(0, 0%, 30%);
  }
  nav.main ul.main-menu li:last-child {
    border-bottom: 0;
  }
  nav.main ul.main-menu.show {
    transform: translateX(-20px);
  }
  nav.main a.button.donate {
    align-self: flex-start;
  }
}
footer {
  background: rgb(255, 255, 255);
  margin-top: 64px;
  backdrop-filter: blur(12px);
  border-top: 1px solid darkgray;
  color: rgb(59, 29, 71);
}
footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 32px 16px;
}
footer .container div {
  flex-shrink: 1;
  flex-basis: 300px;
  margin-bottom: 32px;
}
footer .container div.logo-container {
  flex-basis: 350px;
}
footer .container div.logo-container .social {
  margin-top: 16px;
}
footer .container div.council {
  flex-grow: 1;
}
footer .container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer .container h5 {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  margin-bottom: 8px;
  margin-top: 8px;
}
footer .container a {
  color: rgb(59, 29, 71);
  text-decoration: none;
}

#myform {
  max-width: 60ch;
}
#myform textarea {
  width: 100%;
}
#myform #fields-areaOfFocus label, #myform #fields-waysToBeInvolved label {
  display: block;
  text-indent: -calc(32px);
  margin-left: 48px;
  margin-bottom: 16px;
  line-height: 1.33;
}
#myform #fields-areaOfFocus label input, #myform #fields-waysToBeInvolved label input {
  margin-right: 4px;
}
#myform #fields-otherAreaOfFocus-field {
  margin-top: 0;
  padding-left: 32px;
}
#myform .heading {
  font-weight: 700;
}
#myform .field {
  margin-top: 32px;
}
#myform fieldset {
  border: none;
  padding: 0;
}

input[type=text], input[type=email], input[type=tel] {
  width: clamp(100%, 75%, 75ch);
  padding: 4px;
}

.phone1-wrapper select {
  display: none;
}

.submit {
  text-align: right;
  margin-top: 16px;
}

button[type=submit] {
  padding: 8px;
  background: rgb(25, 83, 95);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: var(--step-1);
}
button[type=submit]:hover {
  background: #14414b;
}

div.project h3 {
  margin-bottom: 0;
}
div.project h3 a:hover {
  color: #2e9ab0;
}
div.project * + * {
  margin-top: 8px;
  margin-bottom: 0;
}
div.project a.button {
  margin-top: 16px;
}

main.main.projects h2, main.main.projects h3, main.main.projects h4, main.main.projects h5 {
  margin-bottom: 0;
}
main.main.projects h3 + p {
  margin-top: 4px;
}
main.main.projects ul {
  margin-top: 8px;
  margin-left: 8px;
  padding-left: 8px;
}
main.main.projects ul li + li {
  margin-top: 8px;
}
main.main.projects .image-holder {
  width: 100%;
}
main.main.projects .image-holder a {
  display: flex;
}
main.main.projects .image-holder img {
  object-fit: contain;
  margin: 0 auto;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
main.main.projects .data-table table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgb(59, 29, 71);
}
main.main.projects .data-table table thead {
  background-color: rgb(59, 29, 71);
  color: rgb(239, 247, 255);
  text-shadow: 1px 1px 1px black;
}
main.main.projects .data-table table th, main.main.projects .data-table table td {
  padding: 8px 4px;
  font-size: 0.85rem;
}
main.main.projects .data-table table th {
  font-size: 1rem;
}
main.main.projects .data-table table tbody tr:nth-child(odd) {
  background-color: rgb(255, 255, 255);
}
main.main.projects .data-table table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}
main.main.projects .calloutbox {
  margin: 32px 0;
  padding: 4px 16px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
main.main.projects .bill h4 {
  margin-bottom: 0;
  margin-top: 0;
  font-size: var(--step-0);
}
main.main.projects .bill p {
  margin-top: 0;
}
main.main.projects .bill p + p {
  margin-top: 8px;
}
main.main.projects .bill + .bill {
  border-top: 1px solid rgb(65, 64, 66);
  padding-top: 16px;
}
main.main.projects .bill .resources {
  padding: 8px;
  background: white;
}
main.main.projects .bill .resources h5 {
  font-size: var(--step-0);
  margin-top: 0;
}
main.main.projects .bill .resources ul {
  margin-top: 0;
  margin-bottom: 0;
}

main.main.projects .small .project h3 {
  text-transform: none;
  font-size: var(--step-0);
  letter-spacing: 0;
  margin-top: 8px;
}
main.main.projects .small .project p {
  font-size: var(--step--1);
}

.campaign + .campaign {
  margin-top: 8px;
}

main.main ul.peopletable {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
main.main ul.peopletable li {
  list-style-type: none;
}
main.main ul.peopletable h5 {
  margin-top: 8px;
}
main.main ul.peopletable .person-name {
  margin: 0;
  font-size: var(--step--1);
}
main.main ul.peopletable .job-title {
  font-size: var(--step--1);
}

.description {
  font-size: var(--step--1);
  font-style: italic;
}
.description h4 {
  font-size: var(--step--1);
  font-style: normal;
  margin-top: 0;
  margin-bottom: 8px;
}

.two-columns .column {
  flex: 1;
}
.two-columns .column img {
  width: 100%;
}
.two-columns .column.left, .two-columns .column.right {
  width: clamp(320px, 50%, 500px);
  margin: 0 auto;
  margin-top: 16px;
}
@media (min-width: 992px) {
  .two-columns .column.left {
    float: left;
    margin-right: 16px;
    margin-top: 0;
  }
  .two-columns .column.right {
    float: right;
    margin-left: 16px;
    margin-top: 0;
  }
}

.news-archive {
  display: grid;
  grid-template-columns: 100px 1fr;
}
.news-archive div.icon {
  display: grid;
  place-items: center;
}
.news-archive div.icon svg {
  width: 100%;
  height: auto;
  transform: rotate(-3deg);
}

main.projects ul.doc-library {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: start;
  list-style: none;
  margin: 16px 0;
  padding: 0;
}
main.projects ul.doc-library li {
  background: rgb(255, 255, 255);
  border: 1px solid rgba(149, 157, 165, 0.4);
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 8px;
  padding: 16px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
main.projects ul.doc-library li.not-featured {
  grid-template-columns: 1fr;
  align-self: start;
}
main.projects ul.doc-library li a.thumbnail {
  border-bottom: none;
  transition: all 0.2s ease-in-out;
}
main.projects ul.doc-library li a.thumbnail:hover {
  background-color: transparent;
  border-bottom: none;
}
@media (min-width: 992px) {
  main.projects ul.doc-library li {
    max-width: 300px;
  }
}
main.projects ul.doc-library li svg, main.projects ul.doc-library li img {
  width: 100%;
  height: auto;
}
main.projects ul.doc-library li svg {
  transition: all 0.2s ease-in-out;
}
main.projects ul.doc-library li svg .st0 {
  fill: rgba(97, 106, 115, 0.4);
}
main.projects ul.doc-library li svg:hover .st0 {
  fill: rgb(25, 83, 95);
}
main.projects ul.doc-library li + li {
  margin-top: 0;
}

main img {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

* {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

body {
  display: grid;
  min-height: 100vh;
  width: 100vw;
  background: rgb(239, 247, 255);
}

.container {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

a.button {
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  padding: 8px;
  border-radius: 4px;
  background: rgb(25, 83, 95);
  color: rgb(255, 255, 255);
}

main {
  font-family: "Lato", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
}
main a {
  color: rgb(59, 29, 71);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
main p > a, main li a {
  border-bottom: 2px dotted rgb(244, 91, 105);
}
main p > a:hover, main li a:hover {
  background-color: #bde5ee;
  background-blend-mode: screen;
  border-bottom: 2px dotted rgb(25, 83, 95);
}

section + section {
  margin-top: 32px;
}

main.home section.breaking {
  text-align: center;
  background: rgb(244, 91, 105);
  font-size: var(--step-1);
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
}
main.home section.breaking:hover {
  background: rgb(59, 29, 71);
}
main.home section.breaking:hover a {
  color: rgb(255, 255, 255);
}
main.home section.breaking a {
  display: block;
  text-decoration: none;
}
main.home section.breaking a:hover {
  background: none;
  color: rgb(255, 255, 255);
}
main.home section.photo-carousel {
  height: 250px;
  display: flex;
  justify-content: space-between;
  margin: 32px 0;
  overflow: hidden;
}
main.home section.photo-carousel div.cell {
  height: 100%;
  min-width: 110px;
  margin: 0 4px;
}
main.home section.photo-carousel img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
main.home section.mission .container {
  background: rgb(255, 255, 255);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border: 1px solid rgba(149, 157, 165, 0.4);
  padding: 16px;
}
main.home section.featured {
  background: rgb(25, 83, 95);
  color: rgb(239, 247, 255);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
main.home section.featured .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 32px;
  padding: 32px 0;
}
main.home section.featured h3 {
  text-transform: uppercase;
  color: rgb(244, 91, 105);
  margin-top: 0;
  margin-bottom: 0;
}
main.home section.featured ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}
main.home section.featured ul li a {
  color: rgb(239, 247, 255);
  border-bottom: none;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}
main.home section.featured ul li a:hover {
  color: #89c4ff;
  background-color: transparent;
}
main.home section.calltoaction {
  padding: 32px 0;
  text-align: center;
}
main.home section.calltoaction .container {
  padding: 32px 0;
  background: rgb(255, 255, 255);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border: 1px solid rgba(149, 157, 165, 0.4);
}
main.home section.calltoaction h3 {
  font-size: var(--step-3);
}
main.home section.radar {
  background: rgb(255, 255, 255);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
main.home section.radar h3, main.home section.radar p {
  text-align: center;
}
main.home section.radar .data-source p {
  font-size: var(--step--1);
  text-align: left;
}
main.home section.radar .container article.chart {
  text-align: center;
}
main.home section.radar .container article.chart .ct-chart {
  height: 400px;
}
main.home section.radar section.partners .container ul {
  columns: 3 auto;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  font-size: var(--step--1);
}
@media (max-width: 768px) {
  main.home section.radar section.partners .container ul {
    columns: 1;
  }
}
main.home section.radar section.partners .container ul li {
  place-items: center;
}
main.home main.main span.source {
  font-size: var(--step--2);
}
main.home main.main span.source > p {
  font-size: var(--step--2);
}

.getinvolved .container {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 64px;
}

main.main.projects h1 {
  border-bottom: 1px solid rgb(25, 83, 95);
  margin-bottom: 0;
  padding-bottom: 16px;
}
main.main.projects .container.divideandconquer {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
}
@media (min-width: 992px) {
  main.main.projects .container.divideandconquer {
    grid-template-columns: 3fr 8fr;
    grid-gap: 64px;
  }
}
main.main.projects .container.divideandconquer section.small {
  margin-top: 0;
}
main.main.projects .container.divideandconquer section.small > :first-child {
  margin-top: 0;
}
main.main.projects .container.divideandconquer section.big {
  margin-top: 0;
}
main.main.projects .container.divideandconquer section.big > :first-child {
  margin-top: 0;
}
main.main.projects .container.divideandconquer.about section.small {
  order: 2;
}
@media (min-width: 992px) {
  main.main.projects .container.divideandconquer.about section.small {
    order: 1;
  }
}
main.main.projects .container.divideandconquer.about section.big {
  order: 1;
}
@media (min-width: 992px) {
  main.main.projects .container.divideandconquer.about section.big {
    order: 2;
  }
}

main.main .description h4 {
  margin-bottom: 8px;
}