/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Default cursor */
body {
    cursor: url("images/cursor.png") -40 1, auto;
}

/* Hover over links */
a:hover, button:hover {
    cursor: url("images/hover.png") -40 1, pointer;
}
#buddy {
    position: fixed;
    bottom: 55px;
    right: 25px;
    width: 130px;
    cursor: url("/images/cursor.png") -40 1, auto;
    z-index: 99990;
    display: none;
}

#buddy:hover {
    cursor: url("/images/hover.png") -40 1, pointer;
}

#speech {
    position: fixed;
    bottom: 95px;
    right: 165px;
    width: 230px;

    background: white;
    color: #003366;

    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid black;
    border-bottom: 2px solid black;

    box-shadow: 3px 3px 0 black;
    padding: 10px;

    font-family: "MS Gothic", monospace;
    z-index: 99991;

    display: none;
}
#maatoamp {
  width: 100%;
  max-width: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: "MS Gothic", monospace;
  padding: 0;
  box-sizing: border-box;
  color: #003366;
}

#maatoamp-header {
  display: none;
}

#maatoamp-screen {
  background: #def6ff;
  color: #003366;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  padding: 8px;
  margin-top: 0;
  min-height: 58px;
  box-sizing: border-box;
}

#song-container {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 6px;
    background: white;
    border-top: 2px solid #777;
    border-left: 2px solid #777;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    box-sizing: border-box;
    padding: 3px 5px;
}

#song-title {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

#time {
  margin-top: 5px;
  font-size: 12px;
  color: navy;
  text-align: right;
}

#progress-container {
  background: white;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  height: 14px;
  margin: 8px 0;
  cursor: pointer;
}

#progress-bar {
  background: #8fd0e3;
  height: 100%;
  width: 0%;
  box-shadow: inset -1px -1px 0 #407a9d;
}

#controls {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

#controls button {
  min-width: 0;
  flex: 1;
  min-height: 26px;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  background: #e0e0e0;
  color: #003366;
  font-family: "MS Gothic", monospace;
  font-size: 12px;
  line-height: 1;
  cursor: url("/images/hover.png") 6 8, pointer;
}

#controls button:active {
  border-top-color: black;
  border-left-color: black;
  border-right-color: white;
  border-bottom-color: white;
}

#volume {
  width: 100%;
  accent-color: #8fd0e3;
  cursor: url("/images/hover.png") 6 8, pointer;
}

#maatoamp label {
  display: block;
  margin-top: 8px;
  color: navy;
  font-size: 12px;
  font-weight: bold;
}

#equalizer {
  text-align: center;
  color: navy;
  background: #def6ff;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  margin-top: 8px;
  padding: 5px;
  letter-spacing: 1px;
  min-height: 18px;
}
body {
  margin: 0;
  background: #008080;
  font-family: monospace;
}

#desktop {
  width: 100vw;
  height: calc(100vh - 40px);
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  display: block;
}

#desktop > .desktop-icon {
  width: 80px;
  height: 80px;
  padding: 6px;
  box-sizing: border-box;

  color: white;
  text-align: center;
  cursor: pointer;
  text-shadow: 1px 1px 2px black;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid transparent;
  position: absolute;
  user-select: none;
  z-index: 1;
}

#desktop > .desktop-icon:hover,
.start-menu-item:hover,
#start-button:hover,
.taskbar-button:hover,
.title-bar button:hover {
  cursor: url("/images/hover.png") 6 8, pointer;
}

#desktop > .desktop-icon:hover {
  background: rgba(0, 0, 128, 0.35);
  border: 1px dotted white;
}

#desktop > .desktop-icon.selected {
  background: rgba(0, 0, 128, 0.45);
  border: 1px dotted white;
}

#selection-rectangle {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: rgba(143, 208, 227, 0.32);
  border: 1px dotted navy;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9998;
}

#desktop-glitter-text {
  position: absolute;
  left: clamp(430px, 68vw, calc(100vw - 260px));
  top: 80px;
  display: flex;
  align-items: flex-start;
  gap: 0;
  line-height: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

#desktop-glitter-text img {
  display: block;
}

#icon-posts {
  left: 20px;
  top: 20px;
}

#icon-music {
  left: 20px;
  top: 110px;
}

#icon-bin {
  left: 20px;
  top: 290px;
}

#icon-terminal {
  left: 20px;
  top: 200px;
}

#icon-about {
  left: 20px;
  top: 380px;
}

#icon-info {
  left: 20px;
  top: 470px;
}

#icon-guestbook {
  left: 120px;
  top: 20px;
}


.window {
  display: none;
  position: absolute;
  top: 120px;
  left: 180px;
  width: 300px;
  background: #c0c0c0;
  border: 3px solid black;
  box-shadow: 5px 5px 0 black;
  z-index: 10;
    user-select: none;
}

.title-bar {
  background: navy;
  color: white;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  cursor: move;
}

.window-content {
  padding: 12px;
    user-select: text;

}

#taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: #c0c0c0;
  border-top: 3px solid white;
  display: flex;
  gap: 6px;
  padding: 3px;
  z-index: 99999;
  font-family: monospace;
}

#start-button,
.taskbar-button {
  border: 2px solid black;
  background: #e0e0e0;
  padding: 4px 10px;
  font-family: monospace;
  cursor: pointer;
}

#taskbar-apps {
  display: flex;
  gap: 4px;
  flex: 1;
}

#clock {
  border: 2px inset #777;
  padding: 4px 8px;
  background: #dcdcdc;
}

#start-menu {
  display: none;
  position: fixed;
  bottom: 38px;
  left: 4px;
  width: 230px;

  background: #c0c0c0;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid black;
  border-bottom: 2px solid black;

  box-shadow: 3px 3px 0 black;
  z-index: 100000;
  font-family: monospace;
}

.start-menu-title {
  background: navy;
  color: white;
  padding: 8px;
  font-weight: bold;
  border-bottom: 2px solid black;
}

.start-menu-item {
  padding: 8px 10px;
  cursor: pointer;
  color: #003366;
  background: #c0c0c0;
  border-bottom: 1px solid #999;
}

.start-menu-item:hover {
  background: navy;
  color: white;
}

.start-menu-separator {
  height: 2px;
  background: #777;
  border-top: 1px solid white;
  margin: 3px 0;
}

#boot-screen {
  position: fixed;
  inset: 0;
  background-color: #def6ff;
  background-image: url(https://file.garden/ZmFfhSOgiFXI9ZBU/visuals/bluetile.png);
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "MS Gothic", monospace;
  color: #407a9d;
}

#boot-box {
  width: 520px;
  max-width: 90vw;

  background: #c0c0c0;

  border-top: 3px solid white;
  border-left: 3px solid white;
  border-right: 3px solid black;
  border-bottom: 3px solid black;

  box-shadow: 6px 6px 0 black;
}

#boot-titlebar {
  background: navy;
  color: white;
  padding: 6px 8px;
  font-weight: bold;
  border-bottom: 2px solid black;
}

#boot-content {
  padding: 18px;
  background: #dcdcdc;
}

#boot-text {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  color: #003366;
  margin: 0;
}

#boot-progress {
  margin-top: 14px;
  height: 18px;
  background: white;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  overflow: hidden;
}

#boot-progress-bar {
  height: 100%;
  width: 0%;
  background: #8fd0e3;
}

#boot-sponsor {
  position: fixed;
  right: 14px;
  bottom: 12px;
  color: #003366;
  font-size: 12px;
  text-align: right;
  text-shadow: 1px 1px 0 white;
}

.system-info {
  font-size: 14px;
  line-height: 1.4;
}

.system-info hr {
  border: none;
  border-top: 2px inset #777;
}

#about-window {
  width: 430px;
}

.about-content {
  background: #dcdcdc;
}

.about-panel {
  background: white;
  color: #003366;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  padding: 12px;
  font-family: "MS Gothic", monospace;
  font-size: 14px;
  line-height: 1.45;
}

.about-panel h1 {
  margin: 0 0 8px;
  color: navy;
  font-size: 20px;
  border-bottom: 2px solid #c0c0c0;
  padding-bottom: 7px;
}

.about-panel p {
  margin: 0 0 8px;
}

.about-panel hr {
  border: none;
  border-top: 2px inset #777;
  margin: 10px 0;
}

.about-note {
  color: #666;
  font-size: 12px;
}

.file-list {
  background: white;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  padding: 6px;
}

.file-item {
  padding: 6px;
  cursor: url("/images/hover.png") 6 8, pointer;
}

.file-item:hover {
  background: navy;
  color: white;
}

#reader-window {
  width: 600px;
  height: 500px;
}

#guestbook-window {
  width: 640px;
  height: 520px;
}

.reader-content {
  height: 430px;
  padding: 0;
}

.guestbook-content {
  height: 450px;
  padding: 0;
  overflow: hidden;
}

#post-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

#guestbook-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  display: block;
}

.window.inactive .title-bar {
  background: #808080;
  color: #dcdcdc;
}

.window.active .title-bar {
  background: navy;
  color: white;
}

.window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 40px) !important;
  box-sizing: border-box;
}

.window.maximized .window-content {
  height: calc(100% - 34px);
  box-sizing: border-box;
  overflow: auto;
}

.window.maximized .reader-content {
  height: calc(100% - 34px);
}

.window.maximized .guestbook-content {
  height: calc(100% - 34px);
}

.window.maximized #post-frame {
  height: 100%;
}

.window.maximized #guestbook-frame {
  height: 100%;
}

#desktop-context-menu {
  display: none;
  position: fixed;
  width: 190px;

  background: #c0c0c0;

  border-top: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid black;
  border-bottom: 2px solid black;

  box-shadow: 3px 3px 0 black;
  z-index: 200000;

  font-family: "MS Gothic", monospace;
  font-size: 13px;
}

.context-menu-item {
  padding: 7px 10px;
  color: #003366;
  background: #c0c0c0;
  cursor: url("/images/hover.png") 6 8, pointer;
}

.context-menu-item:hover {
  background: navy;
  color: white;
}

.context-menu-separator {
  height: 2px;
  background: #777;
  border-top: 1px solid white;
  margin: 3px 0;
}

.terminal-content {
  background: #def6ff;
  color: #003366;
  font-family: "MS Gothic", monospace;
  height: 260px;
  overflow-y: auto;
  padding: 10px;

  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}

#terminal-output {
  background: white;
  padding: 8px;
  min-height: 190px;

  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}

#terminal-output p {
  margin: 0 0 5px 0;
}

#terminal-line {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;

  background: white;
  padding: 5px;

  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}

#terminal-line span {
  color: navy;
  font-weight: bold;
}

#terminal-input {
  flex: 1;
  background: transparent;
  color: #003366;
  border: none;
  outline: none;
  font-family: "MS Gothic", monospace;
  font-size: 14px;
}

#terminal-window {
  width: 430px;
}

.window.maximized .terminal-content {
  height: calc(100% - 34px);
}

#recycle-window .file-list {
  background: #def6ff;
}

#recycle-window .file-item {
  background: white;
  margin-bottom: 5px;

  border-top: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
}

#recycle-window .file-item:hover {
  background: #8fd0e3;
  color: #003366;
}