/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* FONT IMPORT */

@import url('https://fonts.cdnfonts.com/css/nosfer');
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Burned&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

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

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #eeeeee;
  --content-background-color: #aa689d00;
  --sidebar-background-color: #a9719eeb;

  /* Text Colors: */
  --text-color: #632456;
  --sidebar-text-color: #632456;
  --link-color: ##632456;
  --link-color-hover: #f5b1ff;

  /* Text: */
  --font: 'Eagle Lake', sans-serif;
  --heading-font: 'Eagle Lake', sans-serif;
  --font-size: 18px;

  /* Other Settings: */
  --margin: 10px;
  --padding: 15px;
  --border: none;
  --round-borders: 20px;
  --sidebar-width: 250px;
}

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

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://i.pinimg.com/736x/7b/46/5a/7b465a7575140e9beff3dd2310913308.jpg");
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;}
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

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 {
  text-decoration: none;
}

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

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

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1200px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header header" auto "main main main" auto "footer footer footer" 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: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
}

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

header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: #a9719eeb;
}

.header-content {
  padding: 12px, 20px;
}

.header-title {
  font-family: 'Jacquard 12', system-ui;
  font-size: 3.5em;
  font-weight: 
}

.header-image img {
  width: 100%;
  height: auto;
}

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

aside {
  grid-area: aside;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}


h2, h3 {
  font-family: 'Jacquard 12', system-ui;
  font-weight: 700; /* If 700 weight was imported */
}

h4, h6 {
  Font-family: 'Rubik Burned', system-ui;
  font-weight: 400;
}

h5 {
  font-family: 'Fredericka The Great', serif;
  font-weight: 400;
}


/* 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: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: #a9719eeb;
  display: flex;
  justify-content: center;
}

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

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

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


nav .navbar {
  margin-bottom: 0.5em;
}

nav ul {
  display: flex;
  margin: 0px;
  padding: 0;
  list-style: none;
  user-select: none;
  list-style-type: none;
  overflow: hidden;
  justify-content: center;
  background-color: #a9719eeb;
}

nav ul li a:hover {
  background-color: #632456;
  display: block;
  color: #f5b1ff;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
} 

nav ul li {
  margin-bottom: 0 -5px;
  float: 
}

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;
  color: #f5b1ff;
}

nav ul summary {
  cursor: pointer;
}

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



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

.scroll-box {
    height: 200px; /* Define the height of the scrollable area */
    width: 230px;  /* Define the width of the scrollable area */
    overflow-y: scroll; /* Add scrollbars only when necessary */
}

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: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

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

main code {
  text-transform: none;
}

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

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* 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;
}

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.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1.0em;
}

/* 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 IMAGES */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

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

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* 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);
}

/*---------------------------------------------------------*/
/* GALLERY GRID */
/*---------------------------------------------------------*/

:root {
    --nav-width: 40px;
    --link-color: #632456;
    --link-hover-color:#f5b1ff;
}
:root:has(.lb-open) {
    overflow: hidden;
}
body {
    overflow-anchor: none;
}

@keyframes loading {
	0% {
		content: ".";
	}
    33% {
        content: "..";
    }
	66% {
		content: "...";
	}
    100% {
		content: ".";
	}
}

/* Lightbox */
#lb {
    display: none;
    position: fixed;
    overflow: hidden;

    top: 0;
    left: 0;
    z-index: 9999;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        180deg,
        rgba(0, 167, 189, 0.3) 0%,
        rgba(105, 12, 51, 0.3) 100%
    );
    backdrop-filter: blur(5px);

    font-size: 1rem;
    font-family: "Segoe UI Semilight",Tahoma,sans-serif;
}
#lb a {
    color: var(--link-color);
}
#lb a:hover {
    color: var(--link-hover-color);
}
#lb_wrapper {
    position: fixed;
    display: flex;
    overflow: hidden;

    width: 100%;
    height: 100dvh;
}
#lb_container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    
    margin: auto;
    padding: 20px;
    height: calc(100dvh - 40px);
}

/* Lightbox exit buttons */
#lb_exitButton {
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 0;

    cursor: auto !important;

    border-style: none;
    border-radius: 0%;
    background-color: transparent;

    padding: 0;
    height: 100dvh;
    width: 100%;
}
#lb_smallExitButton {
    display: none;
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 1000;

    height: 50px;
    width: 50px;

    color: rgb(168, 85, 85);
    
    font-size: 20px;
    background: linear-gradient(
        180deg,
        rgba(0, 52, 73, 0.767) 0%,
        rgba(1, 32, 30, 0.7) 100%
    );
    margin: 5px;
    border: 1px solid rgb(48, 130, 143);
    border-radius: 10px;
}
#lb_smallExitButton:before {
    content: "X";
}

/* Lightbox image */
#lb_imageWrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    display: flex;
}
#lb_image {
    --border-width: 1px;
    --padding: 5px;

    position: relative;
    z-index: 1;

    object-fit: contain;
    image-rendering: auto;

    max-width: calc(100% - (var(--border-width) * 2 + var(--padding) * 2));
    max-height: calc(100% - (var(--border-width) * 2 + var(--padding) * 2));
    margin: auto;
    padding: var(--padding);

    box-sizing: content-box;
    border: var(--border-width) solid rgb(48, 130, 143);

    background: linear-gradient(
        180deg,
        rgba(0, 52, 73, 0.767) 0%,
        rgba(1, 32, 30, 0.7) 100%
    );
    box-shadow: inset 0px 0px 5px rgba(65, 74, 75, 0.8);
}
#lb_image.lb-noframe {
    border-color: transparent;
}

/* Lightbox info box */
#lb_info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1;

    color: rgb(226, 179, 203);
    background: linear-gradient(
        180deg,
        rgba(1, 53, 73, 0.7) 0%,
        rgba(27, 75, 72, 0.7) 80%,
        rgba(100, 20, 95, 0.7) 100%
    );
    margin: 0 auto;
    padding: 1em 1em;

    box-sizing: border-box;

    border: 1px ridge rgb(207, 37, 170);
    border-radius: 10px;
    box-shadow: inset 0px -5px 10px rgb(3, 96, 112);
}
#lb_desc {
    padding: 0;
    margin: 0;
    line-height: 1.3rem;
    color: rgb(221, 199, 142);
}
#lb_desc code {
    font-size: 0.9em;
    font-family: monospace;
    padding: 0px 2px;
    background-color: rgb(10, 96, 122);
    color: #15fff3;
}
#lb_title {
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: rgb(243, 229, 193);
}
#lb_tags {
    display: flex;
    gap: 5px;
    font-family: monospace;
    margin-bottom: 5px;
}
#lb_tags span {
    font-size: 0.85em;
    padding: 2px 5px;
    border-width: 1px;
    border-style: solid;
    color: rgb(230, 147, 224);
    border-color: rgb(81, 169, 180);
    background: linear-gradient(
        180deg,
        rgb(112, 5, 85) 0%,
        rgb(9, 61, 104) 100%
    );
    font-family: "Segoe UI Semilight",Tahoma,sans-serif;
}

@media screen and (max-width: 600px) {
    #lb_container {
        padding: 0;
        margin: 0;
        height: calc(100dvh);
    }
    #lb_image {
        margin: 0 auto;
        padding: 0px;
    }
    #lb_smallExitButton {
        display: block;
    }
}

/* Lightbox navigation */
.lb-nav {
    display: none;
    z-index: 1;
    cursor: pointer;

    color: rgb(211, 127, 194);
    background: linear-gradient(
        180deg,
        rgba(1, 53, 73, 0.7) 0%,
        rgba(27, 75, 72, 0.7) 80%,
        rgba(20, 100, 95, 0.7) 100%
    );
    backdrop-filter: brightness(60%);
    border: 1px solid rgb(113, 0, 121);
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px rgba(100, 128, 131, 0.8);

    min-width: var(--nav-width);
    max-width: var(--nav-width);
    max-height: calc(100% - 10px);

    margin: auto 10px;
    height: 200px;

    font-family: monospace;
    font-size: 20px;
}
.lb-nav:hover, .lb-nav.lb-pressed {
    backdrop-filter: brightness(50%);
    transition: 0.1s;
    color: rgb(255, 0, 191);
    border-color: rgb(155, 0, 142);
    background: linear-gradient(
        180deg,
        rgba(0, 95, 133, 0.7) 0%,
        rgba(48, 134, 129, 0.7) 80%,
        rgba(163, 32, 154, 0.7) 100%
    );
}
.lb-nav:disabled {
    backdrop-filter: brightness(60%);
    color: rgb(122, 122, 122);
    border-color: rgb(100, 100, 100);
    background: linear-gradient(
        180deg,
        rgba(63, 63, 63, 0.6) 0%,
        rgba(61, 61, 61, 0.6) 80%,
        rgba(59, 59, 59, 0.6) 100%
    );
    box-shadow: inset 0px 0px 5px rgba(61, 61, 61, 0.8);
}
#lb_next::before {
    content: "▶";
}
#lb_prev::before {
    content: "◀";
}
@media screen and (max-width: 600px) {
    .lb-nav {
        position: absolute;
        border: none;
        backdrop-filter: none;

        height: 100%;
        margin: 0;
        border-radius: 0px !important;
        max-height: unset;
        box-shadow: none;
    }
    #lb_next {
        top: 0%;
        right: 0%;
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 40, 244, 0.3) 100%
        );
    }
    #lb_prev {
        top: 0%;
        left: 0%;
        background: linear-gradient(
            270deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 40, 244, 0.3) 100%
        );
    }
}

/* Lightbox loading */
#lb_loading {
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 0;

    opacity: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;

    border: 1px solid #2cac88;
    border-radius: 10px;

    box-sizing: border-box;
}
#lb_loading:before {
    content: "...";
    animation: loading 1s linear infinite;
}

/* Gallery grid */
.g-grid:empty {
    border: 1px dashed gray;
    height: 50px;
    font-family: "Segoe UI Semilight",Tahoma,sans-serif;
    border: 1px solid rgb(136, 0, 118);
    color: rgb(255, 123, 237);
}
.g-grid:empty:before {
    content: "Nothing here!";
    margin: auto;
    padding: 5px;
}
.g-grid a {
    color: var(--link-color);
}
.g-grid a:hover {
    color: var(--link-hover-color);
}
.g-loading {
    text-align: center;
}
.g-loading:after {
    content: "...";
    animation: loading 1s linear infinite;
}

/* Gallery grid cell */
.g-gridCell {
    position: relative;
    margin: 8px;
    transition: all 0.5s !important;
    display: flex;
}
.g-gridCellImage {
    order: 1;
    border-radius: 20px;
    border: 1px solid rgb(255, 0, 136);
}
.g-gridCellButton {
    order: 2;
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.g-gridCellButton:hover {
    cursor: pointer;
}
.g-gridCellEffect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    order: 3;
    border-radius: 15px;
    box-shadow: inset 0px 0px 20px rgb(255, 7, 243);
}
.g-gridCellEffect, .g-image {
    transition: 0.5s ease !important;
}
.g-gridCell:hover {
    transform: translateY(-5px);
    transition: all 0s !important;
}
.g-gridCell:hover .g-gridCellEffect {
    transition: 0s ease !important;
    box-shadow: inset 0px 0px 20px rgb(255, 7, 243), inset 0px -5px 25px rgb(255, 218, 7);
}
.g-disabled img {
    opacity: 1 !important;
}
.g-disabled button {
    display: none;
}
.g-gridCellCaption {
    display: block;
    position: absolute;
    bottom: 0%;
    right: 0%;

    margin: 5px 5px;
    padding: 5px 8px;

    font-size: 0.9rem;
    font-family: "Segoe UI Semilight",Tahoma,sans-serif;

    border-radius: 10px;
    border: 1px solid rgb(161, 70, 85);
    background: linear-gradient(
        180deg,
        rgba(52, 0, 73, 0.9) 0%,
        rgba(32, 1, 30, 0.9) 100%
    );

    overflow: hidden;
    text-overflow: ellipsis;

    max-height: 100%;
    max-width: 100%;
}
.g-noframe .g-gridCellCaption {
    margin: 0;
}
.g-gridCellCaption a {
    display: inline-block;
    position: relative;
    z-index: 1;
}
.g-gridCellCaption code {
    font-size: 0.9em;
    background-color: rgb(96, 10, 122);
    color: #15fff3;
}
.g-gridCellCaption.g-smallScreen {
    display: none;
}

.g-gridCellLoading {
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: -1;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid gray;
    box-sizing: border-box;

    width: 100%;
    height: 100%;
}
.g-gridCellLoading:before {
    content: "...";
    animation: loading 1s linear infinite;
}

.g-gridCell.g-noframe .g-gridCellImage, .g-gridCell .g-gridCellEffect {
    border-color: transparent;
    box-shadow: none;
    border-radius: 20px;
}

@media screen and (max-width: 600px) {
    .g-gridCellCaption.g-smallScreen {
        display: block;
    }
    .g-fixedGrid .g-gridCell.g-smallFillWidth {
        width: 100% !important;
        height: unset !important;
    }
    .g-justifiedGridRow.g-smallFillWidth {
        flex-direction: column;
        max-height: unset !important;
        max-width: unset !important;
        height: unset !important;
    }
    .g-justifiedGridRow.g-smallFillWidth .g-gridCellImage {
        width: 100%;
    }
    .g-justifiedGridRow.g-smallFillWidth .g-gridCell {
        box-sizing: border-box;
        width: calc(100% - 16px);
    }
}

/* Gallery justified grid */
.g-justifiedGrid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: safe center;
}
.g-justifiedGridRow {
    display: flex;
}
.g-justifiedGrid .g-gridCell {
    position: relative;
    max-height: 100%;
}
.g-justifiedGrid .g-gridCellButton {
    background: transparent;
    border-style: none;
    z-index: 1;
    top: 0%;
    left: 0%;
}
.g-justifiedGrid .g-gridCellImage {
    max-height: 100%;
}
.g-justifiedGrid .g-gridCellLoading {
    display: none;
}
.g-justifiedGrid.g-gridLoading:before {
    content: "Loading...";
}

/* Gallery fixed grid */
.g-fixedGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0em;
}
.g-fixedGrid .g-gridCell {
    display: inline;
}
.g-fixedGrid .g-gridCellImage {
    background: transparent;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    vertical-align: middle;
}
.g-fixedGrid .g-gridCellButton {
    display: inline;
    background: transparent;
    box-sizing: content-box;
    border-style: none;
    border-width: 0px;
}

/* Gallery pagination */
.g-pageNav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 10px;
    font-family: "Segoe UI Semilight",Tahoma,sans-serif;
    color: rgb(230, 0, 218);
}
.g-pageNavButton {
    margin: 0;
    cursor: pointer;
    border-radius: 100%;
    border: 1px solid green;
    color: rgb(230, 0, 218);
    background: linear-gradient(
        180deg,
        rgba(0, 156, 177, 0.767) 0%,
        rgba(0, 44, 41, 0.7) 100%
    );
}
.g-pageNavButton:disabled {
    color: rgb(151, 151, 151);
    border-color: gray;
    background: linear-gradient(
        180deg,
        rgba(167, 167, 167, 0.767) 0%,
        rgba(36, 36, 36, 0.7) 100%
    );
}
.g-pageNavButton:hover:not(:disabled) {
    background: linear-gradient(
        180deg,
        rgba(0, 156, 177, 0.9) 0%,
        rgba(0, 44, 41, 0.9) 100%
    );
}
.g-pageNavPrev:before {
    content: "<";
}
.g-pageNavNext:before {
    content: ">";
}

@media screen and (max-width: 600px) {
    .g-smallScreenHide {
        display: none;
    }
}

/* Gallery sifter */
.g-sifterWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px;
    font-family: monospace;
    font-size: 1.1em;
}
.g-sifter {
    display: flex;
    align-items: center;
    font-family: "Segoe UI Semilight",Tahoma,sans-serif;
    font-size: 0.9em;
    color: red;
    accent-color: rgb(216, 33, 161);
}
.g-sifter span:not(.g-sifterName) {
    margin: 0px 5px;
}
.g-sifterName {
    display: inline-block;
    text-transform: uppercase;
    margin-right: 5px;
    color: rgb(202, 0, 209);
}
.g-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Filters */
.g-filterInputOther:before {
    content: "N/A"
}

/* Sorts */
.g-sort span:not(.g-sifterName) {
    text-transform: capitalize;
}
.g-sortInputAscending:before {
    content: "ascending";
}
.g-sortInputDescending:before {
    content: "descending";
}
.g-sortAlphabetical .g-sortInputAscending:before {
    content: "A-Z";
}
.g-sortAlphabetical .g-sortInputDescending:before {
    content: "Z-A";
}






/* -------------------------------------------------------- */
/* 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;
  }
}