@font-face {
  font-family: 'Minecraft';
  src: url('./MinecraftStandard.otf') format('opentype'),
       url('./MinecraftStandardOblique.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

:root {
  --sepia-base: #C2BFC6;
  --container-bg: #4a4a4a;
  --container-border: black;
  --container-text: #7A7A7A;

  --title-bar-bg-top:    #3C3A39; /* slightly lighter top */
  --title-bar-bg-25:     #333130; /* light-mid */
  --title-bar-bg-50:     #292726; /* mid */
  --title-bar-bg-75:     #1F1D1C; /* dark-mid */
  --title-bar-bg-bottom: #141312; /* almost black for depth */
  --title-bar-text:      #A0786F; /* keep warm text */
  --title-bar-text-shadow: rgba(0,0,0,0.33);
  --title-bar-inset-border: rgba(255,255,255,0.15);
  --title-bar-inner-shadow-dark: rgba(0,0,0,0.4);
  --title-bar-inner-shadow-light: rgba(255,255,255,0.1);

  /* Close button */
  --close-btn-bg: rgba(217,196,167,0.8);
  --close-btn-text: rgba(0,0,0,0.5);
  --close-btn-text-shadow: rgba(0,0,0,0.33);

  /* Content box */
  --content-box-bg: #111111;
  --content-box-border: rgba(91,62,27,0.6);
  --content-box-shadow-dark: rgba(0,0,0,0.4);
  --content-box-shadow-light: rgba(255,255,255,0.2);

  /* Dock bar */
  --dock-bg-top: #3c3a3c;
  --dock-bg-25: #333130;
  --dock-bg-50: #292726;
  --dock-bg-75: #111111;
  --dock-bg-bottom: #141312;
  --dock-bg-overlay: rgba(91,62,27,0.8);
  --dock-border: #7a7a7a;
  --dock-outline: #1a1a1a;
  --dock-shadow-inner-dark: rgba(0,0,0,0.6);
  --dock-shadow-inner-light: rgba(255,255,255,0.25);
  --dock-shadow-outer: rgba(0,0,0,0.3);

  /* Dock items */
  --dock-item-text: #7A7A7A;
  --dock-item-hover-shadow: rgba(0,0,0,0.4);

  /* Track container */
  --track-text: #D4D4D4;

  /* Particles */
  --particle-color: black;
  --particle-line-color: black;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: 'Patrick Hand', cursive;
  background-color: var(--sepia-base);
  overflow: hidden;
  background-image: url('./images/output.jpg');
  background-size: cover;
}

.waving-line-container {
    display: inline-block;
    flex: 1;
}

svg {
    overflow: visible;
}

/* Base container styling */
.container {
  background-color: var(--container-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  position: absolute; 
  padding-top: 20px;
  color: var(--container-text);
  font-family: 'Patrick Hand', cursive;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* border: 0.15em solid black; */
  border-top: none;
  border-bottom: none;
  background: linear-gradient(to bottom, #cfcfcf, #b0b0b0);
  background: black;
  /* cursor: url(images/cursor-small.png), auto; */
  box-shadow:
    -20px 30px 60px rgba(0,0,0,0.35),
    -12px 18px 36px rgba(0,0,0,0.50),
    -6px 10px 20px rgba(0,0,0,0.70),
    -3px 6px 12px rgba(0,0,0,0.90),
    -1px 2px 3px rgba(0,0,0,1);
}

.container:hover {
  transform: scale(1.01);
  cursor: url(images/cursor-small.png)10 10, auto;
}

#container1 { width: 31em; height: 37.45em; left: 37%; top: 5em; }       
#container2 { width: 18em; height: 20em; left: 71%; top: 5em; }      
#container3 { width: 18em; height: 10em; left: 10%; top: 40em; }     
#container4 { width: 25em; height: 30em; left: 8%; top: 5em; overflow-y: auto; overflow-x: hidden; }     

.title-bar {
  width: 100%;
  height: 1.8em;
  display: flex;
  background: linear-gradient(to bottom, #cfcfcf, #b0b0b0);
  justify-content: space-between;
  align-items: center;       
  position: absolute;
  left: 0em;
  top: 0em;
  right: 0em;
  cursor: grab;
  border-radius: 0.01em;
}

.title-bar:active {
  cursor: grab;
}

.title-text {
  font-family: 'VT323', monospace;
  font-size: 1.5em;
  font-style: bold;
  color: black;
  text-shadow: 1px 1px var(--title-bar-text-shadow);
  margin-left: 0.2em;
}

.close-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 2em;
  font-style: bold;
  line-height: 1;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.6em;
  height: 0.65em;
  cursor: pointer;
  transition: transform 0.15s ease;
  line-height: 1;
  margin-right: 0.08em;
  border-radius: 4px;
}

.close-btn:active {
  transform: scale(0.8);
}

.close-btn:hover {
    color: maroon;
}

.content-box {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 0.8em;
  margin: 0.2em;
  margin-top: 1em;
  background: transparent;
  background: black;
  background: linear-gradient(to bottom, #cfcfcf, #b0b0b0);
  background: black;
}

/* Fake thumb */
.content-box::before {
  content: "";
  position: absolute;
  top: 10%;
  right: 0.5em;
  width: 8px;
  height: 20%;
  background-color: rgba(255,255,255,0.2);
  border-radius: 4px;
}

.dock-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2em;
  display: flex;
  box-sizing: border-box;
  justify-content: flex-start; /* align items to the left */
  align-items: center;
  border-radius: 0;
  border-left: none;             /* no left border */
  border-right: none;            /* no right border */
  border-bottom: none; 
  border-top: none;
  z-index: 10000;
}

.dock-item {
  color: var(--dock-item-text);
  font-weight: bold;
  cursor: pointer;
  font-size: 1.5em;
  padding: 0 1em;
  border: 2px solid gray;
  padding-bottom: 0.2em;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.15s ease;

  /* 3D raised effect */
  border-top: 2px solid #fff;    /* light */
  border-left: 2px solid #fff;   /* light */
  border-bottom: 2px solid #404040; /* dark */
  border-right: 2px solid #404040;  /* dark */
  background: #e0e0e0;
}

.dock-item:hover {
  background: linear-gradient(to bottom, #e0e0e0, #c4c4c4);
}

.dock-item:active {
  transform: scale(0.95) translateY(2px);   /* slight shrink + push down */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3),
              0 1px 2px rgba(0,0,0,0.3);
  background: linear-gradient(to bottom, #cfcfcf, #b0b0b0);

  /* invert borders for pressed effect */
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}

.dock-item:first-child {
  border-left: none;
}

.dock-item:last-child {
  margin-left: auto;
  color: black;
  border-right: none;     /* remove right border */
  box-shadow: none; 
  padding: 0 0.3em 0 0.3em;
}

#track-container {
  position: absolute;
  top: 2.2em;
  left: 0.2em;
  right: 0.2em;
  bottom: 0.2em;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--track-text);
}

#track-info {
  position: absolute;
  bottom: 0.3em;
  left: 0.3em;
  right: auto;
  width: auto;
  padding: 0;
  color: var(--track-text);
}

#track-info h2, #track-info h3 {
  font-size: 1.35em;
  margin: 2px 0;
  color: var(--track-text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

#track-info h3 {
  font-size: 1.25em;
}

.projects-section {
  width: 100%;
  height: 100%;
  padding-left: 1.5em;
  border: 2px inset var(--content-box-border);
  box-shadow: inset 2px 2px 5px var(--content-box-shadow-dark),
              inset -2px -2px 5px var(--content-box-shadow-light);
  border-radius: 4px;
  background-color: var(--content-box-bg);
}

.projects-section ul {
  list-style-type: disc;
  padding-left: 1em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.projects-section li a {
  text-decoration: none;
  color: var(--container-text);
  font-weight: bold;
  font-size: 1.2em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.projects-section li a:hover {
  color: var(--title-bar-bg-top);
  transform: scale(1.05);
  cursor: pointer;
}

.image-container {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
}

.image-label {
  margin-top: 2px;
  font-size: 1.2em;
  color: #555;
}

.image-icons {
  width: 5em;
  height: 5em; 
  display: block;
  object-fit: contain; 
  margin-right: 0.2em;
  vertical-align: middle;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
}

.menu-bar {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #4A3834;
}

ul.horizontal-list {
  display: flex;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0.2em; 
  padding-left: 0.3em;
  gap: 1.5em; 
}

ul.horizontal-list li a {
  text-decoration: underline;    
  text-underline-offset: 0.2em;  
  color: #C0C0C0;
  font-weight: normal;
  transition: all 0.1s ease-in-out; 
  position: relative;
}

#contact-container {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background-color: var(--content-box-bg);
}

#contact-container h1 {
    padding-left: 2em;
    padding-top: 0.5em;
}