/* --- Variables --- */
:root {
  --box-width: 40%; 
  --default-text-color: #191919; 
  --secondary: #88c0ff; 
}

/* --- Universal Styles --- */
::selection {
  background-color: var(--secondary); 
  color: #ffffff; 
}

/* Reset and Full Coverage */
html, body {
  background-color: #ffffff; 
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-width: 100vw;
}

a {
  color: inherit;
}

/* Default Body Text (Oxygen) */
body {
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.2em;
  letter-spacing: .15em;
  line-height: 1.6; 
  color:var(--default-text-color); 
}

/* Heading Text (Raleway) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: 250;
  letter-spacing: .1em;
  font-size: 3.5em; 
}

/* --- Music Button Styles --- */

#musicToggleButton {
  position: fixed; 
  top: 15px; 
  left: 15px; 
  z-index: 1000;
  cursor: pointer;
  
  /* Note: Inline styles in HTML handle margin/background/border-radius */
  font-size: 1.2em;
  width: 50px; 
  height: 50px;
  display: flex; 
  justify-content: center;
  align-items: center;
  padding: 0; 
}

#musicIcon {
  width: 100%; 
  height: 100%;
  object-fit: contain; 
  padding: 8px; 
}

/* --- Content Box Styles (3-Layer Structure) --- */

/* 1. Outer Container (.content-div): Defines Width, Layout, and SHARP PATTERN */
.content-div {
  width: var(--box-width, 40%); 
  
  /* 💡 SHARP BACKGROUND PATTERN */

  background-image: url('./content/icons/matrix.png'); /* Replace with actual path */
  background-repeat: repeat;
  background-size: 47px 47px; 

  /* Centering and Margins */
  margin-top: 5vh;
  margin-left: auto;
  margin-right: auto;
  
  /* Layout and Visuals */
  border: 1px solid #191919;
  border-radius: 0.4em;
  min-height: 100px;
  
  /* Padding is NOT here, it's on .content-inner */
  padding: 0;

  background-color: rgba(255, 255, 255, 0.8); /* Opaque white background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(5px);

  position: relative;
}

/* 2. Blur Layer (.blur-layer): Applies Transparency and Blur */
.blur-layer {
  /* Inherit dimensions and ensure background is transparent for the blur to work */
  width: 100%;
  height: 100%; 
  
  /* 💡 TRANSPARENCY AND BLUR APPLIED HERE */
  border-radius: inherit;
  overflow: hidden; 

  /* This ensures the inner content determines the height */
  
  position: relative
}

/* 3. Inner Content Wrapper (.content-inner): Holds Content and Padding */
.content-inner {
  /* Padding is applied here to give space around the text */
  padding-top: 1%;
  padding-bottom: .5%;
  padding-left: 2%;
  padding-right: 6%;
  box-sizing: border-box; 
  
  /* Text Alignment Override */
  text-align: left;
  
  color: var(--default-text-color);
}