/* These are the default colour codes for the layout.
Changing the colour code here will update it for any element that uses it. */
:root {
  --bg-color: #314249;
  --wrap-color: #F9B885;
  --win-color: #F9B885;
  --win-header: #5A6988;
  --win-border: #611D30;
  --win-high: #EBEDEE;
  --menu: #F9B885;
  --menu-bord: #11181b;
  --bold-color: #11181b;
  --title-color: #314249;
  --accent1: #FCF9D8;
  --accent2: #F1E099;
  --highlight: #FCF9D8;
  --font: #11181b;
  --link: #F9B885;
  --linkhover: #ffdfc6;
  --scrollbarcol: #11181b #11181b7a;
  --h1-color: #11181b;
  --h2-color: #11181b;
  --h3-color: #11181b;
}

/* ------- Themes ------- */

[data-theme="default"] {
  --bg-color: #3A4466;
  --wrap-color: #5A6988;
  --win-color: #5A6988;
  --win-header: #3A4466;
  --win-border: #181425;
  --win-high: #95a3bf;
  --menu: #5A6988;
  --menu-bord: #181425;
  --bold-color: #181425;
  --title-color: #3A4466;
  --accent1: #ff0044;
  --accent2: #FF0044;
  --highlight: #95a3bf;
  --font: #181425;
  --link: #95a3bf;
  --linkhover: #FF0044;
  --scrollbarcol: #181425 #18142588;
  --h1-color: #FF0044;
  --h2-color: #181425;
  --h3-color: #181425;
}

[data-theme="Minmows95"] {
  --bg-color: #00827D;
  --wrap-color: #E3E3E3;
  --win-color: #C0C0C0;
  --win-header: #0000b1;
  --win-border: #505050;
  --win-high: #ffffff;
  --menu: #C0C0C0;
  --menu-bord: #505050;
  --bold-color: #505050;
  --title-color: #0000b1;
  --accent1: #ffffff;
  --accent2: #80807E;
  --highlight: #ffffff;
  --font: #000000;
  --h1-color: #000000;
  --h2-color: #000000;
  --h3-color: #000000;
  --link: #0000b1;
  --linkhover: #5985ff;
  --scrollbarcol: #80807E #80807e69;
}

[data-theme="cafe"] {
  --bg-color: #BBFAFF;
  --wrap-color: #A49882;
  --win-color: #FDF6E4;
  --win-header: #847360;
  --win-border: #665B47;
  --win-high: #E6FBFD;
  --menu: #A49882;
  --menu-bord: #665B47;
  --bold-color: #665B47;
  --title-color: #FDF6E4;
  --accent1: #665B47;
  --accent2: #C3F3F7;
  --highlight: #E6FBFD;
  --font: #242010;
  --link: #F9B885;
  --linkhover: #C3F3F7;
  --scrollbarcol: #665B47 #665b4777;
  --h1-color: #242010;
  --h2-color: #242010;
  --h3-color: #242010;
}

[data-theme="spring"] {
  --bg-color: #cffaff;
  --wrap-color: #24A34A;
  --win-color: #FAD3C9;
  --win-header: #E49191;
  --win-border: #611D30;
  --win-high: #EBEDEE;
  --menu: #E49191;
  --menu-bord: #611D30;
  --bold-color: #053613;
  --title-color: #053613;
  --accent1: #BADD7F;
  --accent2: #611D30;
  --highlight: #EBEDEE;
  --font: #053613;
  --link: #993b56;
  --linkhover: #611D30;
  --scrollbarcol: #993b56 #993b5680;
  --h1-color: #611D30;
  --h2-color: #053613;
  --h3-color: #053613;
}

[data-theme="summer"] {
  --bg-color: #5094B9;
  --wrap-color: #40552d;
  --win-color: #406768;
  --win-header: #19350C;
  --win-border: #0C2908;
  --win-high: #4d7e80;
  --menu: #406768;
  --menu-bord: #19350C;
  --bold-color: #0C2908;
  --title-color: #ECA945;
  --accent1: #A44F3C;
  --accent2: #D5D3CC;
  --highlight: #687D31;
  --font: #0C2908;
  --link: #401D15;
  --linkhover: #F2600C;
  --scrollbarcol: #A44F3C #d03b007a;
  --h1-color: #0C2908;
  --h2-color: #0C2908;
  --h3-color: #0C2908;
}

[data-theme="autumn"] {
  --bg-color: #FFAF7A;
  --wrap-color: #6D626A;
  --win-color: #BA5417;
  --win-header: #AE2E22;
  --win-border: #5F352A;
  --win-high: #E78B0E;
  --menu: #BA5417;
  --menu-bord: #5F352A;
  --bold-color: #3F281B;
  --title-color: #F9CE1E;
  --accent1: #AE2E22;
  --accent2: #B5CACD;
  --highlight: #967D87;
  --font: #3F281B;
  --link: #313024;
  --linkhover: #B5CACD;
  --scrollbarcol: #5F352A #5f352a75;
  --h1-color: #313024;
  --h2-color: #514B1B;
  --h3-color: #313024;
}

.theme-options {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
}

.theme-options button {
  padding: 0.5rem 0.5rem;
  border: none;
  cursor: pointer;
  font-family: "Silkscreen", sans-serif;
  font-size: 20px;
  background-color: transparent;
  outline: none;
}

.theme-options button:hover {
  filter: brightness(200%);
  cursor: pointer;
}

.theme-options button:active {
  filter: brightness(60%) saturate(125%);
  cursor: pointer;
}

.theme-options button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ------- "Screen" styles ------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbarcol);
}
  
body {
  overflow-x: hidden;
  margin: 0;
  padding: 20px;
  }

p {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    word-break: keep-all;
    color: var(--font);
    margin-left: 5px;
    margin-right:10px;
  }

p span {
    background-color: #a3a3a39d;
  }

  .silkscreen-regular {
    font-family: "Silkscreen", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
.silkscreen-bold {
    font-family: "Silkscreen", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

.top-wrapper {
    border: 2px solid var(--menu-bord);
    box-shadow: 2px 2px 0 var(--highlight);
    background-color: var(--menu);
  }

.top-menu a {
    border: 3px solid var(--menu-bord);
    border-bottom-color: var(--menu-bord);
    color: var(--link);
  }
  
  .top-menu a:hover::before {
    background-color: var(--menu-bord);
  }
  
  .top-menu a::after {
    background-color: var(--highlight);
  }

.wrapper {
  border: 3px solid var(--bold-color);
  box-shadow: 3px 3px 0 var(--highlight);
  background-color: var(--wrap-color);
}

.wrapper::after {
  border: 3px solid var(--bold-color);
  box-shadow: 3px 3px 0 var(--highlight);
}

.content {
  background: var(--highlight);
}

.menu a {
  border: 3px solid var(--bold-color);
  border-bottom-color: var(--bold-color);
  color: var(--link);
}

.menu a:hover::before {
  background-color: var(--bold-color);
}

.menu a::after {
  background-color: var(--highlight);
}

.title {
  font-family: "Silkscreen", sans-serif;
  font-size: 14px;
  position: fixed;
  display: inline-block;
  padding: 3px 6px;
  color: var(--accent1);
  background-color: var(--title-color);
  top: 0;
  left: 0;
  z-index: 3 !important;
}

.screen {
  border: 3px solid var(--bold-color);
}

/* Screen List Styling */
ul.lscreen {
  list-style-image: url('img/Birdton.gif');
  list-style-position: inside;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  word-break: keep-all;
  color: var(--font);
  margin: 5px;
  padding: 10;
}

li span {
  background-color: #a3a3a39d;
}

.marquee {
  z-index: 0 !important; /* Ensure it stays behind */
}



/*Screen snow effects*/
.snow-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Higher than .screen background */
  pointer-events: none;
  overflow: hidden;
}

.snowflake, .swaying {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  animation: fall 8s linear forwards;
}

.floating {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  animation: float 6s linear reverse;
}

@keyframes fall {
  to {
    transform: translateY(425px);
  }
}

@keyframes float {
  to {
    transform: translateY(400px);
  }
}

/* Header Styling */
h1 {
  display: block;
  font-size: 18px;
  margin: 5px 0px 10px 0px;
  font-family: "Silkscreen", sans-serif;
  font-weight: bold;
  color: var(--h1-color);
  z-index: 2 !important;
}

h2 {
  display: block;
  font-size: 17px;
  margin: 3px 0px 7px 0px;
  font-family: "Silkscreen", sans-serif;
  font-weight: bold;
  color: var(--h2-color);
  z-index: 2 !important;
}

h3 {
  display: block;
  font-size: 14px;
  margin: 5px 0px 3px 0px;
  font-family: "Silkscreen", sans-serif;
  font-weight: bold;
  color: var(--h3-color);
  z-index: 2 !important;
}

h1::after {
    display: block;
    content: " ";
    height: 3px;
    width: 14px;
    background: var(--h1-color);
    margin-top: 8px;
    z-index: 2 !important;
  }

  /* Link Styling */
a {
  color: var(--link);
  /* Adds a smooth effect to link hover. */
  transition: 0.1s all ease-in-out;
}

a:hover {
  color: var(--linkhover);
}

/* ------- Window Styles ------- */

.windowtitle {
  font-size: 12px;
  font-family: "Silkscreen", sans-serif;
  color: var(--accent2);
  z-index: 2 !important;
}

/* Window List Styling */
ul.wind {
  /*list-style-image: url('img/heart_bullet.gif');*/
  list-style-position: inside;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  word-break: keep-all;
  color: var(--font);
  margin: 5px;
  padding: 10;
}
  
  /*Buttons*/

.open-btn-1,
.open-btn-2,
.open-btn-3,
.open-btn-4 {
    width: 40px;
    height: auto;
    cursor: pointer;
    transition: filter 0.2s ease;
  }
  
.open-btn-1:hover,
.open-btn-2:hover,
.open-btn-3:hover,
.open-btn-4:hover {
    filter: brightness(200%);
  }
  
.open-btn-1:active,
.open-btn-2:active,
.open-btn-3:active,
.open-btn-4:active {
    filter: brightness(60%) saturate(125%);
  }
  

.close-btn {
    cursor: pointer;
    width: 20px; /* Adjust the close button size */
    height: 20px;
  }
.close-btn:hover {
    filter: brightness(200%);
    cursor: pointer;
  }
.close-btn:active {
    filter: brightness(60%) saturate(125%);
    cursor: pointer;
  }
   
.window-1,
.window-4 {
    position: fixed; /* Ensure it stays on top */
    z-index: 5000 !important; /* Force it above other elements */
    top: 5rem;
    left: 10rem;
    background: var(--win-color);
    border: 2px solid var(--win-border);
    border-radius: 2px;
    width: 350px;
    box-shadow: 3px 3px 0px var(--win-high);
    /*display: none;  Initially hidden */
    margin: 5px auto;
  }

.window-2 {
    position: fixed; /* Ensure it stays on top */
    z-index: 5000 !important; /* Force it above other elements */
    top: 5rem;
    left: 10rem;
    background: var(--win-color);
    border: 2px solid var(--win-border);
    border-radius: 2px;
    width: 350px;
    box-shadow: 3px 3px 0px var(--win-high);
    display: none;  /*Initially hidden */
    margin: 5px auto;
  }

.window-3 {
    position: fixed; /* Ensure it stays on top */
    z-index: 5000 !important; /* Force it above other elements */
    top: 5rem;
    left: 10rem;
    background: var(--win-color);
    border: 2px solid var(--win-border);
    border-radius: 2px;
    width: 250px;
    box-shadow: 3px 3px 0px var(--win-high);
    display: none;  /*Initially hidden */
    margin: 5px auto;
  }
  
.window-header {
    background-color: var(--win-header);
    height: 20px;
    padding: 5px;
    /* This centers the text vertically. */
    line-height: 20px;
    cursor: grab;
  }

  .window-header:active {
    cursor: grabbing;
  }

  /* Changes the brightness of the fake buttons on hover. Also changes the cursor. */
.window-header img:hover {
    filter: brightness(200%);
    cursor: pointer;
  }

  /* Darkens and saturates the buttons on click. Also changes the cursor. */
.window-header img:active {
    filter: brightness(60%) saturate(125%);
    cursor: pointer;
  }
  
.window-content {
    padding: 5px;
    font-size: 12px;
  }

  /* !!!! Mobile Support Settings !!!! */
  @media only screen and (max-width: 890px) {
  body, html {
    padding: 0;
    margin: 0;
    overflow-x: visible; /* Prevent horizontal scrolling */
  }
  
.marquee {
      width: 100% !important;
      white-space: nowrap;
      overflow: hidden;
      font-size: 14px; /* Adjust text size */
      z-index: 10 !important; /* Ensure it stays above everything */
    }

.marquee img {
    max-width: 100%;
    height: auto;
  }
  
.ground {
      position: static;
      width: 100%;
    }
  
.pipi {
      position: relative;
      left: auto;
      right: auto;
      display: block;
      margin: auto;
    }

.window-1,
.window-2,
.window-3,
.window-4 {
      position: static !important;
      width: 90%;
      max-width: 360px;
      margin: 20px auto;
      left: unset;
      top: unset;
      box-shadow: none;
      z-index: 1 !important; /* Ensure it stays below the marquee */
    }
  
.window-header {
      cursor: default; /* Prevent dragging */
    }
  
.window-btn {
      position: static;
      text-align: center;
    }
  
.open-btn-1 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-20%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }

.open-btn-2 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-15%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }

.open-btn-3 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-10%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }

.open-btn-4 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-5%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }
  
.wrapper, .wrapper::after, .top-wrapper {
      max-width: 340px;
      margin-top: 10px !important; /* Ensure it's visible */
      /*padding-top: 10px;  Extra spacing */
    }

    .screen {
      max-width: 335px;
      margin-top: 5px !important;
      margin-left: 5px !important;
    }
  
.title {
      position: relative;
      top: 0 !important;
      padding: 5px;
      font-size: 16px; /* Resize text */
      max-width: 340px;
    }

.header {
      position: relative;
      top: 0 !important;
      padding: 5px;
      font-size: 16px; /* Resize text */
      max-width: 340px;
    }
  }
  
  @supports (-moz-appearance: none) {
    @media only screen and (max-width: 890px) {
    /* Firefox-only styles */
  .wrapper, .top-wrapper {
      position: static;
      overflow: hidden !important;
    }

  .wrapper::after {
      position: static;
      overflow: hidden !important;
		}
    
    .open-btn-1 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-20%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }

    .open-btn-2 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-15%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }

    .open-btn-3 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-10%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }

    .open-btn-4 {
      position: sticky !important;
      top: 10px; /* Position button 20px from the top of the screen */
      transform: translateX(-5%); /* Center the button horizontally */
      display: block !important;
      overflow: visible !important;
    }
  
    /* Ensure the openable window appears */
  .window-1,
  .window-2,
  .window-3,
  .window-4 {
      position: static !important; /* Keep it visible */
      z-index: 9999 !important; /* Bring it above everything */
      visibility: visible !important;
    }
  
  .screen {
      margin: 20px 5px 10px 0px !important;
      max-width: 350;
      overflow: visible !important;
    }
  }
}