/* 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." */
/* FONT IMPORT */
@import url('https://fonts.bunny.net/css?family=amethysta:400');
@import url('https://fonts.bunny.net/css?family=clicker-script');
  
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

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

  /* Text Colors: */
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --link-color: #94003A;
  --link-color-hover: #500B66;

  /* Text: */
  --font: 'Amethysta', sans-serif;
  --heading-font: 'Amethysta', sans-serif;
  --font-size: 17px;
  

  /* Other Settings: */
  --margin: 14px;
  --padding: 20px;
  --border: 1px dashed #000000;
  --round-borders: 4px;
  --sidebar-width: 214px;
}

/* -------------------------------------------------------- */
/* 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: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
}

body {
  background-image: url("images/kitabg.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

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

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

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

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

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header" auto "main" auto "footer" auto / 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 {
  grid-area: header;
  background: none;
  text-align: center;
  padding: 40px 0 20px;
}

.site-title {
  font-family: 'Clicker Script', cursive;
  font-size: 6.5em;
  color: var(--link-color);
  margin: 0;
}

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

.stickers {
  position: absolute;
  top: 0;
  height: 100%;
  width: 200px;
  pointer-events: none;
  z-index: -1;
}

.stickers.left {
  left: 0;
}

.stickers.right {
  right: 0;
}

.sticker {
  position: absolute;
  max-width: 150px;
  height: auto;
  pointer-events: auto;
}

/* 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.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

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

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

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


/* postcard! */
.postcard-wrap {
  position: relative;
  max-width: 600px;
  margin: 100px auto 60px;
}
.scrap-bg {
  transform-origin: center center;
  position: absolute;
  top:-200px;
  right: -50px;
  width: 500px;
  z-index: 0;              /* behind all  */
  transform: rotate(90deg) scaleX(-1);
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2));
}

.envelope {
  transform-origin: center center;
  position: absolute;
  top:10px;
  left: -50px;
  width: 500px;
  z-index: 1;              /* behind the postcard  */
  transform: rotate(-20deg);
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2));
}

.postcard {
  position: relative;
  background-image: url("images/postcard-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 3 / 2;
  padding: 80px 60px 60px;
  display: flex;
  filter: drop-shadow(3px 6px 10px rgba(0,0,0,0.25));
  z-index: 1;               /* stays above the scrap */
}

.stamp {
  position: absolute;
  top: 10px;
  right: 5px;
  width: 100px;
  z-index: 2;
}

.postcard-tape {
  position: absolute;
  top: 5;
  left: -10px;
  width: 90px;
  transform: rotate(-30deg);
  z-index: 2;
}

.postcard-title {
  position: absolute;
  top: 15px;
  left: 40px;
  font-family: var(--heading-font);
  font-size: 2em;
  color: var(--dark, #a63356);
  text-decoration: underline dotted;
}

.postcard-left {
  flex: 1;
  padding-right: 20px;
  font-family: monospace;
  font-size: 0.85em;
  color: #333;
}

.postcard-right {
  flex: 1;
  padding-left: 20px;
  position: relative;
}

.postcard-address {
  font-family: var(--heading-font);
  color: var(--dark, #a63356);
  margin-top: 60px;
  font-size: 0.95em;
}

.nextpage-btn {
  position: absolute;
  bottom: -10px;
  right: 10px;
  background: var(--med, #ef5077);
  color: #fff;
  border: none;
  padding: 6px 14px;
  font-style: italic;
  cursor: pointer;
  border-radius: 3px;
}

/* navigation icons!*/

.nav-pic {
  position: absolute;
  z-index: 3;
  display: block;
  transition: transform 0.15s ease;
}

.nav-pic img {
  width: 100px;
  height: auto;
  filter: drop-shadow(1px 3px 4px rgba(0,0,0,0.25));
}


.nav-pic-5 img{
  width: 90px;
  height: auto;
  filter: drop-shadow(1px 3px 4px rgba(0,0,0,0.25));
}

.nav-pic-6 img{
  width: 160px;
  height: auto;
  filter: drop-shadow(1px 3px 4px rgba(0,0,0,0.25));
}

.nav-pic:hover {
  transform: scale(1.1) rotate(-5deg);
  z-index: 999;
}

.nav-pic-4:hover,
.nav-pic-5:hover,
.nav-pic-6:hover{
  transform: scale(1.1) rotate(5deg);
  z-index: 999;
}

/* Individual positions */
.nav-pic-1 {
  top: -20px;
  left: -80px;
}

.nav-pic-2 {
  top: 150px;
  left: -150px;
}

.nav-pic-3 {
  bottom: -20px;
  left: -80px;
}

.nav-pic-4 {
  top: 0px;
  right: -170px;
}

.nav-pic-5 {
  bottom: 160px;
  right: -100px;
}

.nav-pic-6{
  bottom:-20px;
  right:-180px;
}


.nav-pic-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--med, #ef5077);
  color: #fff;
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.nav-pic:hover .nav-pic-label {
  opacity: 1;
}


/* content*/
.currently-box {
  position: relative;
  max-width: 550px;
  margin: 60px auto;
  background: var(--sidebar-background-color);
  border-radius: 8px;
  padding: 30px 20px 40px;
  overflow: visible;
  z-index: 1;
}

.currently-title {
  font-family: var(--heading-font);
  color: var(--link-color);
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 10px;
}

.currently-date {
  display: block;
  font-size: 0.5em;
  font-style: italic;
  color: var(--text-color);
}

.currently-doily {
  position: absolute;
  top: -10px;
  left: 40px;
  transform: translateX(-50%);
  width: 400px;
  z-index: -1;
  opacity: 0.8;
}

.currently-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--content-background-color);
  border-radius: 20px;
  padding: 10px 18px;
  margin-bottom: 10px;
  border-left: 6px solid var(--link-color);
}

.currently-icon {
  font-size: 1.3em;
  flex-shrink: 0;
}

.currently-label {
  font-style: italic;
  color: var(--link-color);
  font-weight: bold;
  min-width: 100px;
}

.currently-value {
  color: var(--text-color);
}

.currently-value a {
  color: var(--text-color);
  text-decoration: underline wavy;
}

.currently-value a:hover {
  color: var(--link-color-hover);
}
.currently-lace-bottom {
  position: absolute;
  bottom: -280px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.tape {
  position: absolute;
  top: 5;
  right: -30px;
  width: 120px;
  transform: rotate(30deg);
  z-index: 2;
}



.section-divider {
  width: 100%;
  height: 9px;
  background-image: url("images/divider2c.gif");
  background-repeat: repeat-x;
  background-position: center;
  margin: 40px 0;
}
/*bag!*/
bag-wrap {
  position: relative;
  max-width: 480px;
  margin: 100px auto 60px; 
}

.bag-title {
  font-family: 'Clicker Script', cursive;
  font-size: 3em;
  text-align: center;
}

.bag {
  position: relative;
  background-image: url("images/bag/bag.png");
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 3 / 2;
  padding: 60px 60px 60px;  
  display: flex;
  filter: drop-shadow(3px 6px 10px rgba(0,0,0,0.25));
  z-index: 1;
}
.item{
  position: absolute;
  z-index: 1;
  display: block;
  transition: transform 0.15s ease;
}

.item img {
  width: 120px;
  height: auto;
  filter: drop-shadow(1px 3px 4px rgba(0,0,0,0.25));
}

.bottle img {
  width: 150px;
  height: auto;
}

.sunnies img{
  width: 200px;
  height: auto;
}

.wallet img{
  width: 130px
}

.pouch img{
  width: 150px
}

.headphones img{
  width: 150px;
}

.lipoil img{
  width: 150px;
}

.lipbalm img{
  width: 80px;
}

.item:hover {
  transform: scale(1.1) rotate(-5deg);
  z-index: 2;
}

.charm1:hover,
.mints:hover,
.pens:hover,
.lipoil:hover,
.lipbalm:hover,
.pouch:hover {
  transform: scale(1.1) rotate(5deg);
}

/* position */
.charm1 {
  bottom: 20px;
  right: 60px;
}

.charm2 {
  bottom: 20px;
  left: 60px;
}

.bottle{
  top:200px;
  left:0px;
}

.headphones{
  top:40px;
  left: 90px;
}

.mints{
  top:80px;
  right:240px;
}

.journal{
  top: 30px;
  left: 280px;
}

.pens{
  top: 120px;
  right: 80px;
}


.wallet{
  top: 280px;
  left:200px;
}

.lipoil{
  top:200px;
  right: 200px;
}

.lipbalm{
  bottom:100px;
  right: 180px;
}

.pouch{
  bottom: 200px;
  right: 80px;
}

.sunnies{
  top:200px;
  left:380px;
}


.bag-item-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--med, #ef5077);
  color: #fff;
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 50;
}

.item:hover .bag-item-label {
  opacity: 1;
  z-index: 100;
}


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

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

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

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

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

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

.notfound-box {
  max-width: 500px;
  text-align: center;
  padding: 40px 30px;
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
}


/* back button*/

.back-postcard {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 500;
  display: block;
  transition: transform 0.15s ease;
}

.back-postcard img {
  width: 90px;
  height: auto;
  filter: drop-shadow(2px 3px 5px rgba(0,0,0,0.3));
  transform: rotate(-6deg);
}

.back-postcard:hover img {
  transform: rotate(-2deg) scale(1.05);
}

.back-postcard-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%); 
  white-space: nowrap;
  background: var(--link-color);
  color: #fff;
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.back-postcard:hover .back-postcard-label {
  opacity: 1;
}


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