*{box-sizing:border-box;
}

/**
 * 98.css
 * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
 * https://github.com/jdan/98.css/blob/main/LICENSE
 */

:root {
  /* Color */
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-black: #000000;
  --dialog-black-light: #000000;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;

  /* Some detailed computations for radio buttons and checkboxes */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-top: 3px;
  --checkmark-left: 3px;

  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://ourendisnear.neocities.org/SiteHolder/Fonts/ms_sans_serif.woff") format("woff");
  src: url("https://ourendisnear.neocities.org/SiteHolder/Fonts/ms_sans_serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://ourendisnear.neocities.org/SiteHolder/Fonts/ms_sans_serif_bold.woff") format("woff");
  src: url("https://ourendisnear.neocities.org/SiteHolder/Fonts/ms_sans_serif_bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: Arial;
  font-size: 12px;
  color: #222222;
}

button,
label,
input,
textarea,
select,
option,
ul.tree-view,
.window,


.roblox-title-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

u {
  text-decoration: none;
  border-bottom: 0.5px solid #222222;
}

button,
input[type="submit"],
input[type="reset"] {
  box-sizing: border-box;
  border: none;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  border-radius: 0;

  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
}

button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  padding: 2px 11px 0 13px;
}

@media (not(hover)) {
  button:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  input[type="reset"]:not(:disabled):hover {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  }
}

.to-do{
 background-color:white;
 width:200px;
 height:300px;
 position:absolute;
 top:300px;
 right:500px;
}

.home-button-roblox{
  width:40px;
  height:40px;
  border:2px solid BLACK;
  background-color:black;
  color:white;
}

.home-button-roblox img{
  width:35px;
  height:35px;
}

.home-button-roblox-text{
  color:white;
  align-items:center;
  display:flex;
}
.home-button-roblox:hover{
  border:2px solid blue;
}
.roblox-window{
  height:400px;
  width:500px;
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;
  position:absolute;
  top: 100px;          
  left: 100px;
  display: none;
}
.roblox-title-bar{
 background: #4a4a4a;
 background: linear-gradient(180deg,rgba(74, 74, 74, 1) 0%, rgba(26, 26, 26, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(59, 59, 59, 1) 99%);
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  user-select: none; 
}
.roblox-title-bar-text{
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}
.roblox-title-bar-controls{
 display:flex;
}
.roblox-title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}
.roblox-title-bar-controls button:active {
  padding: 0;
}
.roblox-title-bar-controls button:focus {
  outline: none;
}
.roblox-title-bar-controls button[aria-label="Minimize"] {
  background-image: url("https://ourendisnear.neocities.org/SiteHolder/Icons/minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
}
.roblox-title-bar-controls button[aria-label="Maximize"] {
 background-image: url("https://ourendisnear.neocities.org/SiteHolder/Icons/maximize.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}
.roblox-title-bar-controls button[aria-label="Close"] {
  margin-left: 2px;
  background-image: url("https://ourendisnear.neocities.org/SiteHolder/Icons/close.svg");
  background-image:contain;
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
}


.roblox-container-title-blue{
  display:flex;
  padding-left:10px;
  width:100%;
  height:20px;
  color:white;
  background-color:#154995;
  font-size:10px;
  align-items:center;
  font-weight: bold;
  font-family: "Source Sans 3", sans-serif;
}
.roblox-container-index{
  display:flex;
  flex-direction:row;
  gap:5px;
  align-items:center;
  background-color:#242424;
  width:100%;
  height:20px;
  color:white;
  font-size:10px;
  font-family: "Source Sans 3", sans-serif;
}
.roblox-body{
  height:330px;
  width:100%;
  display:flex;
  flex-direction:row;
  overflow: hidden;
  min-height: 0;
  gap:5px;
  padding:5px;
  background-color:#EBEBEB;

}
.roblox-body-left{
 height:100%;
  width:240px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  font-size:12px;
  border-right:1px solid #cccccc;
  padding-right:5px;
}
.left-body-title{
  height:50px;
  width:250px;
  color:white;
  font-size:15px;
  color:black;
  font-family: "Source Sans 3", sans-serif;
}
.left-body-profile-pic{
  width:230px;
  height:100%;
  background-image: url("https://tr.rbxcdn.com/30DAY-Avatar-2F5F9FBEF5E62804996B7ED2A35BCBC2-Png/720/720/Avatar/Webp/noFilter");
  background-size:contain;
  background-repeat:no-repeat;
  border:2px solid #cccccc;
  margin-top:4px;
}
.left-body-profile-pic-bio{
  font-size:12px;
  font-family: "Source Sans 3", sans-serif;
}
.roblox-body-right{
   height:100%;
  width:240px;
  display:flex;
  flex-direction:column;
  text-align:center;
  font-size:12px;
  padding:5px;
  align-items: stretch;
  min-height: 0;
  overflow-y:auto;
  font-family: "Source Sans 3", sans-serif;
}

.roblox-body-right b{
 margin-bottom:10px;
}

.roblox-tree-item{
  margin-bottom:5px;
}
.roblox-tree-view{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.roblox-summary{
  list-style: none;
  border:2px solid grey;
  font-weight: bold;
  background: #ffffff;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(201, 201, 201, 1) 61%, rgba(199, 199, 199, 1) 74%, rgba(189, 189, 189, 1) 99%);
  user-select: none;
  font-family: Arial, Helvetica, sans-serif;
}