/* 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." */

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

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #abd1da;
  --content-background-color: #ffffff00;
  --sidebar-background-color: #a7cdc795;
  --heading-background-color: #ffffff00;

  /* Text Colors: */
  --text-color: #fff0a8;
  --sidebar-text-color: #fff0a8;
  --link-color: #ffcd43;
  --link-color-hover: #ff770f;
  --nbText-color: #35524c;

  /* Text: */
  --font: Lucida Console, monospace;
  --heading-font: Lucida Console, monospace;
  --font-size: 15px;

  /* Other Settings: */
  --margin: 8px;
  --padding: 24px;
  --border: none;
  --round-borders: 72px;
  --sidebar-width: 300px;

}

  
/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
* {
  box-sizing: border-box;
}


body {
  display: flex;
  align-items: flex-start;
  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: var(--background-color);
  background-image: url("https://clarpa.neocities.org/stars%202.gif");
  
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(255, 240, 168, 0.2);
  color: rgba(167, 205, 199, 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: underline;
}

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 "leftSidebar 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: var(--heading-background-color);
}

.header-content {
  padding: var(--padding);
}

@font-face { 
  font-family: "ecoder";
  src: url("https://dl.dropbox.com/s/2wrgv8i3jsqkv6p/Ecoder-Italic.otf");
  font-display: swap;
}

.header-title {
  font-family: "ecoder", var(--heading-font);
  font-size: 5em;
  font-weight: bold;
  color: #ffcd43;

  text-shadow:
    /* inner brown edge */
    0 5px 0 #8f7a36,
    4px 0 0 #8f7a36,
    -3px 0 0 #8f7a36,
    0 -3px 0 #e6e3be,

    /* thicker rounded green border */
    0 10px 0 #92a698,
    10px 0 0 #92a698,
    0 -10px 0 #92a698,
    -10px 0 0 #92a698,
    9px 9px 0 #92a698,
    -9px 9px 0 #92a698,
    9px -9px 0 #92a698,
    -9px -9px 0 #92a698,

    /* soft rounding blur layer */
    0 0 5px rgba(150, 170, 160, 0.6),

    /* subtle depth */
    1px 1px 0 rgba(172, 172, 172, 0.6),

    /* outer glow */
    0 0 6px #424242;
}

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


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

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


.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: rgba(0, 0, 0, 0.1);
 padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}
  
 .player{ 
        width:fit-content;
        border: #71807d solid 2px;
        border-radius: 100px;
        margin-left:auto;
        margin-right:auto;
      background: linear-gradient(0deg, rgba(107,120,111,1) 0%, rgba(153,186,163,1) 30%, rgba(251, 255, 232,1) 100%); 
      padding:5px;
    }
 



.seek_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 6px;
  background: #998a62;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 8px;
}

.seek_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: #faeecd;
  cursor: pointer;
  border-radius: 50%;
  border:1px solid #ffdc7d;
  padding-top:3px;
  position:relative;
  bottom:3px;
}
 
button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Myriad Pro";font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #535e57;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #535e57}.vertical-bar,button,input[type=reset],input[type=submit].vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{opacity:0.5}}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fbffe8,inset 1px 1px #0a0a0a,inset -2px -2px #fbffe8,inset 2px 2px #7a5c28}}button:focus,input[type=reset]:focus,input[type=submit]:focus{opacity:1}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:#7a5c28}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fbffe8;}
 

 
 
@media (hover: none){
	button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fbffe8,inset 1px 1px #0a0a0a,inset -2px -2px #fbffe8,inset 2px 2px #7a5c28}
}

 
@font-face {
  font-family: "Myriad Pro";
  src: url("https://dl.dropbox.com/scl/fi/z8hqw29h8a9i3a3cbbxkt/MYRIADPRO-REGULAR.OTF?rlkey=begwqxljs2gzyw26h00oeovzi&st=px0mbeax&raw=1") format("woff");
}
 
 
 
.window, .title-bar {
  font-family: "Myriad Pro";
  -webkit-font-smoothing: none;
  font-size: 11px;
}
 
.window {
  padding:10px;
  width:258px;
}
 
 
.window-body { 
  display:block;
  margin:auto; 
  border-radius:0em;
}
 
 
 
input[type=range] {
        -webkit-appearance: none;
        appearance:none;
        width: 100%;
    }
 
    input[type=range]:focus {
        outline: none;
    }
 
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: pointer;
    }
 
 
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: pointer;
    }
 
    .flex {display: flex;}
 
   
 
 
    
 
    #musicplayer {
display:block;
        float:right;
      background: linear-gradient(0deg, #ede4c0, #ede4c0) padding-box, linear-gradient(to top, #fbffe8, #b39e66) border-box;
  border-radius: 25em;
  border: 2px solid transparent;
      margin-left:3px;
      padding-left:4px;
      box-shadow: 1px 1px 10px 0px rgba(166, 143, 93,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(166, 143, 93,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(166, 143, 93,0.27) inset;
    }

 
    .wheel {
      display: block;
  justify-content: center;
        margin:auto;
      background: linear-gradient(0deg, #ede4c0, #ede4c0) padding-box, linear-gradient(to top, #fbffe8,#b39e66) border-box;
  border-radius: 15em;
  border: 2px solid transparent;
      padding-top:0px;
      box-shadow: 1px 1px 10px 0px rgba(166, 143, 93,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(166, 143, 93,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(166, 143, 93,0.27) inset;
    }

.innerwheel {
  border-radius: 100em;
  border: 3px solid #d1bd90;
  
      padding:5px;
  padding-left:8px;
  padding-right:9px;
  margin:0;
  box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
  
}
th{
  width:10px;
 
  margin:0;
}
.fas.fa-minus{
  margin:0;
  padding-bottom:5px;
}

 
    .wheelcontrols {
        font-size:10px !important; /* size of controls */
        text-align:center;
        padding-top:2px;
color: #c2a567;
    opacity: 0.8;
    }

.wheelcontrols button {
    background: none;
    border: none;
    color: #c2a567;
    opacity: 0.6;
    font-size: 10px;
    padding: 1px;
    cursor: pointer;
}
.wheelcontrols button:hover {
  opacity: 1;
}

.controls button:hover {
   opacity: 1;
  
}

.playpause-track button{
  display:block;
  color:#c2a567;
  font-size: 15px;
  margin:auto;
}

.playpause-track {
    font-size: 20px !important;
    padding: 2px;
}
 
    .songtitle {
        padding:25px; /* padding around song title */
        color:#b38e40;
      padding-bottom:0;
      margin-left:10px;
      margin-right:15px;
        font-size: 14px;
        display:block;
        font-family:Myriad Pro;
    }
 
    .controls button{
      display:block;
      
      margin-left:5px;
        font-size:14px !important; /* size of controls */
        text-align:center;
        color:#a37e2f;
      opacity:0.6
        
    } 
 
    button {
      min-width:20px;
      background:none;
      
      text-align:center;
    }
button:active {
    opacity: 0.7;
}

 
    .seeking {
        display:flex;
        justify-content: space-evenly;
        padding:10px; /* padding around seeking bar */
      padding-left:0;
      padding-bottom:0px;
      color:#a37e2f;
    }
 
    .current-time {
        padding-right:5px;
    }
 
    .total-duration {
        padding-left:5px;
    }
  

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



.nbText {
    font-weight: bold;
  font-size: 1em;
  font-family: var(--heading-font);
  color: var(--nbText-color);
}





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

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  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 {
  margin-bottom: 3em;
}

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

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: 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;
}

/* NAVIGATION IN HEADER */

header nav {
  margin-bottom: 0;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}

/* Subnavigation (Drop-Down): */

header nav ul ul {
  background: var(--content-background-color);
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  border: var(--border);
  min-width: 100%;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

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


  #container {
      overflow: scroll;
      overflow-x: hidden;
      height: 50em;
      padding: 1rem;
    }

        ::-webkit-scrollbar {
        width: 14px;
        }

        ::-webkit-scrollbar:horizontal {
        height: 14px;
        }

        ::-webkit-scrollbar-corner {
        background: #eee;
        }

        ::-webkit-scrollbar-track:vertical {
        background: linear-gradient(90deg, #54695a, #75947e 20%);
        border-radius: 5px;
        }

        ::-webkit-scrollbar-track:horizontal {
        background: linear-gradient(180deg,  #54695a, #75947e 20%);
        border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
        border: 1.5px solid #888;
        border-radius: 5px;
        box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
        }

        ::-webkit-scrollbar-thumb:vertical {
        background: linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
        }

        ::-webkit-scrollbar-thumb:horizontal {
        background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
        }

        ::-webkit-scrollbar-button:horizontal:end:increment,
        ::-webkit-scrollbar-button:horizontal:start:decrement,
        ::-webkit-scrollbar-button:vertical:end:increment,
        ::-webkit-scrollbar-button:vertical:start:decrement {
        display: block;
        }

        ::-webkit-scrollbar-button:vertical {
        height: 15px;
        }

        ::-webkit-scrollbar-button:vertical:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

        ::-webkit-scrollbar-button:vertical:start:increment {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #888;
        border-radius: 5px;
        }

        ::-webkit-scrollbar-button:horizontal {
        width: 14px
        }
        ::-webkit-scrollbar-button:horizontal:start:increment {
        display: none;
        }
        ::-webkit-scrollbar-button:horizontal:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:horizontal:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }

        ::-webkit-scrollbar-button:horizontal:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #888;
        }
        



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




.sp{height:14px;width:240px;margin:-17px 0 0 -10px;overflow:hidden;position:absolute;background:url(https://31.media.tumblr.com/89d0a73dbfd39d6e6dfcd157efacf73a/tumblr_inline_nc4ltugMJI1rh7826.png);}

.nb{
  width:200px;margin-bottom:30px;padding:10px 15px 10px 15px;background:url(https://31.media.tumblr.com/905e072082d7e170a96e198cf24af6d9/tumblr_inline_nc4ltqDhD21rh7826.png);border:1px solid rgba(0,0,0,0.1);-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;border-bottom-right-radius: 12px;border-bottom-left-radius: 6px;z-index:999999;box-shadow:rgba(0,0,0,0.07)5px 5px;font-size:11px;line-height:13px;
}

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

.book-img {
  display: flex;
  
}
.book-img img {
  width:180%;
  height: 100%;
  padding: 5px;
  margin: 0;
  overflow: hidden;
  transform: (45deg);
}

.floatingContainer {
  position: relative;
  min-height: 100px;
  width: 100px;
  height: 50px;
}

.floating {
  position: absolute;
  animation-name: floatingAnim; /* The name of the animation we want to use. */
  animation-duration: 5s; /* How long it takes to complete one loop of the animation. */
  animation-iteration-count: infinite; /* How many times to repeat the animation. */
  animation-timing-function: linear; /* How to play the animation. */
  width: max-content;      /* Linear plays the animation at a constant speed */
                          /* There's also things like ease-in, ease-out, ease-in-out, among others. */
}

.floating:hover, .floating:focus {
   animation-play-state: paused;
}

.fairyMenuContainer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 80px;
}
.fairyMenuRow {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
        row-gap: 80px;
        column-gap: 70px;
}

@keyframes floatingAnim {
        0% { left: 10px; top: 0px; }
        12% { left: 6px; top:6px; }
        25% { left: 0px; top: 10px; }
        38% { left: -6px; top: 6px; }
        50% { left: -10px; top: 0px; }
        62% { left: -6px; top: -6px; }
        75% { left: 0px; top: -10px; }
        87% { left: 6px; top: -6px; }
        100% { left: 10px; top: 0px; }
    }

.img-floatinganim {
animation-name: floating; 
animation-duration: 2s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
} 

@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 30px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}     
    

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