/* FONT IMPORT */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

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

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #1e1e2e;
  --content-background-color: #161320;
  --sidebar-background-color: #1e1e2e;

  /* Text Colors: */
  --text-color: #d9e0ee;
  --sidebar-text-color: #a79caf;
  --link-color: #c8e39d;
  --link-color-hover: #a79caf;

  /* Text: */
  --font: Open Sans, sans-serif;
  --heading-font: Open Sans, sans-serif;
  --font-size: 18px;

  /* Other Settings: */
  --margin: 16px;
  --padding: 20px;
  --border: none;
  --round-borders: 4px;
  --sidebar-width: 200px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background-image: url("https://yosoysofia.neocities.org/images/background/tiles-1.png");
  background-size: 170px;
}

::selection {
  /* (Text highlighted by the user) */
  background: #a79caf;
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a,
a:active,
a:link,
a:visited,
a:focus {
  text-decoration: none;
  color: #c8e39d;
}

a:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}

hr {
  width: 65%;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */
.layout {
  width: 1600px;
  display: grid;
  grid-gap: var(--margin);
  grid-template:
    "header header rightSidebar" auto "leftSidebar main rightSidebar" auto "leftSidebar footer rightSidebar" auto / var(
      --sidebar-width
    )
    auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: #161320;
  border: 2px solid black;
}

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

header {
  grid-area: header;
  text-align: right;
}

.header-image img {
  width: 30%;
  float: left;
}

.header-tab {
  background-color: #c9e39e;
  float: right;
  padding: 6px;
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 15px 15px 0px 0px;
  border: 2px solid black;
  margin-left: 20px;
  color: #161320;

  &:nth-child(3n-1) {
    background-color: #2a6da5;
  }

  &:nth-child(3n-2) {
    background-color: #a852ae;
  }
}

.header-tab:hover {
  background-color: #1b1b2a;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: 2px solid #25daba;
  overflow: hidden;
  padding: var(--padding);
  color: var(--sidebar-text-color);
  background: linear-gradient(#161320) padding-box,
    linear-gradient(to bottom, #a852ae, #7cbec9) border-box;
  border: 2px solid transparent;
  border-radius: 0px 0px 0px 30px;
  height: 550px;
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
  border-radius: var(--round-borders);
  overflow: hidden;
  background: transparent;
  width: 300px;
  height: auto;
}

.hexagon-wrap {
  height: 200px; /* adjust to control the size  */
  aspect-ratio: 1 / cos(30deg);
  clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
  background: #cbc5c2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hexagon-fill {
  height: 195px; /* adjust to control the size  */
  aspect-ratio: 1 / cos(30deg);
  clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
  background-image: url("https://yosoysofia.neocities.org/images/background/tile_light_blue.png");
  background-size: 170px;
  background-position: center;
}

.button-sideright {
  background: #7cbec9;
  border-radius: 20px;
  height: 30px;
  width: 30px;
  float: left;
  margin: 5px;
}

.longbutton-sideright {
  background: #a852ae;
  border-radius: 20px;
  height: 30px;
  width: 130px;
  float: left;
  margin: 5px;
  padding: 2px;
  padding-left: 10px;
  color: #332577;
  font-size: 20px;
}

.square-sideright {
  background: transparent;
  border-radius: 20px 0px 20px 0px;
  border: 2px solid #a852ae;
  height: 100px;
  width: 210px;
  margin: 5px;
  margin-top: 80px;
  margin-bottom: 12px;
  padding: 10px;
  color: white;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: #1b1b2a;
  padding: 7px;
  margin: 0.5em 0;
  overflow: hidden;
  font-weight: bold;
  border: 2px solid black;
  border-left: 4px solid #2a6da5;
  border-radius: 5px;
}

.sidebar-section blockquote a,
.sidebar-section blockquote a:link,
.sidebar-section
  blockquote
  a:visited
  .sidebar-section
  blockquote
  a:focus
  .sidebar-section
  blockquote
  a:active {
  color: #1b1b2a;
  text-decoration: none;
  color: var(--link-color-hover);
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}

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

footer {
  grid-area: footer;
  border: 2px solid #25daba;
  border-radius: 0px 0px 30px 0px;
  overflow: hidden;
  padding: var(--padding);
  color: var(--text-color);
  background: #161320;
  border: 2px solid #7cbec9;
  height: 68px;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -20px;
  padding: 0;
  list-style: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: #1b1b2a;
  padding: 15px;
  margin: 1em;
  border-radius: 5px;
  border-left: 8px solid #a852ae;

  &:nth-child(4n-1) {
    border-color: #2a6da5;
  }

  &:nth-child(4n-2) {
    border-color: #7cbec9;
  }

  &:nth-child(4n-3) {
    border-color: #c8e39d;
  }
}

.div-quote {
  background: #1b1b2a;
  padding: 10px;
  margin-top: 15px;
  border-radius: 5px;
  border-left: 8px solid #a852ae;
  display: inline-block;

  &:nth-child(4n-1) {
    border-color: #2a6da5;
  }

  &:nth-child(4n-2) {
    border-color: #7cbec9;
  }

  &:nth-child(4n-3) {
    border-color: #c8e39d;
  }
}

.tags-histoires {
  background: #26284e;
  border-radius: 15px;
  border: 2px solid black;
  color: var(--text-color);
  font-size: var(--font-size);
  padding: 2px;
  padding-left: 13px;
  padding-right: 13px;
  margin: 2px;
  display: inline-block;
}

.div-tag-histoires {
  margin-top: 12px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

hr {
  color: #a79caf;
}

.comment-section {
  padding: 10px;
  font-size: 25px;
  border-radius: 7px;
  border: 2px solid black;
  margin: 10px;
}

.comment {
  background: #1b1b2a;
  padding: 15px;
  margin: 15px;
  border-radius: 5px;
  display: block;
  font-size: var(--font-size);
  border: 2px solid black;
}

.comment-quote {
  background: #26284e;
  padding: 10px;
  margin: 15px;
  border-radius: 5px;
  border-left: 8px solid #a852ae;
  border: 2px solid black;
  display: block;
  font-size: var(--font-size);
}

.comment-quote:before {
  content: open-quote;
}

.comment-quote:after {
  content: close-quote;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.8em;
  color: #c8e39d;
}

main h1:before {
  content: "› ";
}

main h2 {
  font-size: 1.4em;
  color: #7cbec9;
}

main h2:before {
  content: "› ";
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT AND MEDIA */
/* -------------------------------------------------------- */

iframe {
  margin: auto;
  display: block;
  margin-top: 20px;
  border-radius: 10px;
  border: 2px solid #c8e39d;
}

.image {
  display: flex;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: 50%;
  border-radius: 6px;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.gallery-item {
  height: 280px;
  border: 2px solid black;
  margin: 2px;
  border-radius: 12px;
  object-fit: cover;
}

.gallery-item:hover {
  object-fit: contain;
  border: 2px solid #7cbec9;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
  border-radius: 6px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  overflow: hidden;
  border-radius: 6px;
}

.flags {
  padding: 20px;
  float: right;
}

.imgframe {
  border-radius: 6px;
  border: 2px solid #c8e39d;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

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

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto "leftSidebar" auto "main" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  .right-sidebar {
    display: none;
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}

/* -------------------------------------------------------- */
/* GRAPHIC ELEMENTS */
/* -------------------------------------------------------- */
/* Hexagone gauche */
.hexagonleft {
  height: 80px; /* adjust to control the size  */
  width: 160px;
  aspect-ratio: 1 / cos(30deg);
  clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
  background: #a852ae;
  display: flex;
  align-items: center;
  margin-top: -80px;
  margin-bottom: 20px;
}

/* Hexagone droite bleu */
.hexagonright {
  height: 80px; /* adjust to control the size  */
  width: 160px;
  aspect-ratio: 1 / cos(30deg);
  clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
  background: #c1c1c1;
  display: flex;
  align-items: center;
  margin-top: -80px;
  margin-bottom: 20px;
}

/* Slanted edge */

.signal {
  --n: 5; /* the number of bars */
  --g: 50%; /* control the gap */

  width: 260px;
  aspect-ratio: 1.5;
  background: #c9e39e;
  mask: linear-gradient(-90deg, #0000 var(--g), #000 0) 0 /
      calc(100% / var(--n)) intersect,
    linear-gradient(to top left, #000 50%, #0000 0),
    linear-gradient(to top left, #000 calc(50% + 50% / var(--n)), #0000 0)
      intersect,
    repeating-conic-gradient(#000 0 25%, #0000 0 50%) 0 100% /
      calc(200% / var(--n)) calc(200% / var(--n));
}

/* Battery */
.battery {
  --n: 6; /* the number of bar */
  --g: 5px; /* the gap  */

  width: 200px; /* control the size */
  color: #2a363b;
  aspect-ratio: 2;
  border: var(--g) solid;
  padding: var(--g);
  border-radius: 10px;
  background: repeating-linear-gradient(
      90deg,
      currentColor 0 calc(100% / var(--n) - var(--g)),
      #0000 0 calc(100% / var(--n))
    )
    0 0 / calc(100% + var(--g)) content-box;
  position: relative;
  box-sizing: border-box;
  margin-top: 50px;
}
.battery:before {
  content: "";
  position: absolute;
  inset: 30% -20px 30% 100%;
  background: currentColor;
}

/* WiFi */
.wifi-icon {
  --n: 4; /* number of bars */

  height: 280px;
  aspect-ratio: 1;
  border-radius: 50%;
  --s: calc(100% / (2 * var(--n) - 1));
  background: repeating-radial-gradient(
    50% 50%,
    #0000 0,
    #178feb 1px calc(var(--s) - 1px),
    #0000 var(--s) calc(2 * var(--s))
  );
  mask: conic-gradient(#000 0 0) no-repeat 50% / var(--s) var(--s),
    conic-gradient(
      from -45deg at 50% calc(50% + var(--s) / 2),
      #000 90deg,
      #0000 0
    );
}

.corner-only {
  --s: 15px; /* size of the corners */
  border: 3px solid #7cbec9;
  padding: 4px;
  height: 70px;
  color: #332577;
  width: 230px;
  background: #c8e39d content-box;
  text-align: center;
  mask: conic-gradient(#000 0 0) content-box,
    conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 /
      calc(100% - var(--s)) calc(100% - var(--s));
  margin-bottom: 30px;
}

/* -------------------------------------------------------- */
/* TABLES */
/* -------------------------------------------------------- */

/* DIV tables */
.divTable,
.divTableCell,
.divTable,
.divTableHead,
.divTableRow,
.divTableHeading,
.divTableFoot,
.divTableBody {
  border: 1px solid red;
}

.divTable {
  width: 60%;
  margin: auto;
  border-radius: 30px;
}

.divTableCell {
  padding: 5px;
}

/* HTMLtable.com */
.divTable {
  display: table;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  display: table-cell;
}
.divTableHeading {
  display: table-header-group;
}
.divTableFoot {
  display: table-footer-group;
}
.divTableBody {
  display: table-row-group;
}

/* TABLE tables */

div.border {
  border: 2px solid #c8e39d;
  border-radius: 20px;
  overflow: hidden;
  width: 760px;
  margin: auto;
  margin-bottom: 30px;
}

table {
  border-collapse: collapse;
  table-layout: auto;
  width: 250px;
  padding: 5px;

  tr {
    text-align: center;
    border-bottom: 2px solid #c8e39d;
    th,
    td {
      border-right: 2px solid #c8e39d;

      &:last-of-type {
        border-right: none;
      }
    }
  }

  tbody {
    tr {
      &:last-of-type {
        border-bottom: none;
      }
    }
  }
}

img table {
  object-fit: cover;
}

/* -------------------------------------------------------- */
/* MORE ACCESSIBILITY */
/* -------------------------------------------------------- */

.button-freeze {
  background: #26284e;
  border-radius: 5px;
  border: 2px solid #26284e;
  border-left: 5px solid #a852ae;
  color: var(--text-color);
  font-size: var(--font-size);
  padding: 7px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.button-freeze:hover {
  color: #7cbec9;
  border: 2px solid #7cbec9;
  background: #2a6da5;
  border-left: 5px solid #7cbec9;
}