/* DEBUG:: */

:root {
  --DEBUG-colour: mediumseagreen;
}

/* body {
  border: 2px solid magenta;
} */

/* ::DEBUG */



/* SECTION: Global defaults */

/* Global variables */
:root {
  /* ANIMATION */
  --transition-duration: 0.25s;

  /* COLOURS */
  /* Background colours */
  --default-background-colour: #fefefe;
  --secondary-background-colour: #faf8f8;
  --error-background-colour: #ffcccc;
  /* Text colours */
  --default-text-colour: #000000;
  --light-text-colour: var(--default-background-colour);
  --error-text-colour: #ff0000;
  --dark-error-text-colour: #aa0000;
  --light-underline-colour: #888888;
  /* Border colours */
  --border-colour: #000000;
  --light-border-colour: #999999;
  /* Other colours */
  --light-accent-colour: #a6c3ff;
  --accent-colour: #3366cc;
  --arrow-colour: #000000;
  
  /* FONTS */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* BORDERS */
  --border-thickness: 2px;
  --border-radius: 6px;

  /* SPACING */
  --section-spacing: 1em;
}

:root {
  /* Default fonts */
  font-family: var(--font-family);
  font-size: medium;
  /* Default colours */
  background-color: var(--default-background-colour);
  color: var(--default-text-colour);
  /* Default overscroll behaviour */
  overscroll-behavior-y: none; /* No "bouncing" when you scroll too far */
}

body {
  /* This wizardry is to push the footer to the bottom of the viewport.
      SOURCE: https://stackoverflow.com/a/20352949
  */
  min-height: 100vh;                  /* Require the full viewport to be taken up */
  margin: 0;                          /* No unnecessary margin! */
  display: grid;                      /* Use a grid to position the three elements <nav>, <main> and <footer> within */
  grid-template-rows: auto 1fr auto;  /*  */
}

a {
  /* For a wiki, the colour of the hyperlinks is the most dominant colour on each webpage.
      It is therefore important that it be the same as the website's accent colour.
  */
  color: var(--accent-colour);
}



/* SECTION: Utility classes */

/* Utility class to hide an element entirely */
.hidden, .hidden * {
  display: none;
  visibility: hidden;
}

/* Utility class to mark up error text */
.error {
  color: var(--error-text-colour);
  font-style: italic;
  text-align: center;
}

/* Utility class to mark up a "keyboard shortcut" hint */
.keyboard-shortcut-hint {
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
}



/* SECTION: Navigation bar */

nav {
  /* Colouring */
  background-color: var(--secondary-background-colour);
  /* Sizing */
  --top-bottom-padding: 6px;
  width: 100%;
  max-height: 40px;
  padding-bottom: var(--top-bottom-padding);
  padding-top: var(--top-bottom-padding);
  border-bottom: var(--border-thickness) solid var(--border-colour);
  /* Alignment of internal items */
  --item-margin: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.logo {
  height: 44px;
  max-width: 44px;
  margin-left: var(--item-margin);
  transition: 0.25s;
  display: flex;
  align-items: center;
  align-content: center;
}

.logo > img {
  display: block;
  width: auto;
  height: auto;
  max-height: 90%;
  max-width: 90%;
  overflow: hidden;
  transition: 0.25s;
  border: var(--border-thickness) solid var(--border-colour);
}

.logo > img:hover {
  outline: var(--border-thickness) solid var(--border-colour);
  outline-offset: 4px;
}


.link-container {
  display: flex;
  justify-content: space-between;
  margin-right: var(--item-margin);
}

.nav-link {
  margin-left: 5px;
  margin-right: 5px;
  padding: 6px;
  border: var(--border-thickness) solid var(--border-colour);
  border-radius: var(--border-radius);
  background-color: var(--light-accent-colour);
  color: var(--default-text-colour);
  font-size: medium;
  text-decoration: none;
  transition: 0.25s; /* Transitions on `:hover` */
}

.nav-link.this-page, .nav-link:hover {
  background-color: var(--accent-colour);
  color: var(--light-text-colour);
}



/* SECTION: Main content */

main {
  --main-margin: 10%;
  --text-align: justify;
  --line-height: normal;
  /* Alignment of internal text */
  text-align: var(--text-align);
  line-height: var(--line-height);
  /* Flow of internal items */
  display: flex;
  flex-direction: column;
  gap: var(--section-spacing);
}
@media (width <= 500px) {
  main {
    --text-align: left;
    --line-height: 1.5;
  }
}

/* `.index-page-main` distinguishes the `<main>` content on `index.html` from that on other pages.
    This is because it should be styled quite differently from the other pages.
*/
main.index-page-main {
  text-align: center;
}

/* `.one-column` distinguishes pages which render their `<main>` content in one column as opposed to
    multiple columns. For example, `about.html` renders all its content in one column, whereas
    Discussion-family pages render it in three columns. `index.html` DOES NOT render its content in one
    column thanks to its wide hero image.
*/
main.one-column {
  margin-left: var(--main-margin);
  margin-right: var(--main-margin);
}


main.index-page-main .hero-image {
  /* Position image */
  align-self: center;
  justify-self: center;
  margin-top: 0;
  /* Declare size */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 23vw;
  max-height: 23vw;
  min-height: 23vh;
  border-bottom: var(--border-thickness) solid var(--border-colour);
}

main.one-column .hero-image {
  /* Position image */
  align-self: center;
  justify-self: center;
  margin-top: calc(var(--section-spacing) / 2);
  /* Declare size */
  width: 50%;
  height: 50%;
  border: var(--border-thickness) solid var(--border-colour);
}

main .hero-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


main h1 {
  /* Font */
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: bolder;
  font-variant: small-caps;
  font-size: xx-large;
  /* Other details */
  text-align: center;
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: var(--light-underline-colour);
}

main section:last-of-type {
  margin-bottom: var(--section-spacing);
}

main.index-page-main section {
  margin-left: var(--main-margin);
  margin-right: var(--main-margin);
}



/* SECTION: SVG styling for the suggested reading order on `index.html` */

svg.reading-order {
  --arrow-stroke-width: 3;
  max-width: 100%;
  height: 15em;
}

svg.reading-order rect {
  fill: var(--secondary-background-colour);
  stroke-width: var(--border-thickness);
  stroke: var(--border-colour);
}

svg.reading-order a text {
  font-size: larger;
  fill: var(--accent-colour);
  text-anchor: middle;
  dominant-baseline: middle;
}

svg.reading-order path.arrow {
  fill: var(--arrow-colour);
  stroke: var(--arrow-colour);
  stroke-width: var(--arrow-stroke-width);
}



/* SECTION: Glossary */

main #sort-by-container,
main #search-container {
  /* Size bounding box */
  max-width: 60em;
  width: 30em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 2em;
  padding-right: 2em;
  /* Align internal items */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
@media (width <= 700px) {
  main #sort-by-container,
  main #search-container {
    flex-direction: column;
    min-width: 0;
    width: 60%;
  }
}

main #sort-by-container {
  /* Background and border */
  background-color: var(--secondary-background-colour);
  border: calc(var(--border-thickness) / 2) solid var(--border-colour);
  border-radius: var(--border-radius);  
}

main #search-container input {
  /* Text */
  font-family: var(--font-family);
  text-align: center;
  /* Size */
  width: 90%;
  padding: 0.25em;
  margin-left: auto;
  margin-right: auto;
  /* Border */
  background-color: var(--secondary-background-colour);
  border: calc(var(--border-thickness) / 2) solid var(--border-colour);
  border-radius: var(--border-radius);
}
main #search-container > input::placeholder {
  font-size: small;
  font-style: italic;
}


main #page-list-container {
  /* Size bounding box */
  max-width: 70vw;
  width: 70vw;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 2em;
  padding-right: 2em;
}
@media (width <= 700px) {
  main #page-list-container {
    max-width: 60vw;
  }
}

main #page-list {
  width: 100%;
  height: 100%;
  /* Alignment of internal items */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-evenly;
}

main #page-list .glossary-group {
  /* Size */
  max-width: 30%;
  width: 30%;
}
@media (width <= 700px) {
  main #page-list .glossary-group {
    max-width: 100%;
    width: 100%;
  }
}


main .glossary-group h2 {
  /* Font */
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: bolder;
  font-variant: small-caps;
  font-size: x-large;
  /* Other details */
  text-align: center;
  text-decoration-style: double;
  text-decoration-color: var(--light-underline-colour);
  margin-bottom: 1em;
  border-bottom: var(--border-thickness) solid var(--light-border-colour);
}

main .glossary-group ul {
  max-width: 100%;
  list-style-position: inside;
  padding: 0;
  text-align: center;
}



/* SECTION: Discussion- and Proof-family pages: Overall */

main.family {
  --gap: 1em;
  --bar-width: 15vw;
  /* Padding */
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  /* Internal flow */
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

main.family .block-equation {
  width: 100%;
  overflow: auto;
  display: block;
}

/*
  Sizing of elements in a `<main class="family">`
  By default, the display looks like:
    [ #contents-bar |             #content             | #sidenotes-bar ]
  On a display WIDER THAN `1000px`, either of the sidebars may be collapsed,
  resulting in one of the following instead:
    [                     #content                     | #sidenotes-bar ]
    [ #contents-bar |                     #content                      ]
    [                             #content                              ]
  On a display AT MOST `1000px` WIDE, the sidebars are permanently hidden:
                         [        #content        ]
*/
main.family {
  /*
    The `width`s of the `#content` and the two sidebars (`#contents-bar` and `#sidenotes-bar`) are specified as
    variables so that its children may access this width too.
    For example, the sidenotes need to know how far right to be moved, which depends on the `--content-width` and
    the `--contents-bar-width`.
  */
  --content-width: calc(100vw - 2 * var(--bar-width) - 3 * var(--gap));
  --sidebar-width: calc(var(--bar-width) - 2 * var(--gap)); /* Default width for the sidebars */
  --contents-bar-width: var(--sidebar-width);
  --sidenotes-bar-width: var(--sidebar-width);
  --sidenote-left-offset: calc(var(--bar-width) + var(--content-width) + 3 * var(--gap));
}
main.family #contents-bar,
main.family #sidenotes-bar {
  /* Positioning and size */
  width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  padding: var(--gap);
}
main.family #content {
  width: var(--content-width);
  margin: 0;
  padding: 0;
}
main.family #contents-bar.hidden,
main.family #sidenotes-bar.hidden {
  width: 0;
}
main.family #contents-bar.hidden *,
main.family #sidenotes-bar.hidden * {
  width: 0;
}
@media (width > 1000px) {
  main.family:has(#contents-bar.hidden) {
    --content-width: calc(100vw - var(--bar-width) - 5 * var(--gap));
    --contents-bar-width: 0;
    --sidenote-left-offset: calc(var(--content-width) + 5 * var(--gap));
  }
  main.family:has(#sidenotes-bar.hidden) {
    --content-width: calc(100vw - var(--bar-width) - 5 * var(--gap));
    --sidenotes-bar-width: 0;
  }
  main.family:has(#contents-bar.hidden):has(#sidenotes-bar.hidden) {
    --content-width: calc(100vw - 6 * var(--gap));
  }
}
@media (width <= 1000px) {
  main.family {
    --content-width: calc(100vw - 6 * var(--gap));
    --sidebar-width: 0;
  }
  main.family #contents-bar *,
  main.family #sidenotes-bar *,
  main.family .sidenote {
    width: 0;
    display: none;
    visibility: hidden;
  }
}



/* SECTION: Discussion- and Proof-family pages: Sidebars */

main.family #contents-bar,
main.family #sidenotes-bar {
  /* Text */
  text-align: left;
  /* Internal flow */
  display: flex;
  flex-direction: column;
}

/* Style the bar titles */
main.family .bar-title {
  /* Division */
  padding-bottom: calc(2 * var(--border-thickness));
  border-bottom: var(--border-thickness) solid var(--border-colour);
  margin-bottom: 1em;
  /* Internal flow */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
main.family .bar-title button {
  /* Text */
  font-size: small;
  /* Colour */
  background-color: var(--secondary-background-colour);
  transition: 0.25s; /* Transitions on `:hover` */
  /* Border */
  border: 1px solid var(--border-colour);
  border-radius: var(--border-radius);
}
main.family .bar-title button:hover {
  background-color: var(--accent-colour);
  color: var(--light-text-colour);
}


/* Style the list of contents. */
main.family #contents-bar .contents-bar-page-name {
  padding-left: 1em;
}
main.family #contents-bar ul {
  list-style-position: outside; /* NOTE: Different to the `<ul>`s in `glossary.html`. */
  padding-left: 2em;
  margin-top: 0;
}
main.family #contents-bar li {
  padding-top: 0.1em;
}

/*
  To get the contents bar to fix to the side of the window and still look nice, we use two containers.
  The outer container inherits the sizing of the `#contents-bar` itself, and has `position: fixed;`.
  The inner container arranges its children *within* the fixed outer container.
*/
main.family #contents-bar-inner-container {
  width: 100%; /* Set bounding box for `position: fixed;` inner content */
}
main.family #contents-bar-outer-container {
  /* Ensure the contents bar does not overlap the main content */
  --width: calc(var(--bar-width) - 2 * var(--gap));
  max-width: var(--width);
  width: var(--width);
  /* Fix self to window */
  position: fixed;
  /* Align inner content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



/* SECTION: Discussion- and Proof-family pages: Sidenotes */

main.family #content .sidenote {
  /* Positioning */
  position: absolute;
  left: var(--sidenote-left-offset);
  width: calc(var(--bar-width) - 2 * var(--gap));
  /* Text */
  font-size: medium;
  text-align: left;
  /* Animation */
  transition-duration: var(--transition-duration); /* Background colour and border transitions when relevant `.sidenote-anchor:hover`. */
}

main.family #content .sidenote-container:has(.sidenote-anchor:hover) .sidenote {
  background-color: var(--light-accent-colour);
  border-radius: var(--border-radius);
}

/* Hide sidenotes if the `#sidenotes-bar` is `.hidden`. */
@media (width > 1000px) {
  main.family:has(#sidenotes-bar.hidden) .sidenote {
    display: none;
    visibility: hidden;
    width: 0;
  }
}



/* SECTION: Discussion- and Proof-family pages: Main content */

main.family #content {
  display: flex;
  flex-direction: column;
  gap: 3em;
}

main.family #content h2 {
  /* Sizing and spacing */
  width: 90%;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0.25em;
  /* Font */
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: bolder;
  font-variant: small-caps;
  font-size: x-large;
  /* Other details */
  text-align: center;
  border-bottom: var(--border-thickness) solid var(--light-border-colour);
}

main.family #content section {
  /* Internal flow */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

main.family #content section p {
  width: 100%;
  text-align: var(--text-align);
}


/*
  These `<iframe>`s are small to the point of being unreadable on mobile if their `--width` is still `40vw`.
  Same problem if the viewport width is too small.
  The `@media` queries fix this.
*/
main.family #content iframe.block-static-diagram {
  --width: 60vw;
  --min-width: var(--width);
}
@media (width <= 1000px) {
  main.family #content iframe.block-static-diagram {
    --width: 80vw;
    --min-width: var(--width);
  }
}
@media (width <= 900px) {
  main.family #content iframe.block-static-diagram {
    --width: 100%;
    --min-width: 70vw;
  }
  main.family #content .block-static-diagram-container {
    width: 100%;
  }
}
@media (width <= 500px) {
  main.family #content iframe.block-static-diagram {
    --min-width: var(--width);
  }
}
main.family #content iframe.block-static-diagram {
  width: var(--width);
  max-width: var(--width);
  min-width: var(--min-width);
  border: none;
}


main.family .block-section-element {
  --side-padding: 1em;
  /* Sizing */
  width: calc(100% - 2 * var(--side-padding) - 2 * var(--border-thickness));
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
  /* Border */
  border-left: var(--border-thickness) solid var(--light-border-colour);
}

main.family .block-section-element > * {
  width: 100%; /* Make all elements of a `.block-section-element` flush left */
}

main.family #content .block-section-element ul {
  width: calc(100% - 2 * var(--side-padding) - 0.5em); /* Fix the widths of lists inside `.block-section-element`s */
}


main.family .block-section-element h3 {
  font-size: medium;
}

main.family .block-section-element .block-static-diagram-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


main.family .outlink {
  --fill-colour: var(--secondary-background-colour);
  --font-colour: var(--accent-colour);
  transition: var(--transition-duration); /* Transition changes internal colours by redefining the `--fill` and `--font-colour` variables */
  width: 8em;
}
main.family .outlink:hover {
  --fill-colour: var(--accent-colour);
  --font-colour: var(--light-text-colour);
}

main.family .outlink-arrow {
  transition: var(--transition-duration);
  fill: var(--fill-colour);
  stroke: var(--border-colour);
  stroke-width: 1;
}
main.family .outlink-text {
  transition: var(--transition-duration);
  /* Font */
  font-size: small;
  font-style: italic;
  fill: var(--font-colour);
  /* Placement */
  text-anchor: middle;
  dominant-baseline: middle;
}


main.family h3.see-also {
  width: 100%;
  text-align: left;
  font-weight: normal;
  font-size: medium;
  margin-top: 0;
  margin-bottom: 0;
}
main.family ul.see-also {
  width: 100%;
  margin: 0;
}


main.family ol.bibliography {
  width: 100%;
  margin: 0;
}



/* SECTION: Proof-family pages: Interactive diagrams */

main.family .interactive-diagram-container {
  /* Sizing */
  --width: 100%;
  width: var(--width);
  max-width: var(--width);
  /* Internal content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main.family .interactive-diagram-frame {
  /* Colours */
  background-color: var(--secondary-background-colour);
  /* Sizing */
  width: 90%;
  max-width: 90%;
  /* Border */
  border: var(--border-thickness) solid var(--border-colour);
  border-radius: var(--border-radius);
  /* Internal content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main.family .interactive-diagram-frame > * {
  --margin: 0.5em;
  width: 100%;
  padding-top: var(--margin);
  padding-bottom: var(--margin);
  text-align: center;
}
main.family .interactive-diagram-frame > *:first-child {
  padding-top: 0; /* Prevent background colour "clipping" into the `.interactive-diagram-frame`'s border */
  margin-top: var(--margin);
}
main.family .interactive-diagram-frame > *:not(:last-child) {
  border-bottom: var(--border-thickness) solid var(--border-colour);
}

main.family .interactive-diagram-frame > .block-static-diagram-container {
  background-color: var(--default-background-colour);
  overflow: hidden;
}
main.family .interactive-diagram-frame iframe.block-static-diagram {
  background-color: var(--secondary-background-colour);
}

main.family .interactive-diagram-frame > .supporting-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
main.family .interactive-diagram-frame > .supporting-text > * {
  margin-left: var(--margin);
  margin-right: var(--margin);
}

/*
  Style the controls. They should be positioned like this:
    [    [button]    [.frame-number]    [button]    ]
  On hover, each of the controls should appear in different "focused" colours. The same applies for `.frame-number:focus`.
  When on the first "frame" of the diagram, the leftmost button should be "grayed out", and hovering should render it in red.
  When on the last "frame" of the diagram, the rightmost button should be "grayed out", and hovering should render it in red.
*/
main.family .interactive-diagram-frame > .controls {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding-bottom: var(--margin);
}
main.family .interactive-diagram-frame > .controls button,
main.family .interactive-diagram-frame > .controls .frame-number {
  background-color: var(--secondary-background-colour);
  border: var(--border-thickness) solid var(--light-border-colour);
  border-radius: var(--border-radius);
  transition: var(--transition-duration);
}
main.family .interactive-diagram-frame > .controls button:hover,
main.family .interactive-diagram-frame > .controls .frame-number:focus,
main.family .interactive-diagram-frame > .controls .frame-number:hover {
  background-color: var(--accent-colour);
  color: var(--light-text-colour);
  border: var(--border-thickness) solid var(--border-colour);
}
main.family .interactive-diagram-frame:not(:has(.supporting-text > span:first-child.fake-hidden)) > .controls button:first-of-type,
main.family .interactive-diagram-frame:not(:has(.supporting-text > span:last-child.fake-hidden)) > .controls button:last-of-type {
  color: var(--light-border-colour);
  background-color: var(--default-background-colour);
  border: var(--border-thickness) solid var(--light-border-colour);
}
main.family .interactive-diagram-frame:not(:has(.supporting-text > span:first-child.fake-hidden)) > .controls button:first-of-type:hover,
main.family .interactive-diagram-frame:not(:has(.supporting-text > span:last-child.fake-hidden)) > .controls button:last-of-type:hover {
  background-color: var(--error-background-colour);
  color: var(--dark-error-text-colour);
  border: var(--border-thickness) solid var(--dark-error-text-colour)
}

main.family #content .interactive-diagram-container *.fake-hidden {
  /*
    This hack pushes the `.fake-hidden` elements off-screen.
    
    Some level of deceptive CSS is necessary here. The `<iframe>`s need to have
    their proper width and height so that `q.uiver` can calculate how to render
    the embedded diagram within; however, the `<iframe>`s cannot be within the
    viewport because they would consume screen space while supposedly "hidden".
    
    The `top: -200vh;` does limit the possible heights of diagrams. If a diagram
    is > 200vh high, then it will bleed into the viewport. However, if you have
    a diagram that big, you really need to re-design it anyway...

    This has to be last in the style sheet because otherwise the various relative
    `width`s specified above for an `iframe.block-static-diagram` will win; these
    relative widths will break everything, because the `position: absolute;` here
    changes those widths to be calculated relative to the viewport width, not the
    desired `.block-static-diagram-container`'s width.
    For similar reasons, we need `max-width: unset;` and `min-width: unset;`.

    The class name `.fake-hidden` is an homage to this deceptive CSS.
  */  
  position: absolute;
  left: 0vw;
  top: -200vh;
  width: calc(0.9 * var(--content-width));
  max-width: unset;
  min-width: unset;
}



/* SECTION: Loading spinners */

.loading-spinner {
  font-family: var(--font-family);
  font-style: italic;
  text-align: center;
}



/* SECTION: Footer */
/* NOTE: Classes related to the logo appear already in the "Navigation bar" section. */

footer {
  /* Colouring */
  background-color: var(--secondary-background-colour);
  /* Sizing */
  width: 100%;
  padding-bottom: 6px;
  padding-top: 6px;
  grid-row-start: 3;
  grid-row-end: 4;
  border-top: var(--border-thickness) solid var(--border-colour);
  /* Alignment of internal logo item */
  display: flex;
  align-items: center;
  justify-content: center;
}