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

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

  /* Text Colors: */
  --text-color: #869eca;
  --sidebar-text-color: #869eca;
  --link-color: #d96899;
  --link-color-hover: #7dc4da;

  --headercol: #33134d;
  --borcol: #33134d; /*#570b53;*/
  --hr: #51507a;
  --boxbac1:  #0a0a2b; /*same as main background*/
  --boxbac2: #28264d; 
  --boxbac3: #3a0d37; /*#323250; #571753*/
    --boxbac4: #8b5b8d; /*#323250; #571753*/

  /* Header Colors*/
  --h1: #47c6d6;/*#31d0ecc0;*/
  --h2: #ba86ca;/*#4a79ddb4;*/
  --h3: #c3ca86;/*#a131ec;*/
  --h4: #86caa0;/*#e631ec;*/
  --h5: #ca9486;/*#ec319e;*/
  --h6: #869eca;/*#ec315a;*/
  

  /* Text: */
  --font: 'montserrat', Arial, sans-serif;
  --heading-font: 'Candara', Georgia, serif;
  --font-size: .85rem;

  /* Other Settings: */
  --margin: 15px;
  --padding: 20px;
  --border: 2px solid #33134d;
  --round-borders: 10px;
  --sidebar-width: 270px;
}

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

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  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("");*/
    background-image: linear-gradient(rgba(78, 73, 146, 0.65), rgba(25, 27, 73, 0.65), rgba(87, 45, 100, 0.65), rgba(80, 134, 134, 0.65)), url(/images/Pasted_image_20230903155648.png); 
  background-attachment: fixed; 
}

::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" 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);
}

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

header {
    text-align: center;
  background: var(--boxbac1);
    padding: 10px;
  grid-area: header;
  font-size: 1.0em;
  border: var(--border);
  border-radius: var(--round-borders);
  /*background: var(--content-background-color);*/
}

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

.header-title {
  font-family: var(--heading-font);
  font-size: 2.30em;
  font-weight: bold;
}

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

h1, h2, h3, h4, h5, h6 {font-family: var(--fonthead); /*text-align: center;*/ margin-top: 5px; margin-bottom: 5px; padding: 5px; line-height:110%;}

h1{font-weight: medium; }

h1 {font-size: 2.35em; color: var(--h1); }

h2 {font-size: 1.80em; color: var(--h2); 
text-decoration: underline;
}

h3 {font-size: 1.50em; color: var(--h3); }

h4 {font-size: 1.20em; color: var(--h4); }

h5 {font-size: 1.20em; color: var(--h5); }

h6 {font-size: 1.20em; color: var(--h6); }

hr{
color: var(--hr);
  border-style: solid;
  border-width: 1.5px;
  text-align: center;
  margin: 10px;
}
bold{
  font-weight: 800;
}

subtitle{
  font-size: 14px;
  font-style: italic;
  text-align: center;
} 

 .rainbowtext {
  background-image: linear-gradient(to right, #e91e63, #ffc107, #0ebdab, #8052d1, #ee2f6f);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;}

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

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

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  /*font-size: 0.80em;*/
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
  background: var(--boxbac1);
}

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

.box {
border: solid;
border-color: var(--borcol);
}
/* 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;
}
/*---These are separated by divs. End one div before the next and it will count as first and second children. You could add more and probably vary the appearances of them.--*/
.two-columns > *:first-child {
  padding-right: 0.75em;
  border: 2px, solid, var(--borcol);
  border-radius: 8px;
  padding: 3px;
  margin: 2px;
}

.two-columns > *:last-child {
    padding-right: 0.75em;
  border: 2px, solid, var(--borcol);
  border-radius: 8px;
  padding: 3px;
  margin: 2px;
}

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

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

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

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

.images img {
  /*width: 100%;
  height: auto;*/
  padding: 5px;
  margin: 0;
  overflow: hidden;
  object-fit: cover;
    border: solid, 1px;
  border-color: var(--borcol);
  border-radius: 8px;
}

 img {
  max-width: 100%;
   max-height:100%;
   border-radius: 7px;
 }
/*
This is how this works: 
<div class="images">
            <img alt="" src="/images/20221112004048.jpg" />
            <img alt="" src="/images/163541188439_2.png" />
            <img alt="" src="/images/163541188439_0.jpg" />
          </div>
Here displays a row of images.  Add any more images and the row will get longer. Create a new row by starting a new div below this one. I've fixed this so that images will appear within a box, they are not cropped. 
*/

/*---------GALLERY--------*/
.gallery{
  /*border-style: solid;
  border-width: 2px;
  border-color: var(--borcol);*/
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 5px;
  /*background: var(--gallerybac);*/
    margin: 5px; /*don't turn this off*/
  border-radius: 10px; 
}

  .gallery img{
    /* The width and height here obviously change the shape of the image. I'm not sure if I like it as much as viewing them all in their respective shapes? Update: I did change this ultimately because I wanted a more uniform look. The rows creating different lengths bugged me, I couldn't really fix it, so I squared everything.*/
    /*Update 2: I keep forgetting, but the way images round in the galleries does not carry over to the rest of my images. The round border is exclusive to anything within the gallery div. Regular img tags are not affected by this.*/
    box-shadow: 0px 2px 2px 0px;
    border-radius: 10px;
    width: 190px;
    height: 190px; 
    object-fit: cover;
    border-radius: 10px;
    background: var(--bgcol);
    padding: 2px;
    /*object-fit: contain;*/ /*This looks really bad turned on.*/
    
  }
  .gallery img:hover{
    /*border: 2px solid rgb(55, 99, 46);*/
    object-fit: contain;}

  .gallery figure{
    border: solid;
    border-color: var(--liborder);
    border-width: 1px;
    background-color:rgba(38, 36, 63, 0.65);
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
		align-content: center;
		flex-wrap: wrap;
		align-items: flex-end;
    width:200px;
		}

    .gallery .art {
      display: flex;
      flex-wrap: wrap;
    }
/* -------------------------------------------------------- */
/* 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;
  }
}