/* -------------------------------------------------------- */
/* SETUP */
/* -------------------------------------------------------- */


@font-face {
    font-family: 'Myriad Pro' /*a name to be used later*/
}

.layout {
  width: 1000px;
  display: grid;
}

* {
  box-sizing: border-box;
}


body {
  background-image: url("../images/rooftops.png"); /*Replace with your own background*/
  background-position:center;
	font-family: "Trebuchet MS";
	font-size: 17px;
	cursor: url("../images/yellowcur.png"), pointer;
  cursor: url("../images/redcur.png"), default;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  line-height: 1.2;
  }
  
 
  
 a,button{
 cursor: url("https://i.imgur.com/EwzBX9G.png"), pointer;
}
  
  
  
  
center {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  }
  
blinkie {
  display: flex;
  margin-top: -12px;
}

.button:hover {
    text-decoration: underline;
}
  
  
  a:visited{
  color: darkBlue
}
  
 
  
  /* -------------------------------------------------------- */
/* ALL THE BOXES */
/* -------------------------------------------------------- */

#wrapper {
    width: 1400px;
    height: 900px;
    text-align: center;
    align-items: center;
    margin: 5px
}

.wrappersequel {
   width: 300px;
    height: 500px;
    text-align: center;
    align-items: center;
}

/*Code shared by all window-style boxes. To see what different specific sidebar classes look like, check the demo page.*/
#sidebar, #mini-sidebar, #chatbar, #wide-sidebar, #box, #blinkie, #log {
  background: #fff2b3;
  border-radius: 5px;
  border: 1px solid #cfa153;
  box-shadow: 2px 2px #a85714;
  max-width: 100%;
  display: inline-block;
  text-align: center;
  overflow-x: hidden;
  margin: 10px
  } 
  
  #sidebar, #sidebar-box {
  width: 150px;
  height: 250px;
  }
  
  #chatbar {
  width: 300px;
  height: 250px;
  background: linear-gradient(darkred, darkblue);
  }
  
  #mini-sidebar {
  width: 200px;
  height: 250px;
  max-height: 100%;
  }
  
  #wide-sidebar {
  width: 500px;
  height: 250px;
  }
  
  #inner {
  padding: 1px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
  height: 200px
  }
  
  #blinkie {
  width: 300px;
  height: 250px;
  overflow: hidden;
  background: url("https://i.ibb.co/Yb3j825/misc010.jpg")

  }

#log {
   width: 200px;
  height: 250px;
  overflow-y: hidden
}
  
/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */



#header h1 {
  text-align: center;
}

/* This is only spacing for the navigation links, don't edit unless you want to change that*/
#navLinks {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

/* to change the style of the navigation links, edit this:*/
#navLinks a {
  color: #bdbdbd;
  /* transition makes it so the link doesn't instantly change on hover. you can remove
  this or play with the timing. This is especially useful if you're changing the size or
  saturation of elements */
  transition: all 0.2s ease-out;
}

  
  
/*Prevent image overflow.*/
.sidebar img, .mini-sidebar img, .wide-sidebar img, .box img {
  max-width: 100%;
  }
  
.sidebar, .sidebar-box {
  display: inline-block;
  width: 150px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto
  }
  
/*Container for vertical stacks of multiple mini-sidebars*/
.sidebar-box {
  margin-bottom: 25px;
  width: 600px;
  max-width: 100%
  }

 
/*The title bar at the top of window boxes.*/
.title-bar {
  background-image: linear-gradient(darkblue, darkred); 
  color: white;
  font-weight: bold;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  }
  
  .chat-title {
  background: linear-gradient(darkblue, darkred);
  color: white;
  font-weight: bold;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  }

  
  
/*Round circular image.*/
.icon {
  border: #80aa6f solid 2px;
  border-radius: 50%;
  }
  
/*Main body text boxes.*/
.box {
  margin-top: 25px;
  margin-left: 400px;
  width: 455px;
  margin-bottom: 25px;
    display: grid
  
  }

  


wide {
  letter-spacing: 16px;
  }
  
midwide {
  letter-spacing: 3px;
  }
  
.button { 
    background-image: linear-gradient(darkblue, darkred); 
    border: none; 
    border-radius: 10px;
  font-family: "Myriad Pro", sans-serif;
    color: white; 
    padding: 14px 27px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 17px; 
    margin: 4px 2px; 
    transition-duration: 0.4s;
    }
    
  logo {
  position: static;
  cursor: pointer;
  transition-duration: 0.4s;
}
    
  .text-shadow {
  text-shadow:  2px 2px 0 #000, 2px 2px 0 #000,2px 2px 0 #000, 1px 1px 0 #000; color: white;
 

    }
    

  
}

    
/* -------------------------------------------------------- */
/* the bounce guy*/
/* -------------------------------------------------------- */


:root {
  --width:250px;
  --height:calc(var(--width) / 2);
}


body {
  background-color: black;
} 

.ball {
  width: 120px;
  height: 120px;
  background: url('https://i.ibb.co/7NXwzL3F/Untitled63-0001-14-43-20250201095450.pngn');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;

  animation: toRight linear 4.5s infinite alternate, bounce linear 17s infinite alternate;
}

@keyframes bounce {
  0% {
    top:0;
  }
  80% {
  }
  80% {
    top: calc(100% - var(--height));
  }
  52% {
  }
  100% {
    top: 0;
  }
}

@keyframes toRight {

  0% {
    left: 0;
  }

  100% {
    left: calc(100% - var(--width));
  }
}

#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.theicon {
  border-radius: 20px
}
  
.intro {
  font-size: 30px;
}


/* -------------------------------------------------------- */
/* MUSIC */
/* -------------------------------------------------------- */



    .song-title {
        background:linear-gradient(90deg, darkblue, white, darkred);
    }
 
    .player {
        width:fit-content;
        border: black solid 1px;
        border-width: 1px 0px 0px 1px;
        margin-left:auto;
        margin-right:auto;
    }
 
    .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, .song-title {
  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;
}
 
.song-title {
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.title-bar-text {
  font-weight: bold;
  color: #00002D;
  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;
    }




/* -------------------------------------------------------- */
/* text scroll */
/* -------------------------------------------------------- */

  img {
   max-width:100%; 
  }
  
  .screens {
   text-align: center;
  }

  @media only screen and (min-width: 641px) {

   .screens img {
    width: 191px;
    margin-right: 2px;
   }

  }

  @media only screen and (max-width: 640px) {

    .screenbox img {
      display:block;
      margin: 10px 0;
    }
    
    .header-content {
       align-items: center
    }
    
    header {
      width: 10000px;
      margin-left: auto;
      margin-right: auto;
      display: block;
      max-width: 100%
}


}