/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@font-face {
    font-family: "Fatfinger";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fatfinger.ttf");
  }  
  
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

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

  /* Text Colors: */
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --link-color: #353535;
  --link-color-hover: #ec9808;
  --mainlink-color: #000 ;
  --mainlink-color-hover: #ec9808 ;

  /* Text: */
  --font: Georgia, serif;
  --heading-font: Fatfinger, sans-serif;
  --font-size: 14px;

  /* Other Settings: */
  --margin: 10px;
  --padding: 20px;
  --border: 2px solid #000000;
  --round-borders: 10px;
  --sidebar-width: 250px;
}

/* -------------------------------------------------------- */
/* 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);
  background-image: url("../graphics/collage_bg.webp");
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: auto;
  
}

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

.middle{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -2pt;
  margin-bottom: 15pt;
}

/* 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 PAGE Links: */
.pagemain a {
  text-decoration: none;
}

.pagemain a,
a:visited {
  color: var(--mainlink-color);
}

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


#guestbook{
  width:100%;
}

/* -------------------------------------------------------- */
/* 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);
  background-image: url("../graphics/static_bg.webp");
  background-attachment: fixed;
  border: var(--border);
  border-radius: var(--round-borders);
}

.pagemain {
  height: 450pt;
  width: 300pt;
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100pt;
  background-color:#a5a5a5ec;
  border: var(--border);
  border-radius: var(--round-borders);

}



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

header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: #000;
  background-image: url("../graphics/static_bg.webp");
  background-attachment: fixed;
}

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

.header-title {
  font-family: var(--heading-font);
  color:#ec9808;
  font-size: 2em;
  font-weight: bold;
}

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

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

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 0px;
}

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

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}


#statuscafe {
    font-size: small;
    padding: 0em;
    background-color: none;
    border: 0px solid rgb(0, 0, 0);
}

hr {
  border: 0;
  border-top: var(--border);
  margin: 1.0em 0;
}

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

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: #000;
  display: flex;
  justify-content: center;
  color:#686868
}

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

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

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

/* Fixed sidenav, full height */
.sidenav {
  width: 100%;
  z-index: 1;
  font-size: medium;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 1%;
  padding-bottom: 1%;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 2pt 2pt 6pt 10pt;
  font-size: medium;
  text-decoration: none;
  color:#000000;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color:#ec9808;
}

/* Mainnav content */
.mainnav {
  margin-left: 200px; /* Same as the width of the sidenav */
  padding: 0px 0px;
}

/* Add an active class to the active dropdown button */
.active {
  color:#ec9808;
}

.dropdown-btn {
  font-family:Georgia, 'Times New Roman', Times, serif;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  padding-left: 13px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

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

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

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

.left-col {
  min-width: 35%;
}

.right-col {
  min-width: 65%
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

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


/* -------------------------------------------------------- */
/* CONTENT IMAGES GALLERY */
/* -------------------------------------------------------- */
.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  width:100%; /* this can be modified to make the gallery wider */
}

.gallery img {
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
}

/* this is the div which CROPS every image */
.gallery > div {
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(1.25); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}

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