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


:root {
  /* main colors (monochromatic)
  --dark-05: hsl(353, 31%, 5%);
  --dark-10: hsl(332, 25%, 10%);
  --dark-15: hsl(332, 22%, 15%);
  --dark-20: hsl(330, 20%, 20%);
  --dark-25: hsl(328, 19%, 25%);
  --rose-30: hsl(341, 29%, 30%);
  --rose-45: hsl(343, 30%, 45%);
  --rose-50: hsl(345, 25%, 50%);
  --rose-65: hsl(347, 34%, 65%);
  --rose-75: hsl(348, 55%, 75%);
  --light-85: hsl(353, 66%, 85%); */
    --dark-05: hsl(260, 30%, 5%);
    --dark-10: hsl(275, 18%, 10%);
    --dark-15: hsl(289, 18%, 15%);
    --dark-20: hsl(303, 17%, 20%);
    --dark-25: hsl(315, 20%, 25%);
    --rose-30: hsl(323, 22%, 30%);
    --rose-45: hsl(333, 23%, 45%);
    --rose-50: hsl(345, 25%, 50%);
    --rose-65: hsl(347, 34%, 65%);
    --rose-75: hsl(347, 41%, 75%);
    --light-85: hsl(353, 66%, 85%);

  /* accent colors */
  --teal-25: hsl(180, 100%, 25%);
  --teal-50: hsl(180, 27%, 50%);

  --sidebar-width: 140px;

}

@media (prefers-color-scheme: light) {
  :root {
    --dark-05: hsl(0, 100%, 100%);
    --dark-10: hsl(0, 100%, 95%);
    --dark-15: hsl(0, 70%, 90%);
    --dark-20: hsl(353, 66%, 85%);
    --dark-25: hsl(350, 60%, 80%);
    --rose-45: hsl(347, 41%, 75%);
    --rose-50: hsl(347, 34%, 65%);
    --rose-65: hsl(345, 25%, 50%);
    --rose-75: hsl(343, 30%, 45%);
    --light-85: hsl(350, 30%, 5%);
  }
}

/* Charcoal-like */
@font-face {
  font-family: Virtue;
  src: url('fonts/virtue.ttf');
}

/* for icons */
@font-face {
  font-family: IconQuadPix;
  src: url('fonts/IconQuadPix.ttf');
}

/* loopy logo header font */
@font-face {
  font-family: Pacifico;
  src: url('fonts/Pacifico.ttf');
}

/* my go-to serif body text yay <3 */
@font-face {
  font-family: Merriweather;
  src: url('fonts/merriweather-regular.woff2') format('woff2'),
    url('fonts/merriweather-regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: Merriweather;
  src: url('fonts/merriweather-italic.woff2') format('woff2'),
    url('fonts/merriweather-italic.woff') format('woff');
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Merriweather;
  src: url('fonts/merriweather-bold.woff2') format('woff2'),
    url('fonts/merriweather-bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Merriweather;
  src: url('fonts/merriweather-bolditalic.woff2') format('woff2'),
    url('fonts/merriweather-bolditalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

html {
  background-color: var(--dark-10);
  background-image: url(img/pinkclouds-dark.png);
}

body {
  font-family: Merriweather, serif;
  line-height: 1.6;
  font-size: 13pt;
  max-width: 900px;
  margin: 0 auto;
  color: var(--light-85);
}

header {
  display: block;
}

header img {
  display: block;
  max-height: 400px;
  margin: auto;
}

header h1 {
  font-family: Pacifico;
  font-weight: normal;
  font-size: 72pt;
  margin: 0;
  color: var(--light-85);
}

header h2 {
  font-family: Merriweather;
  font-size: 24pt;
  text-align: center;
  margin-top: -20px;
  margin-right: 10px;
  color: var(--rose-65);
}

main p {
  padding: 5px;
  margin: 5px 0px;
}

a:link {
  color: var(--rose-75);
}

a:visited {
  color: var(--rose-65);
}

h1 {
  color: var(--rose-65);
  font-size: 25pt;
  text-align: center;
}

h2 {
  color: var(--rose-65);
  font-family: Virtue;
  font-size: 18pt;
  font-weight: normal;
}

h3 {
  color: var(--rose-65);
  font-size: 18pt;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid;
}

ul {
  margin: 10px;
}

flex {
  display: flex;
  gap: 10px;
}

.squareitem {
  width: 256px;
  text-align: center;
  padding: 16px;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.space-around {
  justify-content: space-around;
}

.space-evenly {
  justify-content: space-evenly;
}

.reverse {
  flex-direction: row-reverse;
}

.column {
  flex-direction: column;
}

.button88x31 {
  gap: 8px;
  margin: 24px auto;
  flex-wrap: wrap;
  flex-direction: row;
}

.button88x31>img {
  image-rendering: pixelated;
  width: 176px;
}

group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

gallery img {
  max-width: 300px;
  align-self: center;
  cursor: pointer;
}

/* img crop/positioning classes */
gallery .center-crop {
  width: 256px;
  height: 256px;
  object-fit: none;
  object-position: center;
  cursor: pointer;
}

gallery .left {
  width: 256px;
  height: 256px;
  object-fit: none;
  object-position: left;
  cursor: pointer;
}

gallery .right {
  width: 256px;
  height: 256px;
  object-fit: none;
  object-position: right;
  cursor: pointer;
}

gallery .top {
  width: 256px;
  height: 256px;
  object-fit: none;
  object-position: top;
  cursor: pointer;
}

gallery .bottom {
  width: 256px;
  height: 256px;
  object-fit: none;
  object-position: bottom;
  cursor: pointer;
}


/* making thumbnails clickable  */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 25px;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 80vh;
}

.close {
  position: absolute;
  top: 0px;
  right: 35px;
  color: #ffffff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#caption {
  color: white;
  margin: 20px;
  text-align: center;
}

titlebar {
  display: block;
  width: 100%;
  color: var(--light-85);
  text-align: center;
  font-size: 16pt;
  font-family: 'Virtue';
  background-image: url(img/bars.png);
  background-repeat: repeat-x;
  margin: -8px 0px 8px;
}

titlebar span {
  background-color: var(--dark-05);
  padding: 0px 8px;
}

nav {
  display: flex;
  flex: 1;
  padding: 10px;
  flex-flow: column wrap;
  background-color: var(--dark-05);
  border: 3px double var(--rose-45);
  box-shadow: 4px 4px 0px var(--dark-05);
}

#sidebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

nav a {
  display: flex;
  width: 100%;
  background-color: var(--dark-15);
  border: 1px solid var(--rose-50);
  border-radius: 3px;
  margin: 8px;
  padding: 4px 16px;
  font-family: Virtue;
  font-size: 14pt;
  text-decoration: none;
  box-shadow: inset -3px -3px 0px black;
}

nav a:hover {
  background-color: var(--dark-20);
  color: var(--light-85);
}

nav a:active {
  background-color: var(--dark-05);
  color: var(--rose-65);
  box-shadow: inset 2px 2px 0px black, inset -3px -3px 0px var(--dark-15);
}

nav button {
  display: flex;
  width: 100%;
  color: var(--rose-75);
  background-color: var(--dark-15);
  border: 1px solid var(--rose-50);
  border-radius: 3px;
  margin: 8px;
  padding: 4px 16px;
  font-family: Virtue;
  font-size: 14pt;
  text-decoration: none;
  text-align: left;
  line-height: 1.6;
  box-shadow: inset -3px -3px 0px black;
}

nav button:hover {
  background-color: var(--dark-15);
  color: var(--light-85);
}

nav button:active {
  background-color: var(--dark-05);
  color: var(--rose-65);
  box-shadow: inset 2px 2px 0px black, inset -3px -3px 0px var(--dark-15);
}

.icon {
  font-family: IconQuadPix;
  font-size: 16px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: none;
}

main {
  flex: 3;
  padding: 10px;
  background-color: var(--dark-05);
  border: 3px double var(--rose-45);
  box-shadow: 4px 4px 0px var(--dark-05);
}

main h1 {
  margin: 5px 0px;
}

.caption {
  font-style: italic;
  text-align: center;
  font-size: 11pt;
}

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

.float-left {
  width: 256px;
  flex-shrink: 0;
  float: left;
  padding: 10px 15px 5px 5px;
}

.float-right {
  width: 256px;
  flex-shrink: 0;
  float: right;
  padding: 10px 5px 5px 15px;
}

updates {
  display: block;
  border: 1px solid var(--rose-45);
  padding: 8px;
  width: 94%;
  margin: 8px auto;
}

updates h2 {
  display: block;
  width: fit-content;
  margin: -24px 0px 8px;
  padding: 0px 8px;
  background-color: var(--dark-05);
  font-family: Virtue;
  font-size: 16pt;
  font-weight: normal;
}

updates iframe {
  display: block;
  margin: 0 auto;
  width: 99%;
  height: 400px;
  border: 1px solid var(--rose-50);
}

table {
  table-layout: fixed;
  /*table outline*/
  border-spacing: 2px;
  margin: auto;
}

footer {
  display: block;
  text-align: center;
}

footer p {
  color: var(--rose-75);
  font-size: 12pt;
  margin: 16px;
  line-height: 1;
}

/* guestbook styling */
input,
textarea {
  border: 2px solid var(--rose-45);
  background-color: var(--dark-15);
  color: var(--light-85);
  font-size: 12pt;
  font-family: Virtue;
  padding: 8px;
  margin: 5px;
}

.guestbooks___input-container {
  width: 98%;
}

input[type="submit"] {
  border: 4px double var(--rose-50);
  border-radius: 3px;
  background-color: var(--dark-15);
  color: var(--rose-75);
  box-shadow: inset -3px -3px 0px black;
  font-size: 14pt;
  font-family: Virtue;
  font-weight: 700;
  padding: 6px 12px;
}

hr {
  border: 2px inset var(--dark-25);
}

/* scrollbar trick's */

/* for firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--rose-65) var(--dark-05);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--dark-05);
  border-radius: 2px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--rose-65);
  border-radius: 2px;
  border: 1px none #ffffff;
}

@media (prefers-color-scheme: light) {
  html {
    background-color: var(--dark-10);
    background-image: url(img/pinkclouds.png);
  }

  main {
    background-color: var(--dark-10);
    color: var(--light-85);
    box-shadow: 4px 4px 0px var(--rose-65);
  }

  header h2 {
    color: var(--rose-75);
  }

  titlebar {
    color: var(--light-85);
    background-image: url(img/bars-lite.png);
    background-repeat: repeat-x;
  }

  titlebar span {
    background-color: var(--dark-10);
    padding: 0px 8px;
  }

  nav {
    padding: 10px;
    background-color: var(--dark-10);
    border: 3px double var(--rose-45);
    box-shadow: 4px 4px 0px var(--rose-65);
  }

  nav a {
    background-color: var(--dark-10);
    border: 1px solid var(--rose-50);
    box-shadow: inset -3px -3px 0px var(--dark-20);
  }

  nav a:hover {
    background-color: var(--dark-15);
  }

  nav a:active {
    color: var(--light-85);
    background-color: var(--dark-25);
    box-shadow: inset 2px 2px 0px var(--dark-25), inset -3px -3px 0px var(--dark-15);
  }

  nav button {
    background-color: var(--dark-10);
    border: 1px solid var(--rose-50);
    box-shadow: inset -3px -3px 0px var(--dark-20);
  }

  a:link {
    color: hsl(348, 40%, 45%);
  }

  a:visited {
    color: hsl(348, 30%, 30%);
  }

  h1 {
    color: var(--rose-75);
  }

  h2 {
    color: var(--rose-75);
  }

  updates h2 {
    background-color: var(--dark-10);
  }

  input,
  textarea {
    background-color: var(--dark-05);
  }

  input[type="submit"] {
    background-color: var(--dark-10);
    box-shadow: inset -3px -3px 0px var(--dark-20);
  }

  input[type="submit"]:active {
    color: var(--light-85);
    background-color: var(--dark-25);
    box-shadow: inset 2px 2px 0px var(--dark-25), inset -3px -3px 0px var(--dark-15);
  }

}

@media only screen and (max-width: 800px) {
  header img {
    max-width: 100%;
  }

  header h1 {
    font-size: calc(100% + 10vw);
    /*/    margin: 5px -20px 5px 0;*/
  }

  header h2 {
    font-size: 13pt;
    margin-top: -10px;
    margin-right: 5px;
  }

  flex {
    flex-direction: column;
  }

  flex img {
    width: min-content;
  }

  nav {
    margin: 0 auto;
    width: 90%;
  }

  nav a {
    width: auto;
    display: inline-flex;
    margin: 8px 4px;
  }

  nav button {
    width: auto;
    display: inline-flex;
    margin: 8px 4px;
  }

  main {
    margin: 0 auto;
    width: 90%;
  }

  .reverse {
    flex-direction: column;
    /* because i don't want it reversed on mobile */
  }

  .squareitem {
    align-self: center;
  }

  .squareitem h3 {
    margin: 5px 0 10px;
  }

  .float-left {
    width: 150px;
    flex-shrink: 0;
    float: left;
    padding: 10px 20px 5px 5px;
  }

  .float-right {
    width: 150px;
    flex-shrink: 0;
    float: right;
    padding: 10px 5px 5px 20px;
  }
}