/* ------------------------ root -----------------------------------*/
:root {
  --accent-color: #e9b71e;
  --background: #b3d3e5;
  --background-body: #f6d5af;
  --background-header: #a0cbe2;
  --base-color: #095e83;
  --text-color: var(--bs-gray-900);
  --link-color: #095e83;
  /* --font-base: Arial, Helvetica, sans-serif; */
  --font-base: oswaldlight, sans-serif;
  --op-bac: rgb(14 109 151 / 50%);
}

body {
  /* background-color: var(--background-body); */
  background: linear-gradient(#EDDEA6, #EBBB74);
  font-family: oswaldlight, sans-serif;
  line-height: 1.8;

  &#index {
    & h1 {
      color: var(--bs-light);
      font-family: NarbutAbetka, serif;
      letter-spacing: 4px;
      line-height: 1;
      margin-bottom: 0 !important;
      text-shadow: 0 1px 4px #000;
      font-size: 4rem;
    }

    & h3 {
      color: var(--bs-light);
      font-family: oswaldlight, sans-serif;
      line-height: 1;
      margin-bottom: 2rem;
    }
  }
}

a {
  text-decoration: none;

  &.link {
    display: block;
    margin: 1rem auto;
    text-align: center;
  }
}

h1 {
  color: #46200b;
}

img {
  height: auto;
  margin-bottom: 1rem;
  width: 100%;
}

/* --------------------------- header --------------------------- */
header {
  background: url(/assets/img/header-bg.webp), var(--background-header);
  padding: 0.5rem 1rem;

  &>.header {
    height: 116px;

    & #logo {
      width: 80%;

      & img {
        max-height: 116px;
      }
    }

    & .big-title {
      background-size: contain;
      margin-top: -0.5rem;
      /* padding-top: 4px; */
      position: relative;
      text-align: center;

      &>p {
        color: var(--base-color);
        font-size: 2rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 2;

        & span {
          color: var(--base-color);
          font-family: NarbutAbetka, serif;
          font-size: 4.6rem;
          letter-spacing: 1rem;
          line-height: 0.65;
          position: relative;
          text-shadow: 1px 1px 4px var(--accent-color);

          &::after {
            animation: showAfter 2s ease 1s forwards;
            background: url(/assets/img/chayka.svg) no-repeat;
            content: '';
            height: 50px;
            opacity: 1;
            position: absolute;
            right: -3.4rem;
            top: 4px;
            transform: rotate(-15deg);
            width: 20%;
            z-index: 1;
            -webkit-transform: rotate(-15deg);
            -moz-transform: rotate(-15deg);
            -ms-transform: rotate(-15deg);
            -o-transform: rotate(-15deg);
            -webkit-animation: showAfter 2s ease 1s forwards;
          }
        }

        &:has(span) {
          margin-bottom: -1.2rem;
        }
      }
    }

    & .control-block {
      position: relative;

      & .wrapper-button {
        width: 50%;

        & button.contrast {
          color: var(--base-color);
          font-size: 1.6rem;
        }

        & button.character {
          & span.smoll {
            font-size: 1.5rem;
          }

          & span.big {
            font-size: 1.7rem;
          }
        }

        & a.help {
          color: var(--bs-danger);
          font-size: 4rem;
        }
      }
    }

    & .inclusive {
      font-size: 1.2rem;
      position: absolute;
      right: 6px;
      top: -6px;

      & .character {
        font-weight: bold;

        & span.small {
          font-size: 0.8rem;
        }
      }
    }
  }
}

@keyframes showAfter {
  to {
    opacity: 1;
  }
}

:is(.character, .contrast) {
  background: none;
  border: none;
}

/* --------------------------- navbar --------------------------- */
nav {
  &.bg-nav {
    background-color: var(--base-color);
  }

  & ul {
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}

/* --------------------------- main --------------------------- */
.fp-background {
  background: url(/assets/img/bg-fp.webp) no-repeat center;
  background-size: cover;
}

main {
  min-height: calc(100vh - 116px - 49px);
}

.task-link {
  margin-bottom: 3rem;
}

.card {
  background-color: var(--bs-warning);
}

.row.stat {
  &>div:nth-child(1) {
    & .card {
      background-color: #a9d8e1;
    }
  }

  &>div:nth-child(2) {
    & .card {
      background-color: #fff3cd;
    }
  }

  &>div:nth-child(3) {
    & .card {
      background-color: #e3a5e7;
    }
  }

  &>div:nth-child(4) {
    & .card {
      background-color: #82d3ad;
    }
  }
}

.card.last-book {
  background-color: var(--base-color);

  & h2 {
    color: #fff3cd;
  }
}

.row.last-books {
  & .card {
    background-color: #a9d8e1;
  }
}

/* --------------------------- footer --------------------------- */
footer {
  background: var(--base-color);
  color: var(--background);
  height: auto;
  padding: 0;

  & .copyright {
    align-items: end;
    font-size: 0.9rem;

    & p {
      margin-bottom: 0;
      padding: 0.2rem 0 0 4rem;
    }
  }
}

/* ------------------------ modal ------------------------------*/
.modal-body {
  background-color: var(--bs-warning);
  border-radius: 8px;
  color: var(--base-color);
}

.close {
  background-color: var(--bs-danger);
  border: none;
  border-radius: 50%;
  color: var(--bs-light);
  font-size: 2rem;
  line-height: 1;
  position: absolute;
  right: -16px;
  top: -16px;
  width: 34px;
  z-index: 2;
}