:root {
	--mryBlack: rgb(26, 26, 26);
	--mryBlackA20: rgba(26, 26, 26, .2);
	--mryWhite:  rgb(241, 241, 241);
	--mryGreen: rgb(15, 123, 97);
	--djWhiteA60:  rgba(241, 241, 241, 0.6);
	--djWhiteA30:  rgba(241, 241, 241, .3);
	color: var(--mryWhite);

  --maxWidth: 1080px
}
*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  font-family:Assistant,Arial,sans-serif;
  color:#17312c;
  background:var(--mryWhite);
  line-height:1.6
}

.divContainer {
  width:min(1180px, calc(100% - 40px));
  margin:auto
}

@media(max-width:600px) {
  .divContainer {
    width:min(100% - 24px,1180px)
  }
}

h1 {
  color: var(--mryWhite);
  text-shadow:
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000;
}

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border-radius:10px;
  padding:13px 22px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
  font-size:16px
}

.light {
  color:#bfe9db
}

.light-btn {
  background:white;
  color:var(--mryGreen)
}

/* Accessibility menu */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:4px solid #f0b400;
  outline-offset:4px
}

body.high-contrast,body.high-contrast .section,body.high-contrast .alt,body.high-contrast .contact,body.high-contrast .refer,body.high-contrast .artActivity, body.high-contrast .artStory,body.high-contrast .lead-form,body.high-contrast .donation-card {
  background:#000!important;
  color:#fff!important
}

body.high-contrast a {
  color:#ff0!important
}

body.high-contrast input,body.high-contrast select,body.high-contrast textarea {
  background:#000;
  color:#fff;
  border-color:#fff
}

body.highlight-links a {
  text-decoration:underline!important;
  text-decoration-thickness:3px!important
}

body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

.secSection {
  position:relative;
  margin-top:-32px;
  padding:95px 0;
  z-index:2
}

@media(max-width:900px) {
  .secSection {
    padding:70px 0
  }
}

.secSection h2 {
  font-size:clamp(34px,4vw,54px);
  line-height:1.1;
  margin:0 0 18px
}

.primary {
  background:var(--mryGreen);
  color:white
}

.secondary {
  background:#fff;
  color:var(--mryGreen);
  border-color:var(--mryGreen)
}

.secTag {
  display:inline-block;
  color:var(--mryGreen);
  font-weight:800;
  letter-spacing:.04em;margin-bottom:12px
}

/* Activities */
.artActivity {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 8px 28px rgba(33,64,57,.07);
}

.artActivity h3 {
  font-size:24px;
  margin:16px 0 5px
}

.artActivity p {
  margin:0;
  color:#62756f
}

.activity-visual {
  height:150px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:58px
}

.activity-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

@media(max-width:900px) {
  .activity-grid {
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:600px) {
  .activity-grid {
    grid-template-columns:1fr
  }
}

.v1 {
  background:#dff5ed
}

.v2 {
  background:#f3e8ff
}

.v3 {
  background:#e7efff
}

.v4 {
  background:#fff0d8
}

.v5 {
  background:#eee6de
}

.v6 {
  background:#ffe8eb
}

/* Donations */
.donation-grid {
  display:grid;
  gap:22px
}

@media(max-width:900px) {
  .donation-grid {
    grid-template-columns:1fr
  }
}

.donation-card {
  background:#fff;
  border:1px solid #dce8e4;
  border-radius:18px;
  padding:26px
}

.donation-card.featured {
  border:2px solid var(--mryGreen)
}

.divProjectRows{
  display: flex;
  flex-direction: column;
}

.progress {
  height:12px;
  background:#e8efed;
  border-radius:999px;
  overflow:hidden;
  margin:22px 0 8px
}

.progress span {
  display:block;
  height:100%;
  background:var(--mryGreen)
}

.progress-meta {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:#677975;
  margin-bottom:20px
}

.divCampainsActions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Instructors */
.artInstructor {
    background: var(--mryGreen);
    border-radius: 18px;
    padding: 18px;
    color: var(--mryWhite);
    box-shadow: 0 8px 28px rgba(33,64,57,.07);
}

.artInstructor picture, .artInstructor img {
    width: 100px;
}
