:root {
   /* if you want to keep it super simple, you can edit these top variables (variables = the things that start with --) to add some style and leave the rest of the code alone! */

   /* colors */
   --text: #312828;
   --background: #f3eee5;
   --accent-dark: #522FCA;
   --accent: #d16119;
   --accent-light: #7255d7;

   /* fonts */
   --basefont: Director, serif;
   --titlefont: Righteous, system-ui, sans-serif;
   --subtitlefont: FT88B, monospace;
   --text-size: 1em;

   /* gallery styling */
   --minimum-img-width: 200px;
   --maximum-img-width: 500px;
   --maximum-columns: 3;
   --image-background: #f3eee5;
   --column-gap: var(--spacing);

   /* misc styling */
   --max-width: 80%;
   --spacing: 5px;
   --border-radius: 0px;
   --underline: wavy var(--accent-dark);
   --border: dashed var(--accent) 1px;

   /* calculations - don't worry about this */
   --halfspacing: calc(var(--spacing) / 2);
   --doublespacing: calc(var(--spacing) * 2)
}

* {
   box-sizing: border-box;
   max-width: 100%;
   scrollbar-color: var(--accent);
   -ms-overflow-style: none;
   box-decoration-break: clone
}

@font-face {
   font-family: FT88B;
   src: url('/font_files/FT88-Bold.ttf') format("truetype");
}

@font-face {
   font-family: Director;
   src: url('/font_files/Director-Regular.ttf') format("truetype");
}

@font-face {
   font-family: Righteous;
   src: url('/font_files/Righteous-Regular.ttf') format("truetype");
}

body {
   overflow-x: hidden;
   overflow-y: scroll;
   padding: var(--spacing) 5%;
   background-color: var(--background);
   color: var(--text);
   font-family: var(--basefont);
   font-size: var(--text-size);
   line-height: 1.4em;
}

h1:has(+ nav) {
   margin-bottom: var(--halfspacing)
}

header {
   text-align: center;
   padding-bottom: var(--spacing);
}

nav {
   padding-top: var(--spacing)
}

main,
header,
footer {
   max-width: var(--max-width);
   margin: 0 auto;
}

footer {
   display: block;
   text-align: center;
   font-size: .8em;
   margin: var(--spacing) auto;
   background-color: var(--text);
   color: var(--background);
}

footer a:hover {
   color: var(--background);
   text-decoration-color: var(--background);
}

/* element styling */
a {
   color: var(--background);
   background-color: var(--accent);
   padding: 4px;
   text-decoration: none;
}

a:hover {
   color: var(--accent-dark);
   background-color: transparent;
   font-weight: 600;
   text-decoration: underline var(--underline);
}

nav a {
   margin: 5px;
}

#to-top a {
   position: fixed;
   right: var(--spacing);
   bottom: var(--spacing);
   font-size: 1em;
}

b {
   color: var(--accent-dark)
}

i {
   color: var(--accent)
}

mark {
   background-color: var(--accent-light);
   padding: 1px 2px;
   border-radius: var(--border-radius)
}

code {
   font-size: .9em;
   padding: 1px 3px;
   font-family: monospace;
   color: var(--accent-dark)
}

u {
   text-decoration-color: var(--accent-dark)
}

ol,
ul {
   margin: var(--spacing);
}

li {
   padding-left: var(--halfspacing);
   margin: var(--halfspacing) auto;
}

li>ul {
   padding-left: var(--spacing);
   margin: auto;
   font-size: .9em;
}

li::marker {
   color: var(--accent);
}

blockquote {
   padding-left: var(--doublespacing);
   margin: var(--doublespacing);
   border-left: var(--border);
   color: var(--accent-dark)
}

hr {
   width: 100%;
   border: none;
}

img {
   vertical-align: middle;
   max-width: 100%;
}

/* boxes & flex */
.box {
   padding: var(--spacing);
   border: var(--border);
   margin: var(--spacing) auto;
   border-radius: var(--border-radius);
   break-inside: avoid;
}

.flex {
   display: flex;
   flex-flow: row wrap;
   gap: var(--halfspacing) var(--spacing)
}

.flex>* {
   flex: 1 2 200px;
   margin: 0 auto;
}

.center {
   text-align: center;
}

/* dividing lines between areas */
hr::after,
nav::after,
footer::before {
   content: "\a0 \a0";
   text-align-last: justify;
   width: 50%;
   margin: var(--spacing) auto;
   display: table;
   text-decoration: underline var(--underline);
   text-decoration-thickness: .1em
}

/* headers */
h1 {
   font-family: var(--titlefont);
   margin: 1.5em auto;
   text-align: center;
   line-height: 1.3em;
}

h2,
h3,
h4 {
   font-family: var(--subtitlefont);
   margin: 1.5em auto;
   text-align: center;
   line-height: 1.3em;
}

h1 {
   font-size: 2em;
   letter-spacing: 0.2rem;
}

h1 a {
   text-decoration: none;
   background-color: transparent;
   color: var(--text);
   font-weight: 900;
}

h2 {
   font-size: 1.5em;
   margin: 1em auto;
   color: var(--accent);

}

h3 {
   color: var(--background);
   background: var(--accent)
}

h4 {
   color: var(--accent-dark);
   background: var(--accent-light);
   font-weight: normal;
}

/* image gallery */
#gallery {
   margin: var(--doublespacing) auto;
   display: block;
   text-align: center;
   line-height: 1.2em;
   font-size: .9em;
}

#gallery.columns {
   columns: var(--minimum-img-width) var(--maximum-columns);
   gap: var(--column-gap);
}

#gallery img {
   margin: var(--spacing) auto;
   max-width: min(var(--maximum-img-width), 100%);
   display: block;
   background-color: var(--image-background)
}

figure {
   margin: var(--spacing) auto;
   break-inside: avoid;
}

/* lightbox */
#gallery img:hover {
   border-radius: var(--border-radius);
   cursor: pointer;
   outline: var(--border)
}

#lightbox {
   border: none;
   outline: none;
}

#lightbox img {
   max-height: 98vh;
   max-width: 98vw;
}

::backdrop {
   backdrop-filter: blur(5px) brightness(60%);
}

#gallery:has(~ #lightbox:popover-open) {
   pointer-events: none;
}

/* makes the lightbox work on small screens, like phones */
@media only screen and (min-width: 600px) {
   #lightbox button {
      display: none;
   }
}

@media only screen and (max-width: 600px) {
   #lightbox button {
      display: block;
      width: 30px;
      height: 30px;
      margin: 10px auto;
   }
}