* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: rgb(0, 141, 72);
  --secondary-color: rgb(112, 191, 72);
  --tertiary-color: rgb(246, 251, 72);
  --heading-color: #000;
  --card-background: rgb(0, 141, 72);
}

body {
  /* background: rgb(0, 141, 72);
  background: linear-gradient(
    180deg,
    rgba(0, 141, 72, 1) 5%,
    rgba(112, 191, 72, 1) 50%,
    rgba(246, 251, 72, 1) 99%
  ); */
  background-attachment: fixed;
}

.nunito-sans-300 {
  font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100, "YTLC" 500;
}

.nunito-sans-500 {
  font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100, "YTLC" 500;
}

.lexend-500 {
  font-family: "Lexend", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.heading {
  color: var(--heading-color);
  text-align: center;
}

.outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
}

.inner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  width: 100%;
}

.logo {
  max-width: 130px;
  width: 35%;
}

.description {
  text-align: justify;
  margin-top: 10px;
  padding: 15px;
}

.card {
  background-color: var(--card-background);
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  margin-bottom: 10px;
}

.card:hover {
  background-color: var(--secondary-color);
}

.card ol {
  text-align: left;
  margin-top: 12px;
  margin-left: 24px;
}

.card-header {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
}

.card-header h2 {
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.card-content {
  display: none;
}

.card-content li {
  color: #fff;
}

.links {
  color: #fff;
  text-decoration: none;
}

.card-content.active {
  display: block;
}

.contact-footer {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-footer p,
h2 {
  text-align: center;
  margin-bottom: 10px;
}

.contact-footer h2 {
  margin-bottom: 12px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--primary-color);
}

@media (min-width: 768px) {
  .screen {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .outer-container {
    flex-direction: row;
    padding-top: 20px;
  }

  .info {
    overflow-y: auto;
    max-height: 70vh;
    justify-content: flex-start;
  }

  .card {
    max-width: 30rem;
  }
}