/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  width: 95%;
  margin: auto;
  font-family: Avenir, Helvetica, sans-serif;
  color: var(--font-bg-dark);
  background: var(--bg-dark);
}

/* C O L O R  S C H E M E S: */
:root {
  --bg-single-img: hsl(240, 5%, 20%); /* phase out! */
  --fnt-single-img: rgb(165, 165, 165);
  --font-color-links-sgl-img: rgb(206, 197, 182); /*  tone for links */
  --font-color-links-hover-sgl-img: rgb(255, 17, 17);

  /* SWIPER: customising swiper-bundle.min.css*/
  --swiper-theme-color: #8b8b88;
  --swiper-navigation-size: 7vh;

  /* LIGHT SCHEME */
  --bg-light: rgb(199, 199, 199);
  --bg-light-font: rgb(103, 102, 102);
  --bg-light-links: rgb(71, 71, 71);

  /* DARK SCHEME */
  --bg-dark: rgb(44, 44, 44);
  --font-bg-dark: rgb(145, 145, 145);
  --links-bg-dark: rgb(192, 183, 165);
  --font-titles-xl: rgb(186, 177, 160);

  /* DARKER SCHEME */
  --bg-darker: rgb(26, 26, 29);

  /* BLACK BACKGROUND: */
  --bg-black: black;
  --font-color-bg-black: rgb(107, 106, 106);
  --font-color-links-bg-black: rgb(172, 169, 169);
}

/* body id for light colour scheme */
#bg-light {
  color: var(--bg-light-font);
  background: var(--bg-light);
}

/* for the header-nav - adjusted for the burger-nav in burger.css */
#bg-light ul > li > a {
  color: var(--bg-light-font);
}

#bg-black {
  background-color: black;
  color: var(--font-color-bg-black);
}

#bg-darker {
  background-color: var(--bg-darker);
  color: var(--font-color-bg-black);
}

/* L I N K S styling*/

a:visited {
  text-decoration: none;
  border-color: transparent;
}

a.plain {
  text-decoration: none;
  color: inherit;
}

a.plain-bg-dark {
  text-decoration: none;
  color: var(--links-bg-dark);
}

/* used for standard 'figure' and repeated as class where used outside 'figure'*/
figcaption {
  font-size: calc(0.6rem + 0.4vw);
  padding-top: 0.5vh;
}

.figcaption {
  font-size: calc(0.6rem + 0.4vw);
  line-height: 0.8;
}

/*Links in  text, plain, keeping size but having colour */
a.in-text-link {
  color: var(--font-color-links-sgl-img);
  outline: none;
  text-decoration: none;
}
a.in-text-link:hover {
  color: #bdbcbc;
}

/* repeated here from index-styles not yet necessary*/
.thisPage {
  text-align: left;
  font-weight: 900;
  font-size: calc(1.2rem + 0.8vw);
}

@media (max-width: 430px) {
  li.thisPage-xs {
    font-size: calc(0.9rem + 0.9vw);
    padding-bottom: 2vh;
  }
  .thisPage-xs {
    font-size: calc(0.9rem + 0.9vw);
    padding-bottom: 2vh;
  }
}

/* for the social media links - repeated in info.css */
.social-media-links-container {
  display: flex;
  column-gap: 2vw;
  justify-content: flex-end;
}

.social-media-links {
  max-width: 2vw;
  opacity: 0.4;
}

@media (max-width: 1024px) {
  .social-media-links {
    max-width: 5vw;
    margin-left: 25px;
  }
}

.xs-caps {
  font-variant: small-caps;
  font-weight: bolder;
}