/* ========================================================
   KAYLA'S CREATIONZ
   COMPLETE CSS
======================================================== */


/* ========================================================
   VARIABLES
======================================================== */

:root {

  --background-color: #ffd4e7;

  --content-background-color: #ffd1de;

  --sidebar-background-color: #ffbae6;

  --text-color: #ff00b3;

  --sidebar-text-color: #c90068;

  --link-color: #ff7ac1;

  --link-color-hover: #52008c;

  --font: Helvetica, sans-serif;

  --heading-font: "Brush Script MT", cursive;

  --font-size: 16px;

  --margin: 10px;

  --padding: 20px;

  --border: 10px solid #fab6dd;

  --round-borders: 10px;

  --sidebar-width: 250px;

}


/* ========================================================
   BASIC RESET
======================================================== */

* {
  box-sizing: border-box;
}


html,
body {

  margin: 0;

  padding: 0;

}


html {
  min-height: 100%;
}


body {

  min-height: 100vh;

  padding: var(--margin);

  font-size: var(--font-size);

  color: var(--text-color);

  font-family: var(--font);

  line-height: 1.2;

  background-color: var(--background-color);

  background-image:
    url("ChiiPinkGingham2.png");

  background-repeat: repeat;

}


::selection {

  background: rgba(0, 0, 0, 0.2);

}


mark {

  background-color: inherit;

  color: var(--text-color);

  text-shadow:
    1px 1px 4px var(--link-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;

}


/* ========================================================
   MAIN LAYOUT
======================================================== */

.layout {

  /*
     Center the complete website.
  */

  width: 1000px;

  max-width: calc(100vw - 20px);

  margin: 0 auto;


  /*
     Three-column grid:

     LEFT | MAIN | RIGHT
  */

  display: grid;

  grid-template-columns:

    var(--sidebar-width)

    minmax(0, 1fr)

    var(--sidebar-width);


  grid-template-areas:

    "header header header"

    "leftSidebar main rightSidebar"

    "footer footer footer";


  /*
     Horizontal space between the columns.
  */

  column-gap: var(--margin);


  /*
     IMPORTANT:

     There is NO vertical grid gap.

     The header gets its own bottom margin,
     while the content columns touch the footer.
  */

  row-gap: 0;


  /*
     This makes the left and right sidebars
     stretch to exactly the same row height
     as the main content.
  */

  align-items: stretch;

}


/* ========================================================
   HEADER
======================================================== */

header {

  grid-area: header;

  width: 100%;

  margin-bottom: var(--margin);

  border: var(--border);

  border-radius: var(--round-borders);

  background: var(--content-background-color);

  overflow: hidden;

}


/* Banner */

.header-image {

  width: 100%;

  line-height: 0;

}


.header-image img {

  display: block;

  width: 100%;

  height: auto;

}


/* Header text area */

.header-content {

  width: 100%;

  padding: var(--padding);

  text-align: center;

}


/* Header title */

.header-title {

  width: 100%;

  margin: 0;

  padding: 0;

  font-family: var(--heading-font);

  font-size: 1.5em;

  font-weight: bold;

  text-align: center;

}


/*
   Main title.

   The width and text-align force it to stay
   centered regardless of surrounding content.
*/

.header-main-title {

  display: block;

  width: 100%;

  margin: 0 auto;

  text-align: center;

}


/*
   Warning.

   Completely separate from the title so it
   cannot become offset.
*/

.construction-warning {

  display: block;

  width: 100%;

  margin: 15px auto 0;

  padding: 0;

  font-family: var(--font);

  font-size: 0.75em;

  font-weight: normal;

  line-height: 1.4;

  text-align: center;

}


/* ========================================================
   SIDEBARS
======================================================== */

aside {

  /*
     CRITICAL:

     The grid item stretches to the full height
     of the content row.
  */

  align-self: stretch;


  /*
     Do NOT use a fixed height here.
  */

  height: auto;


  padding: var(--padding);

  border: var(--border);

  border-radius: var(--round-borders);

  background: var(--sidebar-background-color);

  color: var(--sidebar-text-color);

  overflow: hidden;

}


.left-sidebar {

  grid-area: leftSidebar;

}


.right-sidebar {

  grid-area: rightSidebar;

}


/* ========================================================
   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 {

  display: inline-block;

  padding: 5px 10px;

}


/* ========================================================
   SIDEBAR TITLES
======================================================== */

.sidebar-title {

  font-family: var(--heading-font);

  font-size: 1.2em;

  font-weight: bold;

}


.sidebar-section:not(:last-child) {

  margin-bottom: 3em;

}


.sidebar-section ul,
.sidebar-section ol {

  padding-left: 1.5em;

}


/* ========================================================
   SIDEBAR IMAGES
======================================================== */

.full-width-image {

  display: block;

  width: 100%;

  height: auto;

}


.sidebar-section img {

  max-width: 100%;

}


/* ========================================================
   SITE BUTTON
======================================================== */

.site-button {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}


.site-button textarea {

  width: 100%;

  max-width: 210px;

  font-family: monospace;

  font-size: 0.7em;

  resize: vertical;

}


/* ========================================================
   MAIN CONTENT
======================================================== */

main {

  grid-area: main;

  min-width: 0;

  padding: var(--padding);

  background: var(--content-background-color);

  border: var(--border);

  border-radius: var(--round-borders);

  line-height: 1.5;

  overflow-wrap: break-word;

}


main p {

  margin: 0.75em 0;

}


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 HEADINGS
======================================================== */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {

  font-family: var(--heading-font);

  line-height: 1.5;

}


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;

}


/* ========================================================
   CENTERED MAIN HEADINGS
======================================================== */

.center-title {

  display: block;

  width: 100%;

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}


/* ========================================================
   INTRO ROWS
======================================================== */

.intro-row {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin: 0.75em 0;

}


.intro-row img {

  flex: 0 0 auto;

}


/* ========================================================
   HORIZONTAL RULE
======================================================== */

main hr {

  border: 0;

  border-top: var(--border);

  margin: 1.5em 0;

}


/* ========================================================
   TWO COLUMNS
======================================================== */

.two-columns {

  display: flex;

  width: 100%;

}


.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: inline-block;

  width: auto;

  height: auto;

  max-width: 100%;

}


/* ========================================================
   FOOTER
======================================================== */

footer {

  grid-area: footer;

  width: 100%;

  min-height: 100px;

  margin: 0;

  padding: 20px;

  border: var(--border);

  border-radius: var(--round-borders);

  background: var(--content-background-color);

  font-size: 0.75em;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

}


/*
   Copyright is centered inside the footer.
*/

.copyright {

  width: 100%;

  text-align: center;

}


/* ========================================================
   RINI FIXED OVERLAY
======================================================== */

/*
   IMPORTANT:

   Rini is OUTSIDE the .layout.

   She therefore cannot change the height of the
   left sidebar, right sidebar, main content, or footer.

   JavaScript also applies these same positioning
   values so the overlay remains anchored to the
   browser viewport.
*/

#rini-site-buddy {

  position: fixed;

  right: 15px;

  bottom: 15px;

  left: auto;

  top: auto;


  /*
     Original Rini image is 150px tall.
  */

  width: 260px;

  padding: 8px;


  /*
     Keep Rini above the website.
  */

  z-index: 999999;


  /*
     Transparent outside container.
  */

  background: transparent;

  border: none;

  text-align: center;

  pointer-events: auto;

}


/* ========================================================
   RINI TITLE
======================================================== */

.rini-title {

  display: block;

  width: 100%;

  margin-bottom: 5px;

  padding: 6px;

  background: rgba(255, 186, 230, 0.95);

  border: 5px solid #fab6dd;

  border-radius: 10px;

  font-family: var(--heading-font);

  font-size: 1.25em;

  font-weight: bold;

  text-align: center;

}


/* ========================================================
   RINI IMAGE
======================================================== */

.rini-image-container {

  width: 100%;

  text-align: center;

  background: transparent;

}


.rini-image {

  display: block;

  width: auto;

  height: 150px;

  max-width: none;

  margin: 0 auto;

}


/* ========================================================
   RINI DESCRIPTION
======================================================== */

.rini-description {

  display: block;

  width: 100%;

  margin-top: 5px;

  padding: 8px;

  background: rgba(255, 186, 230, 0.95);

  border: 5px solid #fab6dd;

  border-radius: 10px;

  font-size: 0.85em;

  line-height: 1.3;

  text-align: center;

}


/* ========================================================
   SKIP TO CONTENT
======================================================== */

#skip-to-content-link {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 99999999999;

  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;

}


#skip-to-content-link:focus,
#skip-to-content-link:focus-within {

  transform: translateY(0);

}


/* ========================================================
   MOBILE
======================================================== */

@media (max-width: 800px) {


  body {

    padding: 5px;

    font-size: 14px;

  }


  .layout {

    width: 100%;

    max-width: 100%;

    grid-template-columns: 1fr;

    grid-template-areas:

      "header"

      "leftSidebar"

      "main"

      "rightSidebar"

      "footer";

    column-gap: 0;

    row-gap: 8px;

  }


  header {

    margin-bottom: 0;

  }


  aside {

    height: auto;

  }


  .two-columns {

    flex-wrap: wrap;

  }


  .two-columns > * {

    flex: 1 1 100%;

    padding-left: 0 !important;

    padding-right: 0 !important;

  }


  /*
     Rini remains fixed to the viewport,
     but is reduced slightly on small screens
     so she doesn't cover the entire page.
  */

  #rini-site-buddy {

    right: 5px;

    bottom: 5px;

    width: 210px;

  }


  .rini-image {

    height: 150px;

  }


  .rini-description {

    font-size: 0.75em;

  }

}