/* =========================================================
   Based on the SCP Foundation's Sigma+ style
   ========================================================= */


@font-face {
    font-family: 'Century Gothic';
    src: url('CenturyGothic.woff2') format('woff2'),
        url('CenturyGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('/assets/fonts/CenturyGothic-Bold.woff2') format('woff2'),
        url('/assets/fonts/CenturyGothic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

:root {
  
  --royal-yellow: #e7bc30;
  --proud-of-you: #fde690;
  --gold: #ab8c25;
  --surgical-blue: #85b1f4;
  --sunshine-violet: #8052e1;
  --prospit: #e7bc30;
  /*Montse's blue is just Blue, #0000ff */
  --red-marker: #ff4650;
  --wisteria: #8888cc;
  --plague: #542e23;
  
  
  --header-title: "Alkali's addendums";
  --header-subtitle: "Personal archive";

  --header-title-scale: 2;
  --header-subtitle-scale: 1;

  --header-subtitle-size:
    min(
      calc(.875rem * var(--header-subtitle-scale)),
      calc(.475rem * var(--header-subtitle-scale) + 1.25vw)
    );

  --header-logo: url("/assets/main components/signature_logo.svg");
  --header-logo-size: 6.25rem;
  --header-logo-adaptive-size:
    min(var(--header-logo-size), calc(var(--header-logo-size) * .575 + 5vw));

  --header-height: 8.75rem;

  --header-gradient-top-color: #FFFFFF;
  --header-gradient-top-stop: .1;
  --header-gradient-bottom-color: var(--gold);
  --header-gradient-bottom-stop: .95;

  --diagonal-stripes-angle: 45deg;
  --diagonal-stripes-width: .08rem;
  --diagonal-stripes-gap: .3rem;
  --diagonal-stripes-color: var(--proud-of-you);

  --top-bar-height: 1.375rem;
  --top-bar-gradient-top-color: #535353;
  --top-bar-gradient-bottom-color: #3B3B3B;

  --top-bar-link-color: #fff;
  --top-bar-link-hover-color: var(--royal-yellow);
  --top-bar-link-hover-background: #fff;

  --dropdown-width: calc(8.25rem + 2.25vw);
  --dropdown-background: #eee;
  --dropdown-link-color: var(--royal-yellow);
  --dropdown-link-hover-color: var(--gold);
  --dropdown-link-background: transparent;
  --dropdown-link-border: .05rem solid #ddd;
  --dropdown-link-hover-background: #fff;

  --side-bar-width: 14rem;

  --area-max-width: 62.5rem;
  --area-min-margin: 1.25rem;
  --area-comp-margin:
    max(
      calc((100vw - var(--area-max-width)) / 2),
      var(--area-min-margin)
    );

  --final-header-height:
    calc(var(--header-height) + var(--top-bar-height));

  --tab-text-color: #000;
  --tab-background: #fefefe;
  --tab-border-color: var(--gold);
  --tab-hover-text-color: var(--tab-text-color);
  --tab-hover-background: var(--proud-of-you);
  --tab-hover-border-color: var(--tab-border-color);
  --tab-selected-text-color: #fff;
  --tab-selected-background: var(--gold);
  --tab-selected-border-color: var(--gold);

  --hovertip-background: #fff;
  --hovertip-border: .05rem solid #000;
  

  
}


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: Arial, Verdana, sans-serif;
  line-height: 1.5;
  color: #222;
  background: #fff;
}

button,
input,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;
  height: auto;
  
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a{
  color: var(--royal-yellow);
  text-decoration: none;
}
a:hover {
  color: var(--proud-of-you);
  text-decoration: underline;
}

a:visited {
  color: var(--gold);
}
a:visited:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header {
  position: relative;
  width: 100%;
  min-height: var(--final-header-height);
  background-image:
    repeating-linear-gradient(
      var(--diagonal-stripes-angle),
      var(--diagonal-stripes-color),
      var(--diagonal-stripes-color) var(--diagonal-stripes-width),
      transparent var(--diagonal-stripes-width),
      transparent var(--diagonal-stripes-gap)
    ),
    linear-gradient(
      to bottom,
      var(--header-gradient-top-color)
        calc(var(--header-gradient-top-stop) * var(--header-height)),
      var(--header-gradient-bottom-color)
        calc(var(--header-gradient-bottom-stop) * var(--header-height))
    );

  background-repeat: repeat-x;
  background-size: auto;
}

.header-content {
  width: 100%;
  max-width: var(--area-max-width);
  min-height: var(--header-height);
  margin: 0 auto;

  position: relative;

  display: grid;

  grid-template-areas:
    "account account account"
    "logo brand search"
    "logo brand search";

  grid-template-columns:
    var(--header-logo-adaptive-size)
    1fr
    auto;

  grid-template-rows: auto 1fr 1fr;

  padding-inline: 0;
}


/* Header logo */

.header-logo {
  grid-area: logo;

  display: block;

  width: var(--header-logo-adaptive-size);
  min-height: var(--header-logo-adaptive-size);

  align-self: center;

  background: var(--header-logo) no-repeat center;
  background-size: contain;
}


/* Header text */

.header-brand {
  grid-area: brand;

  align-self: center;

  padding-inline-start: calc(var(--header-logo-adaptive-size) * .05);
}

.header-brand h1,
.header-brand p {
  margin: 0;
  padding: 0;
  
}

.header-brand h1 {
  line-height: 1.125;
  display: inline-block;
  max-width: max-content;

  color: #000;
  text-decoration: none;
  letter-spacing: 0;
  font-size: 1em;
}

.header-brand p {
  display: inline-block;
  max-width: max-content;

  color: #000000;
  font-size: 1.5em;
  line-height: 1.125;
  letter-spacing: .05vw;
}



/* ---------------------------------------------------------
   TOP BAR / NAVIGATION
   --------------------------------------------------------- */

.top-bar {
  position: relative;
  z-index: 5;

  width: 100%;
  min-height: var(--top-bar-height);

  font-size: .875em;

  padding-inline: var(--area-min-margin);
  background-image:
    linear-gradient(
      to bottom,
      var(--top-bar-gradient-top-color) 0%,
      var(--top-bar-gradient-bottom-color) 100%
    );
}

.top-bar-inner {
  max-width: var(--area-max-width);
  height: 100%;
  min-height: var(--top-bar-height);
  margin: 0 auto;
}

.top-navigation,
.top-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-navigation {
  min-height: var(--top-bar-height);

  display: flex;
  justify-content: flex-end;
}

.top-navigation > li {
  position: relative;
}

.top-navigation a {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: var(--top-bar-height);

  color: var(--top-bar-link-color);
  text-align: center;
  text-decoration: none;

  line-height: 1.275;

  padding-inline:
    calc(var(--dropdown-width) * .05 + .25vw);
}

.top-navigation > li:hover > a,
.top-navigation > li:focus-within > a,
.top-navigation > li > a:hover,
.top-navigation > li > a:focus {
  color: var(--top-bar-link-hover-color);
  background: var(--top-bar-link-hover-background);
}


/* Dropdowns */

.top-navigation .dropdown {
  position: absolute;

  top: 100%;
  left: 0;

  min-width: max(100%, var(--dropdown-width));
  width: max-content;

  background: var(--dropdown-background);

  z-index: 20;

  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.top-navigation > li:last-child .dropdown {
  left: auto;
  right: 0;
}

.top-navigation > li:hover > .dropdown,
.top-navigation > li:focus-within > .dropdown {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.top-navigation .dropdown li a {
  min-width: max-content;
  width: 100%;

  justify-content: flex-start;

  color: var(--dropdown-link-color);
  background: var(--dropdown-link-background);

  border-top: var(--dropdown-link-border);

  padding: .125em .75em;

  text-align: start;
}

.top-navigation .dropdown li a:hover,
.top-navigation .dropdown li a:focus {
  color: var(--dropdown-link-hover-color);
  background: var(--dropdown-link-hover-background);
}


/* Mobile menu button */

.mobile-menu-button {
  display: none;
}


/* ---------------------------------------------------------
   MAIN AREA
   --------------------------------------------------------- */

.content-wrap {
  width: calc(100% - var(--area-min-margin) * 2);
  max-width: var(--area-max-width);

  margin: 2rem auto;

  display: flex;
  column-gap: 2.325rem;
}

#main-content {
  flex: 1 1 auto;

  min-width: 0;
  max-width: 100%;

  margin: 0;
  padding: 0;

  overflow-wrap: break-word;
}

#page-content {
  font-size: unset;
}


/* Sidebar */

.side-bar {
  width: var(--side-bar-width);
  flex: 0 0 var(--side-bar-width);
  align-self: flex-start;
}

.side-bar h2 {
  margin: 1rem 0 .35rem;
  padding: .2rem 0 .2rem .75rem;

  font-size: .75em;

  border-bottom: 1px solid #696969;
}

.side-bar ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.side-bar a {
  text-decoration: none;
}

.side-bar a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------- */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  column-gap: .55ch;

  margin-bottom: 1rem;

  font-size: .9em;
}


/* ---------------------------------------------------------
   USER DISPLAY
   --------------------------------------------------------- */

.printuser {
  display: inline-flex;
  align-items: baseline;
  gap: .25em;

  text-indent: 0;
}

.printuser a {
  margin-right: 0;
}

.printuser > a:first-child {
  display: flex;
  align-self: center;

  min-width: max-content;

  user-select: none;
}

.printuser > a:first-child img {
  width: 1.25em;
  height: 1.25em;

  padding: 0 0 0 .5em;

  object-fit: contain;
  overflow: hidden;

  margin: 0;
}


/* ---------------------------------------------------------
   IMAGE BLOCK
   --------------------------------------------------------- */

.scp-image-block {
  max-width: 15em !important;
  margin: .75em;
  padding: 1px;
  box-shadow: 0px 5px 10px 0px rgb(0, 0, 0, 0.2)!important;
}

.scp-image-block.block-right {
  float: right;
  margin-right: 2em;
  margin-left: 1.5rem;
}

.scp-image-block.block-left {
  float: left;
  margin-left: 1em;
  margin-right: 1.5rem;
}

.scp-image-block-img {
  display: block;
  max-width: 14em;
  margin: 0px;
}

.scp-image-block figcaption {
  padding: .35rem .5rem;
  background: #f5f5f5;
  font-size: .9em;
}

.scp-image-block figcaption p {
  margin: 0;
}

/* ---------------------------------------------------------
   WIDE IMAGE BLOCK
   --------------------------------------------------------- */

.wide-image-border-container{
  border: 1px solid #000;
  max-width: 100%;
  }
.wide-image{
  padding-top: 15px;
  max-width: 90%;
  margin:auto;
  text-align: center;
    }

/* ---------------------------------------------------------
   TABS
   --------------------------------------------------------- */

.tabs {
  clear: both;
  margin-block: 1rem;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 2rem;

  margin: 0;
  padding: .325rem .625rem;

  color: var(--tab-text-color);
  background: var(--tab-background);

  border: .05rem solid var(--tab-border-color);

  cursor: pointer;
}

.tab:hover,
.tab:focus-visible {
  color: var(--tab-hover-text-color);
  background: var(--tab-hover-background);
  border-color: var(--tab-hover-border-color);
}

.tab.selected {
  color: var(--tab-selected-text-color);
  background: var(--tab-selected-background);
  border-color: var(--tab-selected-border-color);
}

.tab-panel {
  padding: 1rem;
  border: .05rem solid var(--tab-border-color);
  border-top: 0;
}


/* ---------------------------------------------------------
   TAGS
   --------------------------------------------------------- */

.page-tags {
  text-align: start;
  margin-top: 1rem;
}

.page-tags span,
.page-tags {
  max-width: max-content;
}

.page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.page-tags a {
  margin: 0;
}


/* ---------------------------------------------------------
   PAGE / FOOTER OPTIONS
   --------------------------------------------------------- */

.page-options {
  margin-top: 2rem;

  text-align: end;
}

.page-options a {
  display: inline-block;
  margin-left: .75rem;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

#footer {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  align-items: baseline;

  gap: .5ch;

  text-align: center;

  margin-top: 3rem;
}

.footer-options {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  align-items: stretch;

  order: 1;

  width: auto;

  margin-inline: .25rem;

  font-size: 0;
}

.footer-options a {
  display: flex;
  align-items: center;

  padding-inline: .375rem;

  font-size: .625rem;

  border-inline-start: currentColor solid .05rem;
}

.footer-license {
  width: 100%;
  padding-inline: var(--area-min-margin);

  font-size: .8em;
}

.footer-bar {
  width: 100%;
  max-width: 100%;

  margin: 0 auto;
  padding-inline: var(--area-comp-margin);

  border: none;
}

.footer-units {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: .5rem;

  padding: .5rem;
}

.footer-unit {
  flex: 0 1 10.25rem;
  width: auto;
}

.footer-unit a {
  display: block;
  padding: .35rem;

  text-decoration: none;
}

.footer-unit a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   HOVERTIPS
   --------------------------------------------------------- */

.hovertip {
  background: var(--hovertip-background) !important;
  border: var(--hovertip-border) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .header-content {
    width: calc(100% - 2 * var(--area-min-margin));

    grid-template-areas:
      "account"
      "logo"
      "brand"
      "search";

    grid-template-columns: 1fr;

    grid-template-rows: auto auto auto auto;

    padding-block: .5rem 1rem;
  }

  .header-logo {
    justify-self: center;
    min-height: var(--header-logo-adaptive-size);
  }

  .header-brand {
    padding-inline-start: 0;
    text-align: center;
  }

  .header-brand h1 a,
  .header-brand p {
    max-width: 100%;
  }

  .header-search {
    justify-self: center;
    width: 100%;
    max-width: 30rem;
    margin-top: .75rem;
  }

  .header-search input {
    min-width: 0;
    flex: 1;
  }

  .top-bar {
    padding-inline: 0;
  }

  .top-bar-inner {
    position: relative;
  }

  .mobile-menu-button {
    display: block;

    width: 100%;

    padding: .35rem;

    border: 0;

    color: #fff;
    background: transparent;

    cursor: pointer;
  }

  .mobile-menu-button:hover,
  .mobile-menu-button:focus-visible {
    color: #a01;
    background: #fff;
  }

  .top-navigation {
    display: none;
    flex-direction: column;

    width: 100%;
  }

  .top-navigation.is-open {
    display: flex;
  }

  .top-navigation > li {
    width: 100%;
  }

  .top-navigation > li > a {
    width: 100%;
  }

  .top-navigation .dropdown {
    position: static;

    width: 100%;
    min-width: 0;

    display: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .top-navigation > li:hover > .dropdown,
  .top-navigation > li:focus-within > .dropdown {
    display: block;
  }

  .content-wrap {
    display: block;

    width: calc(100% - 2 * var(--area-min-margin));

    margin-top: 1rem;
  }

  .side-bar {
    width: 100%;
    margin-bottom: 2rem;
  }

  .scp-image-block.block-right,
  .scp-image-block.block-left {
    float: none;

    margin: .75em auto;

  }
}


/* ---------------------------------------------------------
   SMALL-SCREEN CLEANUP
   --------------------------------------------------------- */

@media (max-width: 480px) {

  :root {
    --area-min-margin: .75rem;
  }

  .header-brand h1 a {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }

  .header-brand p {
    font-size: clamp(.8rem, 4vw, 1rem);
  }

  .rate-widget {
    max-width: 100%;
  }

}

/* ---------------------------------------------------------
   COLLAPSIBLE
   --------------------------------------------------------- */

.collapsible {
  color: var(--gold);
  cursor: pointer;
  width: fit-content;
  border: none;
  text-align: left;
  outline: none;
} 

.collapsible:hover {
  color: var(--royal-yellow);
} 

.collapsible::after {
  content: attr(data-closed-text);
}

.collapsible.active::after {
  content: attr(data-open-text);
} 

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
}