:root {
  --ukceh-colour-day: rgb(255 255 255 / 1);
  --ukceh-colour-night: rgb(0 0 0 / 1);
  --ukceh-colour-data: rgb(219 254 82 / 1);
  --ukceh-colour-water: rgb(71, 122, 226);
  --ukceh-colour-land: rgb(144 169 104 / 1);
  --ukceh-colour-earth: rgb(215 183 170 / 1);
  --ukceh-colour-air: rgb(214 234 230 / 1);
  --dark-color: var(--ukceh-colour-night);
  --landing-vocabulary-list-bg: var(--ukceh-colour-night);
  --landing-vocabulary-list-text: var(--ukceh-colour-day);
  --landing-vocabulary-list-heading: var(--ukceh-colour-day);
  --landing-vocabulary-list-link: var(--ukceh-colour-data);
  --landing-vocabulary-list-link-underline: var(--ukceh-colour-data);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  scrollbar-gutter: stable;

  main {
    flex: 1
  }

  footer {
    display: none
  }
}

.ukcehIntro {
  background-color: var(--ukceh-colour-air);
}

.about .container {
  padding: unset
}

#skosmos-logo {
  background-image: url("../pics/UKCEH_Logo_Master_RGB_Black.svg");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  width: 360px;
  height: 120px;

  @media (width <993px) {
    width: 100%;
    height: 90px;
    background-position: center
  }

  @media (width <600px) {
    height: 60px
  }
}

#skosmos-logo-top {
  background-image: url("../pics/UKCEH_Logo_Master_RGB_White.svg");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  min-width: 170px;
  min-height: 50px
}

li:has(#navi3) {
  display: none
}

main {
  a {

    &:hover,
    &:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px
    }
  }

  #sidebar {
    .sidebar-buttons {
      a {
        &:hover {
          background-color: #ddd
        }

        &.active {
          pointer-events: none
        }
      }
    }

    #tab-alphabetical {
      a.page-link {

        &:hover,
        &:focus-visible {
          text-decoration: none;
          background-color: rgb(255 255 255 /.5)
        }
      }
    }

    .sidebar-list {
      ul.list-group {
        li {
          padding-block: 2px !important;

          a {

            &:hover,
            &:focus-visible {
              background-color: rgb(0 0 0 /.1)
            }
          }
        }
      }
    }

  }

}

.about {
  .container {
    max-width: min(90vw,1320px)
  }

  #about-slot {
    .ukcehLogo {
      max-width: 450px;
      height: auto;
      margin: 1em auto
    }
  }
}