body,
html {
  height: 100%;
  margin: 0;
  font-family: "XP Tahoma", Arial, sans-serif;
}

* {
  font-family: "XP Tahoma", Arial, sans-serif;
}

@font-face {
  font-family: "XP Tahoma";
  src: url("windows-xp-tahoma.ttf") format("truetype");
  /* Adjust the path as needed */
}

#desktop {
  background: url("background.gif") no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  height: 100%;
}

#taskbar {
  background-color: #245edc;
  background: linear-gradient(
      to bottom,
      #245edc 0%,
      #3f8cf3 9%,
      #245edc 18%,
      #245edc 92%,
      #1941a5 100%
    )
    center/cover no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
}

.extra {
  grid-template-columns: auto !important;
}

.extra .werk {
  height: 300px;
  width: 250px;
}

#bootScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.profielfoto {
  width: 200px;
  border-radius: 20px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#bootImage {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 600px) {
  #bootImage {
    width: 250%;
    position: absolute;
  }
}

.start-button img {
  height: 20px;
  filter: drop-shadow(1px 1px 1px #222);
  transform: translateY(4px);
}

.start-button {
  height: 80%;
  float: left;
  color: white;
  font-size: 22px;
  line-height: 33px;
  font-weight: bold;
  font-style: italic;
  background: radial-gradient(circle, #5eac56 0%, #3c873c 100%) center/cover
    no-repeat;
  box-shadow: 0px 5px 10px #79ce71 inset, 4px 0 8px #3f8cf3;
  padding: 2px 25px 6px 10px;
  text-shadow: 1px 1px 3px #222;
  border-radius: 0px 8px 8px 0px;
  margin-right: 16px;
  cursor: pointer;
}

.window {
  position: absolute;
  max-width: 600px;
  transition: max-width 0.5s, max-height 0.5s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #0055e5;
  background-color: #fff;
  display: none;
  border-radius: 5px;
}


.werker-img,
.werk-img {
  width: 50px;
  border-radius: 25px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.werk,
.werker {
  margin: 6px;
  background: #ffffff;
  border: 1px solid #aca899;
  border-radius: 4px;
  box-shadow: 1px 1px 0 #d8d4c8;
  padding: 12px;
  height: 150px;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .werk {
    width: 130px;
    height: 110px;
  }

  .msn-content {
    max-height: 90vh;
    max-width: 95vw;
  }

  .msn-icon-list {
    width: 90vw;
  }

  .msn-icon-list li a {
    width: 20vw;
  }
}

.werk h3,
.werker h3 {
  margin-top: 10px;
  color: #0a246a;
  font-size: clamp(10px, 4vw, 18px);
  text-align: center;
}

.werk h4,
.werker h4 {
  margin-top: 4px;
  color: #404040;
  font-size: clamp(5px, 2.5vw, 14px);
  text-align: center;
}

.title-bar {
  background: #0055e5;
  color: white;
  padding: 5px 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  box-shadow: #6b76d1 10px 10px 10px -10px inset;
}

/* Maximized window: fill the screen above the taskbar, reset the centering
   transform, and let the inner content scroll instead of overflowing. */
.window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 40px) !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 0 !important;
}

.window.maximized .window-content {
  width: 100%;
  height: calc(100% - 34px); /* below the title bar */
  overflow: auto;
}

.window.maximized .msn-content {
  height: 100%;
}

.window-controls button {
  padding: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  border: 1.5px solid white;
  border-radius: 5px;
}

.minimize-button {
  background-image: url("min.png");
  /* Update path to your ico */
  background-size: 25px;
}

.mar {
  margin-left: 10px;
}

.maximize-button {
  background-image: url("big.png");
  /* Update path to your icon */
  background-size: 25px;
}

.close-button {
  background-image: url("close.png");
  /* Update path to your icon */
  background-size: 25px;
}

/* Adjust the sizes if necessary */
.window-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Adding hover effect */
.window-controls button:hover {
  filter: brightness(125%);
}

.window-content {
  display: flex;
  justify-content: center;
  height: 100%;
  /* Set to the height you want */
}

@media screen and (max-width: 600px) {
  .window-content {
    width: 100%;
    overflow-x: hidden;
  }
  
  .msn-content {
    max-height: 90vh;
    max-width: 95vw;
    overflow-x: hidden;
  }
  
  .werk h3, .werker h3 {
    font-size: clamp(8px, 3.5vw, 18px);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .werk h4, .werker h4 {
    font-size: clamp(6px, 2.2vw, 14px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
  }
}

/* Container that lays the desktop icons out in columns that always fit
   the screen height (wraps to a new column instead of running off-screen) */
#desktop-icons {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 40px); /* leave room for the taskbar */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 14px 10px;
  box-sizing: border-box;
  z-index: 1;
}

.icon {
  width: 75px;
  height: 60px;
  background-size: 50px;
  background-position: top center;
  text-align: center;
  cursor: pointer;
  position: relative;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 4px 8px 34px 8px;
}

.icon p {
  font-size: 14px;
  margin: 0;
  position: absolute;
  bottom: -30px;
  width: 80px;
  color: white;
  text-shadow: #000 0px 2px 10px;
}

.system-tray .time {
  float: right;
  padding-right: 10px;
  color: white;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.progress-bar {
  width: 300px;
  height: 20px;
  border: 1px solid #fff;
  position: relative;
  animation: load 1s linear forwards;
}

@keyframes load {
  from {
    width: 0;
  }

  to {
    width: 300px;
  }
}

/* Stijl om de preloader te verbergen */
.hidden {
  display: none;
}

@keyframes load {
  from {
    left: -100%;
  }

  to {
    left: 100%;
  }
}

/* Hide the preloader when the page is loaded */
body.page-loaded #preloader {
  display: none;
}

.taskbar-item.active .taskbar-text {
  display: inline;
  /* Show text when active */
}

/* Bestaande stijlen... (de rest van je CSS blijft ongewijzigd) */
.taskbar-icons {
  display: flex;
  height: 100%;
}

.taskbar-icon {
  margin-right: 5px;
  /* Of de gewenste ruimte tussen iconen */
  width: 20px;
  /* Aanpassen aan de grootte van je iconen */
  height: 20px;
  /* Aanpassen aan de grootte van je iconen */
}

/* Update de klok stijlen voor correcte kleuren */
.system-tray .time {
  color: #ffffff;
  font-family: "Segoe UI", Tahoma, sans-serif;
  position: absolute;
  right: 0;
  font-size: 12px;
  top: 0;
  padding: 12px;
  background: linear-gradient(
      to bottom,
      #1290e9 0%,
      #19b9f3 9%,
      #1290e9 18%,
      #1290e9 92%,
      #1941a5 100%
    )
    center/cover no-repeat;
  box-shadow: 0px 5px 10px #14a5f0 inset, 0px 5px 10px #333333;
  border-left: 1px solid #092e51;
  text-shadow: 1px 1px 2px #222;
}

.taskbar-item.active {
  width: 150px;
  margin: 3px 0;
  float: left;
  background-color: #4892f7;
  background: url(btn1.png) no-repeat 0 0;
  border-radius: 2px;
  font-family: calibri, monospace;
  font-size: 14px;
  line-height: 14px;
  padding: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  cursor: pointer;
  background-size: 100%;
}

.taskbar-item {
  display: flex;
  align-items: center;
  color: white;
  padding: 2px 6px;
  margin-right: 2px;
  border-radius: 3px;
  cursor: pointer;
}

.taskbar-icon {
  width: 16px;
  /* Set the size of your icon */
  height: 16px;
  margin-right: 4px;
  /* Space between icon and text */
}

.taskbar-text {
  font-size: 12px;
  display: none;
  white-space: nowrap;
  /* Ensure text doesn't wrap to the next line */
}

.minder {
  top: 8px !important;
}

.fullscreen {
  overflow: auto;
  /* Adjust based on your content needs */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* Example styling */
  /* Add any other styles you want for full-screen mode */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

.window.opening {
  animation: fadeIn 0.5s forwards;
}

.window.closing {
  animation: fadeOut 0.5s forwards;
}

.minimized {
  display: none;
  /* Now the window is not displayed after minimizing */
}

.minimize-button {
  background-image: url("min.png");
  /* Update path to your ico */
  background-size: 25px;
}

#game-container {
  width: 600px;
  height: 200px;
  position: relative;
  background-color: #f4f4f4;
  overflow: hidden;
}

#t-rex {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #000;
  user-select: none;
}

#obstacle {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: red;
  user-select: none;
}

/* Keep the existing @keyframes fadeIn and fadeOut for window animations unchanged */

/* New animations for boot screen fade in and fade out */
@keyframes bootFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes bootFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Apply the new animations to the boot image and screen */
#bootImage.bootFadeIn {
  animation: bootFadeIn 2s forwards;
}

#bootScreen.bootFadeOut {
  animation: bootFadeOut 2s forwards;
}

#bootScreen.fadeOut {
  animation: fadeOut 2s forwards;
}

#byGoHugo {
  position: absolute;
  bottom: 20px;
  /* Adjust as needed */
  width: 100%;
  text-align: center;
  color: white;
  /* Choose a color that stands out against your boot screen background */
  font-family: "Roboto", sans-serif;
  /* Use the Roboto font */
  font-size: 15px;
  /* Adjust font size as needed */
  font-weight: 300;
  /* Use the light weight for a thin appearance */
}

.linke {
  text-decoration: none;
  color: white;
}

.glow-on-hover {
  width: 200px;
  height: 100px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  font-size: 30px;
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.msn-content {
  display: grid;
  grid-template-columns: auto auto;
  /* Classic Windows XP "Luna" window background instead of the old gradient */
  background: #ece9d8;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px;
}

@media screen and (max-width: 600px) {
  .msn-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@keyframes gradientBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.msn-icon-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.msn-icon-list li a {
  color: #000000;
  /* black icons, readable on the XP window background */
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.2s ease-in-out;
  height: 45px !important;
  top: 20px;
}

.msn-icon-list li a:hover {
  transform: scale(1.1);
}

.msn-icon-list i {
  font-size: clamp(45px, 4vw, 20px);
  /* Adjust the size as needed */
  margin-bottom: 4px;
  /* Space between icon and text */
}

.icon-bere {
  border-radius: 50%;
  margin-top: 15px;
  width: 55px;
  height: 55px;
  margin-left: 20px;
}

/* Base styles for all project divs */
.werker {
  position: relative;
}

/* Common ::before styles for the hover effect background */
.werker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 0;
}

/* Hover effects for text and images (kept above the hover image) */
.werker h3,
.werker h4,
.werker img {
  position: relative;
  z-index: 1;
  transition: opacity 0.3s ease-in-out;
}

.werker:hover h3,
.werker:hover h4,
.werker:hover img {
  opacity: 0;
}

a {
  text-decoration: none;
}

/* Individual background images for each project */
.bgv::before {
  background-image: url("intresses/bgv-back.png");
}

.djmicheldegrote::before {
  background-image: url("intresses/mdg-back.png"); /* Change this URL for DJ Michel De Grote */
}

.up::before {
  background-image: url("intresses/muziek-back.png"); /* Background image for 40UP */
}

.svjurista::before {
  background-image: url("intresses/jur-back.png"); /* Background image for SV Jurista */
}

.yvonne::before {
  background-image: url("intresses/yvo-back.png"); /* Background image for Yvonne */
}

.pet::before {
  background-image: url("intresses/pettt.png"); /* Background image for Yvonne */
}

.zuid::before {
  background-image: url("intresses/zuidoost.png"); /* Zuidoostbeseft screenshot */
}

/* Ensure hover effect shows the background */
.werker:hover::before {
  opacity: 1;
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  60% {
    opacity: 1;
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut 1s forwards;
}

#clippy-assistant {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
  /* Initial bounce in with delay */
  animation: bounceInRight 0.5s, bounce 1s infinite 7.5s;
}

#clippy-message {
  position: absolute;
  bottom: 120px;
  right: 0;
  background-color: #ffffe0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #000;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  max-width: 250px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-align: left;
}

#clippy-assistant img {
  width: 100px;
  height: auto;
}

.window .title-bar {
  background: #0055e5;
  color: white;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}

.window .window-controls button {
  padding: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
  border: 1.5px solid white;
  border-radius: 5px;
}


#paintCanvas {
  width: 530px;
  max-width: 100%;
}

canvas {
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media screen and (max-width: 600px) {
  #paintCanvas {
    width: 100%;
    max-width: calc(100vw - 40px);
  }
  
  .window#window-mspaint {
    max-width: 95vw;
    width: 95vw;
  }
  
  .window#window-mspaint .window-content {
    padding: 10px;
  }
}


.toolbar {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.paint-status {
  font-size: 12px;
  color: #333;
  margin-left: 6px;
}

.toolbar button {
  cursor: pointer;
  font-size: 24px;
  width: 70px;
  height: 70px;
}

.toolbar label {
  font-size: 24px;
  margin-right: 10px;
  cursor: pointer;
}

#colorPicker {
  width: 70px;
  height: 70px;
}

.logbook-content {
    padding: 20px;
    max-width: 100%;
    height: 100%;
    overflow-y: auto;
}

.learning-goal {
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

.learning-goal h3 {
    margin-top: 0;
    color: #333;
}

.logbook-entries {
    margin: 20px 0;
    display: flex;
    flex-direction: column-reverse;
    gap: 15px;
}

.logbook-entry {
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    position: relative;
}

.entry-date {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 8px;
}

.entry-text {
    margin: 0;
    white-space: pre-wrap;
}

.logbook-form {
    position: sticky;
    bottom: 0;
    background-color: #f5f5f5;
    padding: 15px;
    border-top: 1px solid #ddd;
}

.logbook-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    font-family: inherit;
    resize: vertical;
}

.add-entry-btn {
    background-color: #0078d4;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.add-entry-btn:hover {
    background-color: #006cbd;
}

.edit-btn, .delete-btn {
    position: absolute;
    top: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #666;
}

.edit-btn {
    right: 40px;
}

.delete-btn {
    right: 10px;
}

.edit-btn:hover, .delete-btn:hover {
    color: #333;
}

@media (max-width: 768px) {
    .logbook-content {
        padding: 10px;
    }
    
    .logbook-entry {
        padding: 12px;
    }
    
    .logbook-form {
        padding: 10px;
    }
}

.professional-link {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #0078d4, #005a9e);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    grid-column: span 2;
}

.gohugo-link {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.gohugo-link:hover {
    color: #ffd700;
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gohugo-link i {
    font-size: 20px;
}

/* ===== Windows XP Start Menu ===== */
#start-menu {
  position: absolute;
  bottom: 38px;
  left: 0;
  width: 380px;
  background: #fff;
  border: 1px solid #0831d9;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 2000;
  display: none;
  overflow: hidden;
  font-family: "Tahoma", "XP Tahoma", Arial, sans-serif;
  animation: startMenuIn 0.15s ease-out;
}

#start-menu.open {
  display: block;
}

@keyframes startMenuIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header with user picture */
.start-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(to bottom, #1f63e6 0%, #3f8cf3 45%, #1f63e6 100%);
  border-bottom: 2px solid #fff;
  color: #fff;
}

.start-user-pic {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 2px solid #cdd9f0;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.start-user-name {
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Two-column body */
.start-menu-body {
  display: flex;
}

.start-menu-left {
  flex: 1 1 55%;
  background: #fff;
  padding: 6px;
}

.start-menu-right {
  flex: 1 1 45%;
  background: #d3e5fa;
  border-left: 1px solid #aec9ec;
  padding: 6px;
}

/* Menu items */
.start-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: #00136e;
  font-size: 13px;
  text-decoration: none;
}

.start-menu-right .start-item {
  color: #001ea0;
  font-weight: bold;
}

.start-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.start-menu-right .start-item img {
  width: 22px;
  height: 22px;
}

.start-item span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.start-item small {
  font-weight: normal;
  color: #557;
  font-size: 11px;
}

.start-item:hover {
  background: #2f71cd;
  color: #fff;
}

.start-item:hover small {
  color: #dce8ff;
}

.start-menu-sep {
  height: 1px;
  margin: 5px 8px;
  background: #b6c8e0;
}

/* Footer with power buttons */
.start-menu-footer {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding: 7px 14px;
  background: linear-gradient(to bottom, #3f8cf3 0%, #1f63e6 50%, #1941a5 100%);
  border-top: 2px solid #fff;
}

.start-power-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 3px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.start-power-btn img {
  width: 22px;
  height: 22px;
  border: 1px solid #cdd9f0;
  border-radius: 3px;
  background: #c33;
  object-fit: cover;
}

.start-power-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media screen and (max-width: 600px) {
  #start-menu {
    width: 90vw;
    bottom: 42px;
  }
}

/* ===== Windows Explorer style list layout for Werkervaring & Interests ===== */
#window-documents .msn-content,
#window-music .msn-content {
  grid-template-columns: 1fr; /* single column list, like an Explorer file list */
}

/* Werkervaring: icon on the left, title + subtitle stacked on the right */
#window-documents .werk {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 12px;
  align-items: center;
  height: auto;
  min-height: 0;
  text-align: left;
}

#window-documents .werk .werk-img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  margin: 0;
  align-self: center;
}

#window-documents .werk h3 {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  margin: 0 0 3px 0;
}

#window-documents .werk h4 {
  grid-column: 2;
  grid-row: 2;
  text-align: left;
  margin: 0;
}

/* Interests: simple left-aligned text rows */
#window-music .werk {
  height: auto;
  min-height: 0;
  text-align: left;
}

#window-music .werk h3 {
  text-align: left;
  margin: 0 0 4px 0;
}

#window-music .werk h4 {
  text-align: left;
  margin: 0;
}
/*
  De naam is de kop van de pagina, dus een h1 en geen h3. Dat is puur semantiek:
  visueel hoort hij in dezelfde rij kaartjes thuis, dus hij krijgt exact het
  uiterlijk van de h3'en ernaast. De bio eronder was ook een kop (h4) terwijl
  het gewoon een alinea is.
*/

.werk h1 {
  margin-top: 10px;
  color: #0a246a;
  font-size: clamp(10px, 4vw, 18px);
  text-align: center;
}

.werk p.naambio {
  margin: 4px 0 0;
  color: #404040;
  /* Vet, want dit stond eerst in een h4: de pagina hoort er hetzelfde uit te
     zien als hiervoor, alleen de opmaakcode klopt nu wel. */
  font-weight: 700;
  font-size: clamp(5px, 2.5vw, 14px);
  text-align: center;
}

@media screen and (max-width: 600px) {
  .werk h1 {
    font-size: clamp(8px, 3.5vw, 18px);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .werk p.naambio {
    font-size: clamp(6px, 2.2vw, 14px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
  }
}