/* Glass CSS class provided by: https://www.tyleo.com/html-glass.html ; Modified by Harry.*/
.glass {
  /* Blur effect */
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  
  /* MUST be a single line or else it won't work. */
  box-shadow: inset 0px -0.5px 1px rgba(255, 255, 255, 0.1), inset 0px +0.5px 1px rgba(255, 255, 255, 0.025), inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025), inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025), 0px 4px 6px rgba(0, 0, 0, 0.25);

  position: relative;
  border-radius: 5px;
  /* Hide the corners of the header */
  overflow: hidden;
}

.glass::before {
  /* Make the element render */
  content: "";
  /* Apply the background image */
  background-image: url(images/lightrefraction.png);
  background-repeat: repeat;
  background-size: 750px;
  /* Adjust the intensity */
  opacity: 0.2;
  /* Fill the background space */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  /* Render behind other children */
  z-index: -1;
  /* Fix the reflection to the screen */
  background-attachment: fixed;
  background-blend-mode: multiply;
}

/* Styling by Harry Hocker */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { 
  scroll-behavior: smooth; 
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: row;
  background-image: url("images/monz_skin.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

section {
  margin-bottom: 2vw;
  padding: 2rem;
}


h1 {
  font-size: xx-large;
  margin: 0;
  padding: 1.5rem;
}

h2 {
  font-size: x-large;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
}

p {
  margin: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: large;
  text-align: justify;
}


.column {
  display: flex;
  flex-direction: column;
}
.left {
  width: 15%;
  min-width: fit-content;
}



.sidebar {
  background-color: rgba(200, 200, 200, 0.1);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar ul {
  list-style-type: none;
  width: 100%;
  text-align: center;
}
.sidebar ul li {
  margin: 2rem;
  border-radius: 5rem;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.sidebar ul li:hover {
  transform: scale(1.1, 1.1);
  transition-duration: 0.5s;
  transition-timing-function: ease;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
}
.sidebar ul li:active {
  box-shadow: none;
  transition-duration: 0.1s;
  transform: none;
}


.sidebar ul li a {
  display: block;
  padding: 1rem;
  color: #000000;
  text-decoration: none;
  font-size: xx-large;
}

.fullImage {
  max-width: 100%;
  border-radius: 2.5rem;
  max-height: 85vh;
  opacity: 65%;
  filter: blur(0.5rem);
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.fullImage:hover {
  transform: scale(1.01, 1.01);
  transition-duration: 0.5s;
  transition-timing-function: ease;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  opacity: 100%;
  filter: initial;
}


.content {
  flex-grow: 1;
  padding: 2rem;
  border-radius: 1rem;
}

.icon {
  border-radius: 15px;
  margin: 1rem;
  max-width: 5vw;
  min-width: 64px;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  opacity: 65%;
}
.icon:hover{
  transform: scale(1.1, 1.1);
  transition-duration: 0.5s;
  transition-timing-function: ease;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 100%;
}

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
}
.gridItem {
  min-width: 300px;
  max-width: 20vw;
  background-color: rgba(200, 200, 200, 0.1);
  border-radius: 1rem;
  margin: 1rem;
  opacity: 65%;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  img {
    max-width: 100%;
    filter: blur(2.5px);
    transition-duration: 0.5s;
    transition-timing-function: ease;
  }
}
.gridItem:hover {
  transform: scale(1.05, 1.05);
  transition-duration: 0.5s;
  transition-timing-function: ease;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 100%;
  img { 
    filter: none;
    transition-duration: 0.5s;
    transition-timing-function: ease;
  }
}


#homeText {
  padding-top: 1.5rem;
  border-radius: 2.5rem;
  background-color: rgba(200, 200, 200, 0.1);
  width: fit-content;
 
}


.music-player {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 5px; 
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  box-shadow: inset 0px -0.5px 1px rgba(255, 255, 255, 0.1), 
              inset 0px 0.5px 1px rgba(255, 255, 255, 0.025),
              0px 4px 10px rgba(0, 0, 0, 0.25);
  text-align: center;
  width: 100%; 
}

.music-player audio {
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 5px;
}

.music-player .song-title {
  font-size: 1rem;
  margin-top: 0.75rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.03rem;
  padding: 0 1rem;
  text-align: center;
}

/* Mobile and smaller screen styles */
@media (max-width: 900px) {
  body {
    flex-direction: column; 
    background-image: url("images/monz_skin.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }

  .left {
    width: 100%;
    min-width: 100%;
  }

  .sidebar {
    position: static; 
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: center;
    padding: 1rem 0;
  }

  .sidebar ul li {
    margin: 1rem 3rem 1rem 3rem ;
  }


  img {
    width: 100%;
    filter: none;
  }
  .grid {
    grid-template-columns: 1fr; 
  }

  .gridItem {
    width: 100%;
    max-width: 100%; 
    margin: 0rem 0rem 1.5rem 0rem;
    opacity: 100%;
    img {
      filter: none;
    }
  }

  .contact {
    display: flex;   
    flex-flow: row wrap;         
    gap: 1rem;               
    width: 100%;
    align-items: center;
    justify-content: center;
    justify-items: center;
  }

  .icon {
    opacity: 100%;
    width: 100%;
    min-width: 48px;
    max-width: 128px;
  }

  .content {
    padding: 0.5rem; 
  }

  .fullImage {
    border-radius: 1rem;
    filter: none;
    opacity: 100%;
  }

}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background: rgb(0, 0, 0, 0.75) url("images/monz_skin.jpg");
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }

  h1 {
    color: #dddddd;
  }

  h2 {
    color: #dddddd;
  }

  p {
    color: #dddddd;
  }

  .gridItem {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .sidebar {
    background-color: rgba(0, 0, 0, 0.4);
    
  }
  .sidebar ul li a {
    color: #dddddd;
  }

  .glass::before {
    opacity: 0.1;
  }

  #homeText {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .music-player {
    background-color: rgba(0, 0, 0, 0.4);
  }
}