/* =========================
   Names may not match what is seen on the site, 
for example a "top left" grid might be in the middle.
This is because I've deleted and restarted so many times,
but kept the old names. Gonna clear that up so noone 
is confused by the terrible naming scheme.
   ========================= */

* {
  box-sizing: border-box;
}

body {
    margin-top:220px;
  background: #000;
  font-family: monospace;
  color: #00cc00;
  overflow-x: hidden;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 16px;
  align-items: flex-start;
}

.content {
  min-width: 0;
}

.directory.right {
  position: sticky;
  top: 20px;

  width: 118px;
  height: fit-content;

  background: #000;
  border: solid #0100ff;
  color: white;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

.directory img {
  transition: transform 0.2s ease;
}

.directory img:hover {
  transform: scale(1.3);
}

.sappy {
  position: relative;
  margin-top: -198px;
  top: -158px;
  left: -20px;
  width: 300px;
  height: 180px;
  z-index: 99;
}
.sappy_g {
  position: relative;
  margin-top: -199px;
  top: 114px;
  left: 476px;
  width: 300px;
  height: 180px;
  z-index: 99;
}

/* =========================
   SAPPYWALKER (STABLE VERSION, kinda)
   ========================= */

:root {
  --walk-height: 120px;
}

.walk-area {
  position: absolute;
  left: -50px;
  right: -50px;
  bottom: -25px;

  height: var(--walk-height);
  overflow: visible;

  pointer-events: none;
}

.walker-container {
  position: absolute;
  bottom: -100px;
  left: 0;

  width: auto;
  height: auto;

  will-change: left;
  pointer-events: auto;
}

#walker {
  height: calc(var(--walk-height) - -40px);
  width: auto;
  max-width: none;
  flex-shrink: 0;

  transform-origin: center center;
  image-rendering: auto;

  user-select: none;
  -webkit-user-drag: none;
}

.walker-container.flip #walker {
  transform: scaleX(-1);
}

.speech {
  position: absolute;
  color: #000000;
  left: 50%;
  bottom: 100%;
  transform: translate(-200px, 42px);
  padding: 35px;
  font-size: 20px;
  background: url("images/speech bubble.png") no-repeat center;
  background-size: 200% 150%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.speech.show {
  opacity: 1;
}

@keyframes walkerMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100vw - 265px));
  }
}

/* CLOCK, clock frame taken from Pokemon Platinum*/
#clock {
  font-size: 2rem;
  color: #44ff00;
  text-shadow: 0 0 5px #00ff15aa;
  text-align: center;
  margin-top: 60px;
}
.clock-frame {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 15px;
  background: url(images/bgs/PikaClockFrame.png);
  background-size: cover;
  background-color: #000000;
  margin-top: 10px;
}

/* START OF LAST FM WIDGET STUFF */
#music-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;
  border: 1px solid #0100ff;
  padding: 6px 10px;
  border-radius: 6px;
  width: fit-content;
  font-family: monospace;
}

#album-art {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  background: #111;
}

.track-info {
  display: flex;
  flex-direction: column;
}

#song {
  color: #13ff00;
  font-size: 13px;
}

#status {
  font-size: 11px;
  color: #aaa;
}

.credit {
  font-size: 10px;
  opacity: 0.7;
}

.widget-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 20px;
  column-gap: 10px;
  padding: 20px;
  background: url(images/bgs/141.GIF);
  border-radius: 50px;
  margin-top: 10px;
}

.welcome-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 20px;
  column-gap: 20px;
  padding: 20px;
  background: url(images/bgs/141.GIF);
  border-radius: 50px;
  margin-top: 10px;
}

.visit-box {
  text-align: center;
  gap: 5px;
  background-color: #000000;
  margin-top: 5px;
  border: solid;
  border-color: #09ff00;
  padding: 25px;
  border-radius: 100px;
}

.about-box {
  text-align: center;
  gap: 5px;
  background-color: #000000;
  margin-top: 5px;
  max-width: 400px;
  border: solid;
  border-color: #09ff00;
  padding: 25px;
  border-radius: 100px;
  color: #aa1b1b;
}

.card-box {
  text-align: center;
  gap: 5px;
  padding: 5px;
  background-color: #000000;
  margin-top: 5px;
  max-height: 200px;
  max-width: 200px;
  overflow: auto;
}
.log-box {
  text-align: center;
  gap: 5px;
  padding: 5px;
  background-color: #000000;
  margin-top: 5px;
  max-height: 200px;
  max-width: 200px;
}
#moon-widget {
  display: flex;
  align-items: center;
  width: 188px;
  gap: 10px;
  background: #000;
  padding: 6px 10px;
  font-family: monospace;
  border: 3px solid #242724;
}

.container {
  max-width: 1000px;
  margin: auto;
  margin-top: 150px;
  padding: 20px;
  background: url(images/bgs/vines.gif);
  border: solid;
  border-color: #ec00ff;
  border-radius: 100px;
}

.bar {
  gap: 5px;
  text-align: center;
  padding: 6px;
  background: #000;
  margin-top: 10px;
  margin-left: 25px;
  margin-right: 25px;
  border-radius: 10px;
}

.name-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top:-105px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  margin-top: 10px;
  background: url(images/bgs/stone_xd_dark.png);
  border-radius: 50px;
  padding: 20px;
}

.cell {
  background: #000;
  text-align: center;
  margin: 10px 10px 10px 10px;
  position: relative;
  border: solid;
  border-color: #09ff00;
  padding: 10px;
  border-radius: 100px;
}

.tv {
  background: #000;
  text-align: center;
  padding: 10px;
  margin: 20px 20px;
  position: relative;
  width: 246px;
  height:165px;
  background: url("images/tv.png") center / cover no-repeat;
  overflow: visible;
  background-color: #000000;
}

.tv-gif {
  position: relative;
  top: 6%;
  left: -9%;
  width: 70%;
  z-index: 1;
  transition: transform 0.6s;
}

.tv-overlay {
  position: relative;
  background: #501313;
  bottom: 179%;
  left: -35%;
  width: 19%;
  height: 25%;
  padding: 6px;
  z-index: 2;
}

img {
  max-width: 100%;
  height: auto;
}
footer {
  position: relative;
}
[class^="spin-overlay"] {
  position: relative;
  margin-inline: auto;
  transition: transform 0.6s;
}

[class^="spin-overlay"]:hover {
  transform: scale(1.3);
}
[class^="tv-gif"]:hover {
  transform: scale(1.3);
}

@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
                                     ,
              ,-.       _,---._ __  / \
             /  )    .-'       `./ /   \
            (  (   ,'            `/    /|
             \  `-"             \'\   / |
              `.              ,  \ \ /  |
               /`.          ,'-`----Y   |
              (            ;        |   '
              |  ,-.    ,-'         |  /
              |  | (   |            | /
              )  |  \  `.___________|/
              `--'   `--'
 
    * windows reskin lovingly created by june @ loveberry.neocities.org / layercake.neocities.org
    * original multiple song music player by adilene @ adilene.net. [https://pastebin.com/PiDgrv3J] 
    * edited using 98 css [https://jdan.github.io/98.css/]
 	* source code: https://github.com/sayantanm19/js-music-player
   ========================= */

    .title-bar {
        background:linear-gradient(90deg, purple, orchid, pink);
    }
 
    .player {
        width:fit-content;
        border: black solid 1px;
        border-width: 1px 0px 0px 1px;
        margin-left:0px;
        margin-right:0px;
      transform: translate(215px, -130px);
    }
 
    .controlimg:hover {
        cursor:help;
    }

 
/* below is styling to get windows 98 effect. from 98.css [https://jdan.github.io/98.css/] */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
 
input[type="range"]:focus {
  outline: none;
}
 
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}
 
input[type="range"].has-box-indicator::-webkit-slider-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(-10px);
}
 
input[type="range"]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(2px);
}
 
input[type="range"]::-moz-range-thumb {
  background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  border: 0;
  border-radius: 0;
  height: 21px;
  transform: translateY(2px);
  width: 11px;
  }
 
input[type="range"].has-box-indicator::-moz-range-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(0px);
}
 
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
 
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
 
button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit]{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
 
.title-bar-controls button {border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}
 
.title-bar-controls button {background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}
 
.title-bar-controls button:not(:disabled):active {box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}
 
@media (not(hover)){
	button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}
 
.title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
.title-bar-controls button::-moz-focus-inner {border:0}
 
 
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/1za99g.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
 
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/z7csle.woff") format("woff");
  src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
 
 
.window, .title-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}
 
.window {
  box-shadow: inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf, inset -2px -2px #808080,
    inset 2px 2px #ffffff;
  background: #c0c0c0;
  padding: 3px;
  width:260px;
}
 
.title-bar {
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.title-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}
 
.title-bar-controls {
  display: flex;
}
 
.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}
 
.title-bar-controls button:active {
  padding: 0;
}
 
.title-bar-controls button:focus {
  outline: none;
}
 
.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat}
 
.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat}
 
.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px}
 
.window-body { margin:0px; height:98px; }
 
 
 
input[type=range] {
        -webkit-appearance: none;
        appearance:none;
        width: 100%;
    }
 
    input[type=range]:focus {
        outline: none;
    }
 
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
    }
 
 
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
    }
 
    .flex {display: flex;}
 
    .titlebaricon { height:14px; width:14px;}
 
 
    .songtitlewindow {
        background-color:#fff;
        box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
    }
 
    #musicplayer {
        border:2px solid silver; /* border around player */
        border-width: 2px 0px 0px 0px;
        width:160px; /* width of the player */
    }
 
    #imagestyle {
        background:silver; /* background color of player */
        border:2px solid silver; /* border around player */
        width:95px; /* width of the player */
        height:95px;
        box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
    }
 
    .ic {
    	width:90px;
        position:relative;
        bottom:1px;
        right:1px;
        overflow:hidden;
        padding:2px;
        border:2px solid transparent;
    }
 
    .songtitlearrow {
        background-size:100%;
        background-repeat:no-repeat;
        background-image:url(https://files.catbox.moe/f5e8np.png);
        height:21px;
        width:21px;
        position:relative;
        top:2px;
        left:-2px;
        border:0px solid transparent;
        border-width:0px 0px 0px 0px;
    }
 
    .songtitle {
        padding:5px; /* padding around song title */
        border-bottom:0px; /* border under song title */
        display:block;
        font-family:Pixelated MS Sans Serif;
    }
 
    .controls {
        font-size:18px !important; /* size of controls */
        text-align:center;
        width:100%;
        position:relative;
        bottom:10px;
    }
 
    .controls td {
        padding:8px 5px 0px 5px; /* padding around controls */
    }
 
    button {
        min-width:40px;
    }
 
    .seeking {
        background-color:#c0c0c0; /* background color of seeking bar */
        display:flex;
        justify-content: space-evenly;
        padding:14px; /* padding around seeking bar */
    }
 
    .current-time {
        padding-right:5px;
    }
 
    .total-duration {
        padding-left:5px;
    }
 
    .controlimg {
    height:15px;
    width:15px;
    }