/*root*/
:root {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
  --black: #291720;
  --black-50: rgba(41, 23, 32, 0.5);
  --black-80: rgba(41, 23, 32, 0.8);
  --green: #04a777;
  --green-10: hwb(162 2% 35% / 0.1);
  --green-dark: #203b36;
  --green-light: #c1e4a0;
  --green-light-25: hwb(91 63% 11% / 0.25);
  --red: #ae2012;
  --pink: #fba99d;
  --pink-20: hsla(8, 92%, 80%, 0.2);
  --yellow: #e4dea0;
  --yellow-25: hsla(55, 56%, 76%, 0.25);
  --white: #ffffff;
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}
@media screen and (min-width: 960px) {
  :root {
    font-size: 18px;
  }
}

body {
  font-family: "Inter", "Roboto", sans-serif;
}

/*reset*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Inter", "Roboto", sans-serif;
  color: var(--black);
}

ul,
ol {
  list-style: none;
}

a:link,
a:visited {
  text-decoration: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

select:hover {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

img {
  max-height: 80vh;
  max-width: 80vw;
}

/** utility **/
.container {
  max-width: 1250px;
  margin: 0 auto;
}

.hidden {
  display: none;
}

.btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--green);
  color: var(--white);
}

.btn:hover,
.btn:focus {
  display: inline-block;
  width: auto;
  color: var(--green);
  background-color: var(--white);
  border: 1px solid var(--green);
}

.btn-red {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--red);
  color: var(--white);
}

.btn-red:hover,
.btn-red:focus {
  color: var(--red);
  background-color: var(--white);
  border: 1px solid var(--red);
}

.add-btn {
  width: 9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem !important;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  border-radius: 50px;
  font-size: 1.25rem;
  font-weight: bold;
}
.add-btn::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --><svg width="50px" height="50px" viewBox="0 -0.5 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><title>plus_mini [%23ffffff]</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-345.000000, -206.000000)" fill="%23ffffff"><g id="icons" transform="translate(56.000000, 160.000000)"><polygon id="plus_mini-[%23ffffff]" points="298 49 298 51 294.625 51 294.625 54 292.375 54 292.375 51 289 51 289 49 292.375 49 292.375 46 294.625 46 294.625 49"></polygon></g></g></g></g></svg>');
}

.add-btn:hover::after,
.add-btn:focus ::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220%200%2032%2032%22 fill%3D%22none%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M32%2012V20H20V32H12V20H0V12H12V0H20V12H32Z%22 fill%3D%22%2304A777%22/%3E%3C/svg%3E");
}
.padding {
  padding: 1rem;
}

.centercontent {
  position: fixed;
  top: 50%;
  left: 50%;
}
.leftcontent {
  position: absolute;
  top: 25%;
  left: 10%;
}

.white-bg {
  background-color: var(--white);
}

/** header **/

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
/** main Menu**/

.main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.main-menu__btn {
  width: 3.75rem;
  aspect-ratio: 2;
  background-image: url('data:image/svg+xml,<svg width="60" height="58" viewBox="0 0 60 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50.125 26.5834H9.875C8.56332 26.5834 7.5 27.6113 7.5 28.8792V29.1209C7.5 30.3888 8.56332 31.4167 9.875 31.4167H50.125C51.4367 31.4167 52.5 30.3888 52.5 29.1209V28.8792C52.5 27.6113 51.4367 26.5834 50.125 26.5834Z" fill="%23291720"/><path d="M50.125 38.6666H9.875C8.56332 38.6666 7.5 39.6945 7.5 40.9625V41.2041C7.5 42.4721 8.56332 43.5 9.875 43.5H50.125C51.4367 43.5 52.5 42.4721 52.5 41.2041V40.9625C52.5 39.6945 51.4367 38.6666 50.125 38.6666Z" fill="%23291720"/><path d="M50.125 14.5H9.875C8.56332 14.5 7.5 15.5279 7.5 16.7958V17.0375C7.5 18.3055 8.56332 19.3333 9.875 19.3333H50.125C51.4367 19.3333 52.5 18.3055 52.5 17.0375V16.7958C52.5 15.5279 51.4367 14.5 50.125 14.5Z" fill="%23291720"/></svg>');
  background-repeat: no-repeat;
  background-position: right;
  position: relative;
}

.main-menu__ul {
  display: none;
}
.main-menu__lnk {
  display: block;
  padding: 0.5rem;
  box-shadow: 0px 5px 5px var(--green-10);
}
.main-menu__lnk:hover {
  font-size: 1.3rem;
  text-decoration: underline;
}
.main-menu__ul--side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  position: absolute;
  right: 0;
  z-index: 5;
  background-color: #ffffff;
}

.main-menu__lnk--active {
  background-color: var(--green);
  color: var(--white);
}
@media screen and (min-width: 960px) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .main-menu__btn {
    display: none;
  }
  .main-menu__ul {
    display: flex;
    flex-direction: end;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/** heading **/

.notifications {
  z-index: 2;
  margin: 1rem;
}
.notifications-error-li {
  color: var(--red);
}
.notifications-success {
  color: var(--green);
}
.main-ttl {
  text-align: center;
}

.main-ttl__h1 {
  padding: 0.5rem;
  border-top: 1px solid var(--black-50);
  border-bottom: 1px solid var(--black-50);
  font-size: 2rem;
}
.main-ttl__h1--lettre {
  font-size: 3.625rem;
}
.main-ttl__h1--a {
  color: var(--black-50);
}
.main-ttl__h1--f,
.main-ttl__h1--S {
  color: var(--green);
}

.main-ttl__h1--p {
  color: var(--red);
}
.main-ttl__h1--city {
  font-size: 3rem;
}

.main-ttl__subheading {
  color: var(--black-50);
  font-weight: bold;
}

/** slider **/

.slider {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  text-align: center;
}
.slider__img {
  max-height: 80vh;
  max-width: calc(100vw - 1.75rem * 2);
  align-items: center;
}
.slider__btn {
  width: 1.75rem;
  aspect-ratio: 0.78;
  background-repeat: no-repeat;
}
.slider__btn--next {
  background-image: url('data:image/svg+xml,<svg width="28" height="36" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="36" fill="%2304A777" fill-opacity="0.5"/><path d="M10 26L18 18L10 10" stroke="%23291720" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.slider__btn--pervious {
  background-image: url('data:image/svg+xml,<svg width="28" height="36" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="36" fill="%2304A777" fill-opacity="0.5"/><path d="M18 10L10 18L18 26" stroke="%23291720" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.slider__btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
  filter: grayscale(100%);
}

/** about us **/
.about-us {
  background-color: var(--yellow-25);
}
.abous-us__flag-container {
  display: flex;
  flex-direction: row;
}
.abous-us__flag {
  display: block;
  height: 1.375rem;
  width: calc(100% / 3);
}

.abous-us__flag--black {
  background-color: var(--black);
}
.abous-us__flag--red {
  background-color: var(--red);
}
.abous-us__flag--green {
  background-color: var(--green);
}
.about-us__container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1rem;
}
.about-us__ttl {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--red);
}

.about-us__sub-ttl {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--black);
}

.about-us__txt {
  font-size: 1rem;
  color: var(--green-dark);
}

.about-us__lnk {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--red);
}

.about-us__lnk::after {
  content: " >";
}

@media screen and (min-width: 960px) {
  .about-us__ttl,
  .about-us__lnk {
    text-align: center;
  }
}

/** hot articles **/
.hot-news {
  padding: 1rem;
}
.hot-news__ttl {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
}
.article__container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.article__img {
  width: 100%;
  object-fit: scale-down;
  aspect-ratio: 1.5;
}
.article__date {
  font-weight: 600;
  color: var(--green);
}
.article__ttl {
  font-size: 1.25rem;
  font-weight: 600;
}
.article__txt,
.article__container p {
  color: var(--black-50);
}
.article__btn-container {
  text-align: right;
}
.article__btn {
  width: 6rem;
}
.article__btn::after {
  content: " >";
}
.article__author {
  color: var(--red);
  text-align: right;
}
.article__category {
  color: var(--red);
  font-weight: bold;
}
.article__category-container {
  display: flex;
  justify-content: space-between;
}

/** article page **/
.article__content {
  font-size: 1rem;
  height-line: auto;
  color: var(--black-80);
}


.article__content h2,
.article__content h3 {
  margin: 2em 0 1em;
}

.article__content ul,
.article__content ol {
  margin: 1em 0 1em 1.5em;
}

.article__content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.article__content iframe,
.article__content video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.article__content blockquote {
  border-left: 4px solid var(--green);
  padding-left: 1em;
  margin: 1.5em 0;
  color: var(--black-80);
  font-style: italic;
}

.article__content a {
  color: var(--green);
}

.article__content a:link,
.article__content a:visited {
  color: var(--red);
  text-decoration: underline;
}

/**edit delete article page**/
.articl-actions {
  display: flex;
  justify-content: space-between;
  margin: 0 1rem;
}

.articl-delete-form {
  max-width: 22.5rem;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  font-size: 1.125rem;
  background-color: var(--yellow-25);
}

.articl-delete-form--white {
  border: 1px solid var(--black-50);
  background-color: var(--white);
}

.articl-delete-form-btn {
  display: flex;
  justify-content: space-between;
}

@media screen and (min-width: 960px) {
  .article__container {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1Fr);
  }
}

/** donation **/
.donation,
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background-color: var(--green-light-25);
}
.donation-ttl {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.donation-txt {
  text-align: center;
}
.donation__btn {
  margin: 0 auto;
}
.donation__img {
  height: 100%;
  margin: 0 auto;
}

/** contact us **/
.contact-us {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: auto 0;
}

.contact-us::before {
  content: url('data:image/svg+xml,<svg width="51" height="64" viewBox="0 0 51 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.35137 2.71208C0.95387 5.56408 0.0899927 14.479 1.75024 21.7448C3.04324 27.4031 5.79224 34.9932 10.4277 42.1405C14.7885 48.8642 20.8724 54.8932 25.5114 58.3815C31.4685 62.8605 39.9606 65.7075 44.3581 62.8555C46.5817 61.4133 49.8854 57.4732 50.0361 56.7662C50.0361 56.7662 48.0989 53.7792 47.6737 53.1237L41.1772 43.1068C40.6945 42.3625 37.667 43.0428 36.129 43.914C34.0544 45.0895 32.1437 48.2435 32.1437 48.2435C30.7212 49.0653 29.5297 48.2465 27.0402 47.1007C23.9806 45.693 20.5406 41.319 17.8027 37.3573C15.3021 33.242 12.7112 28.3171 12.6737 24.9493C12.6429 22.2091 12.3811 20.7873 13.7117 19.8236C13.7117 19.8236 17.3707 19.3653 19.2901 17.9506C20.7127 16.9016 22.5686 14.4148 22.0859 13.6703L15.5894 3.65358C15.1642 2.99809 13.227 0.011085 13.227 0.011085C12.5199 -0.13954 7.575 1.26996 5.35137 2.71208Z" fill="%2304A777"/></svg>');
}

/** footer **/

.footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.social-media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  margin: 0 auto;
}

.footer-links-element:link {
  color: var(--black);
  text-decoration: underline;
}
.footer-links-element:visited,
.footer-links-element:hover {
  color: var(--green);
}

.copywrite {
  text-align: center;
}

.attention {
  display: flex;
  align-items: center;
}
.attention__img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.attention__txt {
  font-size: 0.875rem;
  color: var(--black-50);
}