/* default CSS */

@font-face {
  font-family: Charcoal;
  src: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/Charcoal-CvmyBuDW.woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Geneva;
  src: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/Geneva.ttf);
  font-display: swap;
  font-weight:400;
  font-style: normal;
}

@font-face {
  font-family: LucidaGrande;
  src: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/LucidaGrande-BqCIfNO3.woff2);
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* platinum CSS */

body {
  padding-top: 100px;
  background: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/MacOS%20Default%20Wallpaper.png);
  background-size: repeat;
  background-attachment: fixed;
  font-family: Geneva;
  font-size: 9pt;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

#container {
    background: #eeeeee;
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumWindowBorder.png);
    border-image-slice: 22 75 6 fill;
    border-image-width: auto;
    image-rendering: pixelated;
    border-image-outset: 22px 6px 6px;
}

#hSub {
  top: 0px;
  background: white;
  height: 13px;
  padding-top: 2px;
  font-size: 9pt;
  font-family: Charcoal;
  padding-left: 45px;
  border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumMenuBar.png);
  border-image-slice: 0 8 fill;
  border-image-width: auto;
  image-rendering: pixelated;
  width: calc( 100% - 50px);
}

#hSub::before {
  content: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumAppleLogo.png);
  left: 17px;
  position: fixed;
  top: 0px;
}

#hSub a {
  color: black;
}

#header {
  z-index: 301;
  background: transparent;
  padding: 0px;
  width: auto;
  left: unset;
  right: 12px;
  border-bottom: 0px;
}

#header a:not(.logo) {
  font-family: Charcoal;
  font-size: 9pt;
  color: black;
  background: transparent;
}

a.logo {
  font-size: 0px;
}

input {
    border-image-slice: 4 fill;
    border-image-width: 4px;
    border-width: 4px;
    image-rendering: pixelated;
    background: transparent;
    padding: 1px 8px;
    font-size: 13px;
    color: #000;
    user-select: none;
    white-space: nowrap;
    font-family: Charcoal;
    font-weight: 400 !important;
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumButton.png);
    line-height: 13px;
}

input:active {
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumButtonActive);
    color: white;
}

.avatar {
    width: 200px;
    margin-right: 20px;
    cursor: zoom-in;
    image-orientation: from-image;
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumBorderImage.png);
    border-image-slice: 6 6 fill;
    border-image-width: auto;
    border-image-outset: 6px;
}

.box.comments {
    border: none;
    overflow: hidden;
}

#commentInput {
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumInsetBorder.png);
    border-image-width: auto;
    border-image-slice: 2 fill;
}

#container:has(#test:target) .player {
    position: fixed;
    bottom: 12px;
    margin: 0px;
    right: 12px;
    width: 300px;
    background: #eeeeee;
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumWindowBorder.png);
    border-image-slice: 22 75 6 fill;
    border-image-width: auto;
    image-rendering: pixelated;
    border-image-outset: 21px 5px 5px;
}

#container:has(#test:target) .boxInfo {
    bottom: 109px;
    position: fixed;
    margin: 0;
    right: 12px;
    width: 308px;
    padding: 0px;
    background: #eeeeee;
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumWindowBorder.png);
    border-image-slice: 22 75 6 fill;
    border-image-width: auto;
    image-rendering: pixelated;
    border-image-outset: 21px 5px 5px;
}

#container:has(#test:target) .url {
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/platinumInsetBorder.png);
    border-image-width: auto;
    border-image-slice: 2 fill;
    background: white;
}

/* OSX CSS */


body #container:has(#osx:target) {
  background: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/background.png) !important;
}

#container:has(#osx:target) {
  background: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/background.png);
  box-shadow: 0px 0px 25px black;
  border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/aquaBorder.png);
  border-image-slice: 23 75 1 fill;
  border-image-width: auto;
  image-rendering: pixelated;
  border-image-outset: 23px 1px 1px;
  font-family: LucidaGrande;
}

#container:has(#osx:target) #hSub {
  top: 0px;
  background: white;
  height: 13px;
  padding-top: 4px;
  box-shadow: 0px 0px 15px black;
  font-size: 14px;
  text-shadow: 0 2px 2px rgba(0,0,0,.5);
  border-bottom: 1px solid #747474;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding-left: 55px;
  border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/aquaMenubar.png);
  border-image-slice: 23 6 0 fill;
  border-image-width: auto;
  image-rendering: pixelated;
  width: calc( 100% - 60px);
  font-family: LucidaGrande;
}

#container:has(#osx:target) #hSub::before {
  content: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/applelogo.png);
  left: 20px;
  position: fixed;
  top: 0px;
}

#container:has(#osx:target) #header {
  z-index: 301;
  background: transparent;
  padding: 0px;
  padding-top: 1px;
  width: auto;
  left: unset;
  right: 12px;
  border-bottom: 0px;
}

#container:has(#osx:target) #header a:not(.logo) {
  font-family: LucidaGrande;
  font-size: 11pt;
  text-shadow: 0 2px 2px rgba(0,0,0,.5);
  color: black;
  background: transparent;
}

#container:has(#osx:target) body {
  padding-top: 100px;
  background: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/cheetahbg.png);
  background-size: cover;
  background-attachment: fixed;
  font-family: LucidaGrande;
}

#container:has(#osx:target) .avatar {
  border-radius: 50%;
  border: 1px solid #0000003d;
}


/* XP CSS */


#container:has(#xp:target) {
    border-image-source: url(https://web.archive.org/web/20250630120303im_/https://file.garden/Z6x-0c5xHS17z_H6/lunaBorderButtons.png);
    border-image-width: auto;
    border-image-slice: 29 75 5 fill;
}


/* "old" CSS */


#container:has(#old:target) {
    border: 1px dotted white;
    background: #00000094;
    backdrop-filter: blur(6px);
    color:white;
    padding-top: 50px;
    font-family: Geneva;
    font-size: 10pt;
}

#container:has(#old:target) #hSub {
    all: unset;
    font-family: Arial;
    font-size: 15px;
    background: #6699cc;
    font-size: small;
    margin: 0px;
    padding: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-left: 10px;
    padding-top: 4px;
    position: fixed;
    left: 0;
    top: 34px;
    width: calc(100% - 15px);
    color: #000;
    height: 15px;
    z-index: 300;
    border: 0;
    border-bottom: 1px dotted white;
    background: #ffffff0f;
    font-family: Geneva;
    font-size: 10pt;
    padding-left: unset;
    padding: 5px 10px;
    width: calc(100% - 20px);
    color:white;
}

#container:has(#old:target) #hSub a {
    color:white;
}

#container:has(#old:target) #hSub::before {
    content: unset;
}

#container:has(#old:target) #header {
    all: unset;
    font-family: Arial;
    font-size: 15px;
    background: #003399;
    color: #fff;
    position: fixed;
    width: calc(100% - 15px);
    height: 22px;
    padding: 5px;
    left: 0px;
    top: 0px;
    margin-bottom: 40px;
    border-bottom: 1px solid black;
    padding-left: 10px;
    padding-top: 6px;
    overflow: hidden;
    z-index: 300;
    border: 0;
    border-bottom: 1px dotted white;
    background: #ffffff0f;
    font-family: Geneva;
    font-size: 10pt;
    padding-left: unset;
    padding: 5px 10px;
    width: calc(100% - 20px);
    color:white;
}

#container:has(#old:target) #header a:not(.logo) {
  font-family: Geneva;
  font-size: 10pt;
  color: white;
  background: transparent;
}

#container:has(#old:target) a {
  color: white;
}

#container:has(#old:target) a:hover {
  animation: party 4s infinite linear;
}

@keyframes party {
  0%   {color: #ff0000;}
  10%  {color: #ff9900;}
  20%  {color: #ccff00;}
  30%  {color: #33ff00:}
  40% {color: #00ff66;}
  50% {color: #00ffff;}
  60% {color: #0066ff;}
  70%  {color: #3300ff;}
  80%  {color: #cc00ff;}
  90%  {color: #ff0099:}
  100% {color: #ff0000;}
}