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

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #fff;
  --content-background-color: #fff;
  --sidebar-background-color: #000000a5;
  background-blend-mode: darken;

  /* Text Colors: */
  --text-color: #000;
  --sidebar-text-color: #cbcbcb;
  --link-color: #55e831;
  --link-color-hover: #ffffff;

  /* Text: */
  --font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
  --heading-font: "Silkscreen", sans-serif;
  --heading-font-weight: 400;
  --font-size: 14px;

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

/* -------------------------------------------------------- */
/* 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: 0;
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://froggyfriend.neocities.org/images/papertexture.jpg");
  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, summary {
  text-decoration: underline;
  font-family:Silkscreen;
}

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

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

html {
  scroll-behavior: smooth;
}

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

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header" auto "leftSidebar main" auto "footer footer" auto / var(--sidebar-width) auto;
  /* 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);
  margin: 0 auto; /* centers the main content */
  background-color: white;
}

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

.gallery {
  padding-top: 1em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 3;
  text-align: center;
}

.gallery img {
  border: 1px solid black; /* You can remove the border if you want */
  width: 100%;
}

figure {
  display: inline-block;
  margin: 0;
  margin-bottom: 15px;
}

.spotlightImage {
  display: block;
  margin: 0 auto;
}

/* Below changes the number of columns in the gallery for smaller screens
   If you changed the column number on line 85, you might have to edit it here too
   (it's not exactly mobile and tablet sizing)
    */
@media only screen and (max-width: 800px) {
  .gallery {
    columns: auto 2;
  }
}

@media only screen and (max-width: 500px) {
  .gallery {
    columns: auto 1;
  }
}

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

header {
  grid-area: header;
  font-size: 1.2em;
  font-family: "Silkscreen";
  border: none;
  border-radius: var(--round-borders);
  color: #ffffff;
  position: relative;
  text-align: center;
  color: white;
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.8em;
  font-weight: bold;
  font-smooth: never;
  text-align: center;
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke: 1px black;
   text-shadow:
       8px 8px 0 #000,
       -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
       1px 1px 0 #000;
  margin: 0;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-image img {
  width: 100%;
  height: auto;
  margin-bottom: 0;
    image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
#froggif {
  position: fixed;
  bottom: -6%;
  right: 5%;
  width: 20%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* MARQUEE */
.marquee {
  height: 25px;
  width: 100%;
  color: #000;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 10s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

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

.right-sidebar {
  grid-area: rightSidebar;
}

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

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

.artnav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
  font-size:1.4em;
}

.active {
  font-weight:bold;
}
/* -------------------------------------------------------- */
/* 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: black;
}

footer a:hover,
footer a:focus {
  color: black;
}

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

nav {
  margin-top: 0;
  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 */

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

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: black;
}

main a:hover,
main a:focus {
  color: black;
  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: solid 1px black;
  border-top: var(--border);
  margin: 2em 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: 2.5em;
  font-weight: bold;
}

main h2 {
  font-size: 1.8em;
}

main h3 {
  font-size: 1.6em;
}

main h4 {
  font-size: 1.4em;
}

main h5 {
  font-size: 1.2em;
}

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

.scrollbox, .wishlist {
  background-color: #dfedf6;
  padding: var(--padding);
}

.scrollbox {
  width: 100%;
  height: 300px;
  overflow: scroll;
  overflow-x: hidden;
}

.scrollbox a, .wishlist a {
  color: black;
}

.scrollbox a:hover,
.scrollbox a:focus, 
.wishlist a:hover, 
.wishlist a:focus {
  color: black;
}

.wishlist {
  background-color: #dfedf6;
}

.chatter {
  border-top: 1px solid #a5a5a5;
}

.date {
  font-style: italic;
  font-family: "Silkscreen", serif;
  font-size: 1.2em;
}

.time {
  color: #8a8a8a;
  font-family: "Silkscreen", serif;
}

.pixelem {
  font-family: "Silkscreen", serif;
}

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

.thoughts img {
      image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  padding:0;
  margin:0;
}
.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;
}

.blinkie {
  width: 50%;
}
/* -------------------------------------------------------- */
/* 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;
  }
}