/* debug styling */
/* * {
  outline: dotted 1px red;
} */


/* Overwrite default browser styles */
html,
body {
  margin: 0;
  padding: 0;
  /* width: 100%;
  height: 100%;
  overflow: hidden; */
}

/* Container to hold the left pane and main content */
.container {
  display: flex;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(
    255,
    255,
    255,
    0.6
  ); /* Semi-transparent background for container */
  background-size: cover; /* Cover the entire viewport */
  overflow: hidden; /* Prevent the whole container from scrolling */
}

/* body styling */
body {
  font-family: sans-serif;
  background-image: url("assets/1670284497378674.jpg");
  background-size: cover; /* Cover entire viewport */
  background-attachment: fixed; /* Keep it fixed when scrolling */
  background-position: center; /* Center the image */
}

/* Left pane styling */
.left-pane {
  font-family: monospace;
  position: sticky;
  top: 0;
  right: 0; /* Make the left pane sticky from the right */
  width: 9.375em; /* 150px */
  background-color: #6e6863;
  padding: 1rem;
  height: 100vh; /* Full height of the viewport */
  box-shadow: -2em 0 5em rgba(0, 0, 0, 0.1); /* Adjust shadow direction */
  overflow-y: auto; /* Allow left pane to scroll if needed */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  flex-shrink: 0; /* Prevent the left pane from shrinking */
}

.left-pane p {
  color: #cfc3ae;
  font-size: 1.2em;
  padding: 0;
  margin-left: 0;
}

.left-pane a {
  font-size: 1.5em;
}

/* Links inside the left pane */
.left-pane ul {
  list-style-type: none;
  padding: 0;
}

.left-pane ul li {
  margin-bottom: 0.8em;
}

.left-pane ul li a {
  color: #cfc3ae;
  font-size: 1.5em;
  text-decoration: none;
  transition: color 0.3s ease, color 0.3s ease;
}

.left-pane ul li a:hover {
  color: #e2ad82;
}

/* Main content styling */
main {
  flex-grow: 1;
  max-width: 45rem; /* Set a max width for the content area */
  margin: auto; /* Center the content */
  padding: 0;
  overflow-y: auto; /* Allow scrolling for main content */
  box-sizing: border-box;
  background-color: #97877a; /* Solid background color for content */
  height: 100vh; /* Set main height to the full viewport height */
  overflow-y: scroll; /* Allow only the main content to scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

figure {
  max-width: 35rem;
  margin: 0;
}

h1 {
  width: 80%;
  color: #381e1e;
  margin: 1.25em auto; /* 20px */
  text-align: center;
  font-size: 3.5em;
  margin-top: 0.3125em;
  margin-bottom: 0em;
}

h2 {
  width: 80%;
  color: #381e1e;
  margin: 1.25em auto; /* 20px */
  text-align: left;
  font-size: 2em;
}

h2.music-folio
{
  font-size: 1.4em;
}

h3 {
  width: 80%;
  color: #381e1e;
  margin: 1.25em auto; /* 20px */
  text-align: center;
  font-size: 1.5em;
}

h4 {
  width: 80%;
  color: #381e1e;
  margin: 1.25em auto; /* 20px */
  text-align: center;
  font-size: 1.25em;
  margin-bottom: 1em;
}

/* Paragraph styling with the same width as the image */
p {
  font-size: 18px;
  width: 80%;
  margin: 1.25em auto; /* 20px */
  color: #381e1e;
  text-align: justify;
}

p.contact {
  text-align: center;
  width: 58%;
}

div.contact {
  text-align: center;
  width: 50%;
  margin: auto; /* 20px */
}

/* Styling for the links inside the contact div */
div.contact a {
  display: inline-block;
  font-size: 1.2em;
  margin: 5px; /* Add spacing between icons */
  text-decoration: none;
  transition: transform 0.3s ease;
}

div.contact a:hover {
  transform: scale(1.1); /* Slight zoom on hover */
}

div.contact a img {
  transition: transform 0.3s ease;
}

div.contact a img:hover {
  transform: scale(1.1); /* Slight zoom on hover */
}

p.content-with-image {
  width: 100%;
} 

/* Styling for the copyright paragraph */
p.copyright {
  font-family: monospace;
  font-size: 0.75em; /* 12px */
  color: #aaa;
  text-align: center;
  position: bottom;
  bottom: 0em; /* 0px */
  width: 100%;
  margin: 0;
}

/* Paragraph styling inside details */
details p{
  width: auto; /* Allow paragraphs inside details to take full width */
  margin: 0.3em 0; /* 10px */
  color: #bbb;
  text-align: justify;
  padding-left: 1.25em; /* 20px */
  padding-right: 1.25em; /* 20px */
}

a {
  color: #333;
  font-family: monospace;
  text-decoration: underline;
  transition: color 0.3s ease, color 0.3s ease;
  transition: transform 0.3s ease;
}

a:hover {
  color: #e2ad82;
  text-decoration: underline;
  transform: scale(1.1); /* Slight zoom on hover */
}

/* Styling for details element */
details {
  background-color: #6e6863;
  border: 0em solid #373431; /* 0px */
  border-radius: 0.3125em; /* 5px */
  padding: 0.625em; /* 10px */
  margin: 1.25em auto; /* 20px */
  width: 80%;
  box-shadow: 0.125em 0.125em 0.3125em rgba(0, 0, 0, 0.1); /* 2px 2px 5px */
}

/* Styling for links inside details element */
details a {
  color: #bbb;
  text-decoration: underline;
  transition: color 0.3s ease, color 0.3s ease;
  transition: transform 0.3s ease;
}

/* Styling for summary element */
details summary {
  color: #333;
  font-weight: bold;
  cursor: pointer;
  padding: 0.3125em; /* 5px */
  outline: none;
}

details[open] summary {
  border-bottom: 0em solid #333; /* 0px */
  margin-bottom: 0.625em; /* 10px */
}

/* Style for the image */
img {
  display: block;
  margin: 1.25em auto; /* 20px */
  border: 0em solid #6e6863; /* 0px */
  border-radius: 0.625em; /* 10px */
  box-shadow: 0.125em 0 0.3125em rgba(0.1, 0.1, 0.1, 0.1); /* 2px 0 5px */
}

img.svg-decoration {
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: 0 0 0 0;
}

img.social-badge {
  border-radius: 0em; /* 0px */
  margin: 0.1em; /* 2px */
  box-shadow: 0 0 0 0; /* overwrite parent box shadow */ 
}

/* Styling for code blocks */
code {
  font: space-mono-regular;
  background-color: #f4f4f4;
  padding: 0.3125em; /* 5px */
  border-radius: 0.3125em; /* 5px */
  font-family: monospace;
  white-space: pre; /* Maintain verbatim spacing */
  width: 60%;
  display: block;
  margin: 0.625em auto; /* 10px */
}

/* Styling for blockquote */
blockquote {
  padding: 0.625em; /* 10px */
  border-right: 0.3125em solid #6e6863; /* 5px */
  margin: 1.25em auto; /* 20px */
  width: 60%;
  max-width: 32.8125em; /* 525px */
  text-align: right;
}

/* Styling for tables */
table {
  border-collapse: collapse;
  width: 90%;
  max-width: 32.8125em; /* 525px */
  margin: 1.25em auto; /* 20px */
}

th,
td {
  border: 0.0625em solid #333; /* 1px */
  padding: 0.625em; /* 10px */
  text-align: center;
}

th {
  background-color: #6e6863;
  color: #fff;
}

/* Hide scrollbar for Chrome, Safari, and Opera */
::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for IE and Edge */
  -ms-overflow-style: none;
}

/* Grid container styling */
.grid-container,
.pinned-project-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625em; /* 10px */
  margin-top: 1.25em; /* 20px */
  max-width: 32.8125em; /* 525px */
  margin-left: auto;
  margin-right: auto;
}

.music-folio-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625em; /* 10px */
  width: 100%;
  margin: auto;
  max-width: fit-content;
}

.grid-item {
  background-color: #6e6863;
  border: 0em solid #373431; /* 0px */
  border-radius: 0.3125em; /* 5px */
  padding: 0.625em; /* 10px */
  margin: 0.625em auto; /* 10px */
  width: 100%;
  max-width: 12.5em; /* 200px */
  box-shadow: 0.125em 0.125em 0.3125em rgba(0, 0, 0.1, 0.1); /* 2px 2px 5px */
}

.grid-container a,
.pinned-project-grid-container a,
.music-folio-grid-container a {
  color: #333;
  font-size: 1.2em;
  text-decoration: underline;
  transition: background-color 0.3s ease, color 0.3s ease;
  transition: transform 0.3s ease;
}

.grid-container a:hover,
.pinned-project-grid-container a:hover,
.music-folio-grid-container a:hover {
  background-color: #e2ad82;
  text-decoration: underline;
  transform: scale(1.1); /* Slight zoom on hover */
}

details h4 {
  color: #bbb;
  text-align: left;
  margin-left: 1.25em; /* 20px */
  border-bottom:#381e1e 1px solid; 
}

details p {
  padding-bottom: .5em;
}

figure.contact {
  margin: auto;
    padding-bottom: 2.5rem;
}

/* Styling for social badge links */
div.contact a.social-badge,
a.music-folio-badge {
  display: inline-block;
  background-color: #6e6863;
  color: #fff;
  padding: 0.625em 0.9375em; /* 10px 15px */
  border-radius: 0.3125em; /* 5px */
  text-decoration: none;
  margin: 0.3125em; /* 5px */
  transition: background-color 0.3s ease, color 0.3s ease;
}

a.music-folio-badge {
  text-align: center;
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-size: 0.875em; /* 14px */
  transition: background-color 0.3s ease, color 0.3s ease;
}

a.music-folio-badge:hover {
  background-color: #e2ad82;
  color: #333;
}

div.contact a.social-badge:hover {
  background-color: #e2ad82;
  color: #333;
}

iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin: 1.25em auto; /* 20px */
  border: 0em solid #6e6863; /* 0px */
  border-radius: 0.625em; /* 10px */
  box-shadow: 0.125em 0 0.3125em rgba(0.1, 0.1, 0.1, 0.1); /* 2px 0 5px */
}

audio::-webkit-media-controls-panel {
  background-color: #6e6863;
  color: #e2ad82;
  transition: background-color 0.3s ease, color 0.3s ease;
  transition: color 0.3s ease, color 0.3s ease;
}

audio::-webkit-media-controls-panel:hover {
  background-color: #e2ad82;
  color: #333;
}

.music-folio {
  text-align: center;
  padding-top: 0em; /* 0px */
  padding-left: 0em; /* 0px */
  margin: auto;
}

.music-folio-grid-item {
  padding: 0; /* 10px */
  margin: auto; /* 10px */
  width: 100%;
  max-width: 18.75em; /* 300px */
}

.content-with-image {
  max-width: 32.8125em; /* 525px */
  margin: 1.25em auto; /* 20px */
}

.content-with-image img {
  float: right; /* Make the image float to the right */
  margin-left: 1.25em; /* 20px */
  margin-bottom: 0.625em; /* 10px */ /* Add some space between the image and the text */
  border-radius: 0.625em; /* 10px */
  box-shadow: 0.125em 0 0.3125em rgba(0.1, 0.1, 0.1, 0.1); /* 2px 0 5px */
  max-width: 12.5em; /* 200px */
  height: auto;
}

figure.pinned-project-grid-container {
  border-top: #381e1e 1.5px solid;
  border-bottom: #381e1e 1.5px solid; 
} 


/* Hide copyright paragraph on mobile */
@media (min-width: 801px) {
  footer {
    display: none;
  }

  p.copyright-mobile {
    display: none;
  }
}

/* testing mobile style */
@media (max-width: 800px) {
  * {
    color: inherit;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3, h4 {
    font-size: 1.2em;
  }

  p, a {
    font-size: 1em;
  }

  /* main {
    margin-bottom: 2rem; /* Add space below main 
  } */

  /* footer {
    font-family: monospace;
    width: 100%;
    background-color: #6e6863;
    padding: 1rem;
    box-shadow: 0 -2em 5em rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    color: #cfc3ae;
  } */

  .left-pane {
    width: 100%;
    height: auto;
    position: relative;
    box-shadow: none;
  }

  .left-pane ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em; /* Add gap between items */
  }

  .left-pane ul li {
    flex: 1 1 20%; /* Adjust the width of each item */
    margin-bottom: 0em;
  }
  
  p.copyright {
    display: none;
  }

  .container {
    flex-direction: column;
  }

  main {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .grid-container, .pinned-project-grid-container, .music-folio-grid-container {
    grid-template-columns: 1fr;
    max-width: 80%;
    border-top: #381e1e 1px solid;
    border-bottom: #381e1e 1px solid; 
  }
  .grid-item {
    max-width: 100%;
  }

  #current-session, #real-time-clock {
    display: none;
  }
}

/* Google Fonts */

.atkinson-hyperlegible-regular {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.atkinson-hyperlegible-bold {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.atkinson-hyperlegible-regular-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.atkinson-hyperlegible-bold-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.spectral-extralight {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-style: normal;
}

.spectral-light {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: normal;
}

.spectral-regular {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
}

.spectral-medium {
  font-family: "Spectral", serif;
  font-weight: 500;
  font-style: normal;
}

.spectral-semibold {
  font-family: "Spectral", serif;
  font-weight: 600;
  font-style: normal;
}

.spectral-bold {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: normal;
}

.spectral-extrabold {
  font-family: "Spectral", serif;
  font-weight: 800;
  font-style: normal;
}

.spectral-extralight-italic {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-style: italic;
}

.spectral-light-italic {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: italic;
}

.spectral-regular-italic {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: italic;
}

.spectral-medium-italic {
  font-family: "Spectral", serif;
  font-weight: 500;
  font-style: italic;
}

.spectral-semibold-italic {
  font-family: "Spectral", serif;
  font-weight: 600;
  font-style: italic;
}

.spectral-bold-italic {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: italic;
}

.spectral-extrabold-italic {
  font-family: "Spectral", serif;
  font-weight: 800;
  font-style: italic;
}

.playfair-display-regular {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-display-extra-thin {
  font-family: "Noto Sans Display", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
  "wdth" 62.5;
}

.bodoni-moda-regular {
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}