/*=================================================================================================================
Hi, I really don't know why you'd want to read this, but here we are. Basically the top half of this, where they 
use layers and stuff, is from a blogging framework called ZoneLots. It has some features I really like, like the photo
gallery template. That works like a charm actually. 

What's less good is that if I delete some of it, things break, so for now a lot of it is staying. Done is better
than perfect, so I'll clean it up at some point.

Half way down, my code takes over. I've tried to make it readable, but honestly, good luck.*/

@layer reset, defaults, themes, utilities;

/*==============
    LIGHT MODE
===============*/

@layer themes {
  :root {
    --text-colour: #000000;
    --item-colour: #f9f9f900;
    --background-colour: #f9f9f9;
    --header-colour: #9daff6;
    --header-colour-2: #842020;
    --header-colour-3: #8266d6;
    --header-colour-4: #57a444;
    --header-colour-5: #c17e27;
    --link-hover-background-colour: #2274a5;
    --link-hover-colour: #ffffff;
    --link-colour: #134b6d;
    --box-shadow: #686868;

    --h1-colour: black;
    --h2-colour: #2274a5;
    --h3-colour: #2274a5;
    --h4-colour: rgb(82, 81, 81);
    --h5-colour: rgb(34, 34, 34);
  }

  


}

/*================
   DARK MODE
=================*/

@media (prefers-color-scheme: dark) {
  :root {
    --text-colour: #f9f9f9;
    --item-colour: #053e5f00;
    --background-colour: #1b1b1b;
    --header-colour: #9daff6;
    --header-colour-2: #842020;
    --header-colour-3: #8266d6;
    --header-colour-4: #57a444;
    --header-colour-5: #c17e27;
    --link-hover-background-colour: #2492d3;
    --link-hover-colour: #f9f9f9;
    --link-colour: #61bbef;
    --box-shadow: #1b1b1b;

    --h1-colour: #f9f9f9;
    --h2-colour: #78bce4;
    --h3-colour: #78bce4;
    --h4-colour: #f9f9f9;
    --h5-colour: #f9f9f9;
  }

}

/* ==============
	UTILITIES
============== */

@layer utilities {
  .uppercase {
    text-transform: uppercase;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .undo-case {
    text-transform: none;
  }

  /* ============== END UTILITIES */
}

/* ==============
	DEFAULTS
============== */

@layer defaults {
  /* STRUCTURE */

  :root {
    --gap: 1.5rem;
    --line: 2px solid var(--fore-colour);
    --interface-font-size: 1.2em;
    --meta-font-size: 0.8em;
  }

  body {
    font-size: 18px;
    font-family:serif;
    margin: 0;
    line-height: 1.5;
  }

  /* TEXT */
  :is(h1, h2, h3) + * {
    margin-block-start: 0;
  }
  h1 {
    margin-block-start: 1rem;
    margin-block-end: 0;
    color: var(--h1-colour);
  }
  h2 {
    margin-block-start: 3rem;
    margin-block-end: 0.25rem;
    color: var(--h2-colour);
  }

  h3 {
    margin-block-start: 2rem;
    margin-block-end: 0.25rem;
    color: var(--h3-colour);
  }

  h4 {
    margin-block-start: 2rem;
    margin-block-end: 0.25rem;
    color: var(--h4-colour);
  }

  h5 {
    margin-block-start: 2rem;
    margin-block-end: 0.25rem;
    color: var(--h5-colour);
    
  }

  ::marker {
    color: var(--plain-hot-colour);
  }

  /* MEDIA */

  img {
    display: block;
    margin-inline: auto;
  }
  figure {
    margin-inline: var(--gap);
  }
  figcaption {
    text-align: center;
    blockquote + &::before {
      content: "\2014 \a0"; /* em dash + non-breaking space */
    }
  }
  .gallery {
    --gallery-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--gallery-cols), 1fr);
    gap: calc(2rem / var(--gallery-cols));
    padding-left: 0;
    list-style-type: "";
    &:has(:nth-child(2)) {
      --gallery-cols: 2;
    }
    &:has(:nth-child(5)) {
      --gallery-cols: 3;
    }
    &:has(:nth-child(10)) {
      --gallery-cols: 4;
    }
    img {
      height: 100%;
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
  }
  iframe {
    max-inline-size: 100%;
    display: block;
    margin-block: 1rem;
    border: var(--line);
  }
}

/*=======================================================================================================
From here on out, this is all me. I'm sure you can already tell. Abandon all hope, ye who enter here.
========================================================================================================*/

/*====================
      Site Elements
====================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--background-colour);
}
body {
  max-width: 50rem;
  margin: auto;
  
}

main {
  display: flex;
  flex-direction: column;
  
  margin-top: 20px;
  width:fit-content;
}

.reader {
  padding-top: 5px;
  padding-bottom: 10px;
  margin-top:20px;
  width:fit-content;
}

article {
  width:fit-content;

  
}
article p {
  padding: 10px 10px;
}

#published-by {
  font-size: small;
  margin: 0 0 0 10px;
  padding: 0;
}


/*================
      Navbar
=================*/

.cursor {
  font-weight: bold;
  height: 1em;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

nav {
  
  border-radius: 7px;
  padding-left: 5px;
  
  background-color: var(--item-colour);
}

nav li {
  list-style: none;
  display: inline-block;
}
nav li :hover {
  color: var(--link-hover-colour);
  background-color: var(--link-hover-background-colour);
}
nav li a {
  text-decoration-line: none;

  color: var(--link-colour);
  
}

#dirnav{
  display:flex;
  flex-direction: column;
  max-width: 100%;
}
#dirnav ul{
  display:flex;
  flex-direction: column;

}

#dirbody{
  display:flex;

}

/*===============
    Text
================*/



p {
  color: var(--text-colour);
  font-size: 17px;
}
q {
  padding: 20px;
}
.date {
  color: #565656;
  padding: 0px;
  margin-left: 10px;
}

blockquote {
  margin: 10px, 0px, 10px, 0px;
  color: var(--link-colour);
  line-height: 1.6;
  position: relative;
  background: var(--item-colour);
  box-shadow: 4px 4px 4px var(--box-shadow);
}

blockquote p {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
}

a {
  color: var(--link-colour);

}

p a{
  text-decoration-line: underline;
  color:var(--h2-colour);
}
p a:hover{
  color: white;
  background-color: var(--h2-colour);
  border-radius: 3px;
}
a:hover {
  color: var(--link-hover-colour);
  background-color: var(--link-hover-background-colour);
  border-radius: 3px;
}

details {
  margin-block: 1rem;
  margin-inline-start: var(--gap);
}
summary {
  cursor: pointer;
  font-weight: bold;
  margin-inline-start: -1rem;
  & + * {
    margin-block-start: 0;
  }
}
details p {
  background-color: black;
  border-radius: 7px;
}

/*=================
     Lists
==================*/

ul {
  font-size: 17px;
  
}

li {
 list-style-type: square;
 list-style-position: inside;
  
}

.reader ul {
  padding-left: 2rem;
  color: var(--text-colour);
}

#posts-list {
  line-height: 1.2;
  padding-left: 0;
}
#posts-list a {
  text-decoration: none;
  color: var(--h3-colour);
}

#posts-list a:hover {
  color: white;
}

#posts-list li {
  margin-top: 20px;
  list-style: none;
}

#finished {
  padding-left: 0;
  color: var(--text-colour);
  padding: 10px;
}

#finished li {
  padding-left: 0;
}

/*===============
    Decoration
================*/


#from-the-archive {
  border-top: solid 5px black;
  border-bottom: solid 5px black;
}

#footer {
  border: none;
}
#footer p,
h6 {
  margin-top: 5px;
  color: rgb(140, 140, 140);
  padding: 0;
}
footer p {
  margin-top: 5px;
  color: rgb(141, 141, 141);
  padding: 0;
}

#bloop {
  animation-name: bloop;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-timing-function: ease-out;
}

@keyframes bloop {
  0% {
    border-color: var(--header-colour);
  }
  50% {
    border-color: #ffffff00;
  }
  100% {
    border-color: var(--header-colour);
  }
}


/*=========================
     GUESTBOOKS
========================*/

.container {
  margin: 30px auto 40px;
  width: 900px;
  padding: 25px;
  border: 3px solid #1894ca;
  border-radius: 5px;
  background: #aae6ff;
  min-height: 650px;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

h1#title {
  font-size: 24px;
  color: #1d1c32;
  text-align: center;
  margin-bottom: 20px;
}

#guestbooks___guestbook-form-container {
  margin-bottom: 20px;
}

.guestbooks___input-container {
  margin-bottom: 15px;
}

.guestbooks___input-container input,
.guestbooks___input-container textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #1d1c32;
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.guestbooks___input-container input:focus,
.guestbooks___input-container textarea:focus {
  border-color: #1894ca;
  outline: none;
}

/* Submit Button */
#guestbooks___guestbook-form input[type="submit"] {
  background: #1d1c32;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#guestbooks___guestbook-form input[type="submit"]:hover {
  background: #774459;
}

#guestbooks___error-message {
  color: red;
  margin-top: 10px;
}

#guestbooks___guestbook-made-with {
  text-align: right;
  margin-top: 20px;
}

#guestbooks___guestbook-made-with a {
  text-decoration: none;
  font-weight: bold;
}

#guestbooks___guestbook-made-with a:hover {
  text-decoration: underline;
}

#guestbooks___guestbook-messages-header {
  font-size: 18px;
  color: #1d1c32;
  margin-top: 20px;
}

#guestbooks___guestbook-messages-container {
  margin-top: 20px;
}

/* Responsive, turns row to collumn at 700 px*/
@media (max-width: 700px) {
  main {
    display: grid;
  }
  #intro {
    border-top: none;
    border-bottom: none;
  }
  main {
    padding: 3%;
    margin: 0%;
    border-left: none;
    border-right: none;
  }
  .reader {
    margin: 10px;
  }
  article {
    margin: 0%;
    padding: 5%;
  }

  #intro {
    border-top: 2px solid white;
    border-bottom: 2px solid white;
  }

  #sitetitle {
    margin-top: 13px;
    font-size: 30px;
    margin-left: 10px;
  }

  #navbar {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3;
    padding: 0px;
    font-size: medium;
  }

  #navbar li {
    display: inline-block;
    padding: 0px;
    margin: 5px;
  }

  .reader,
  #all-posts {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .reader ul {
    padding-left: 2rem;
  }
  .reader li {
    list-style: inside;
    list-style-type: square;
    color: var(--text-colour);
  }

  #footer {
    text-align: center;
    border: none;
  }

  #contact {
    grid-column-start: 1;
    grid-column-end: 3;
    padding: 10px;


  }


  #dirbody{
   flex-direction: column;
  
  }

  #dirnav{
    display:inline;
   
  }
  #dirnav ul{
    display:inline;
    
  
  }
}