/* 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." */

    * {
       cursor: url("cursor2.png"), help;
    }

  a:link {
    color: blue;
    background-color: transparent;
    text-decoration: underline;
    cursor: url("test.png"), help;
  }
  
  a:visited {
    background-color: transparent;
    text-decoration: underline;
    cursor: url("test.png"), help;
  }
  
  a:hover {
    color: #008080;
    background-color: transparent;
    text-decoration: underline;
    cursor: url("test.png"), help;
  }
  
  a:active {
    color: rgb(4, 0, 255);
    background-color: transparent;
    text-decoration: underline;
    cursor: url("test.png"), help;
  }


/* bottom bar that duplicates player bar*/
.bottom-bar {
  z-index: 1;
  position: fixed;
  bottom: 0;
  left: -1%;
  width: 200%;
  height: 3.5%;
  display: flex;
  flex-grow: 1;
  align-items: center;
  background-color: #c3c3c3;
  padding: 0.5rem;
  box-shadow: 0 -0.125rem .313rem rgb(240, 248, 255);
}

/* container for the music player */
.music-player {
  z-index: 2;
  position: fixed;
  bottom: 0;
  width: 85%;
  height: 3%;
  display: flex;
  flex-grow: 1;
  align-items: center;
  background-color: #c3c3c3 ;
  padding: 0.5rem;
  margin-left: 10%; 
  justify-content: left;
  /* this used to have the same box shadow as the bottom bar, but now its gone because of potential overlapping */
  
}

/* Styling for the song title and icon */
.song-title {
  font-size: 1rem;
  margin: 0 0.5rem; /* Adjust margin */
}

.song-icon {
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem; /* Adjust margin */
}

/* control buttons. Eventually, they will be separated for an idea I have later */
.control-button {
  box-shadow: inset .063rem .063rem .125rem 0rem rgba(240, 248, 255);
  background-color: darkgray;
  cursor: url("test.png"), help;
  margin: 0 0.125rem;
}

.control-button img {
  width: 1.5rem;
  height: 1.5rem;
}



/* seek slider and volume slider */
.seek-slider {
  -webkit-appearance: none;
  width: 39.063rem;
  height: 0.3125rem;
  background: #fdffff ;
  outline: darkgray;
  outline-width: .2rem;
    border-style: solid;
    border-width: .6rem;
    border-color: #818181;
    border-radius: 0.2%;
  opacity: 0.7;
  transition: opacity .2s;
  margin: 0 0.125rem;

}
.volume-slider{
  -webkit-appearance: none;
  width: 6.25rem;
  height: 0.3125rem;
  background: #fdffff;
  outline: none;
  border-style: solid;
    border-width: .43rem;
    border-left-width: .45rem;
    border-color: #818181;
    border-radius: 0.2%;
  opacity: 0.7;
  transition: opacity .2s;
  margin: 0 0.125rem;

}

.seek-slider:hover, .volume-slider:hover {
  opacity: 1;
  cursor: url("test.png"), help;
}

.seek-slider::-webkit-slider-thumb, .volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-right: .125rem solid grey;
  border-bottom: .125rem solid grey;
  border-top: .125rem solid white;
  border-left: .125rem solid white;
  height: .938rem;
  width: .563rem;
  box-shadow: inset .063rem .063rem .125rem 0rem rgba(240, 248, 255, 0.75);
  background-color: green;
  cursor: url("test.png"), help;
}

/*  icons */
.icon {
  margin: 0 0.125rem;
}

/* time text */
.time {
  font-size: 1rem; 
  margin: 0 0.125rem;
  color: #fdffff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: #818181;
  padding-left: 3px;
  padding-right: 5px;
  padding: 3px;
  outline-color: white;
  outline-width: 5px;
}

.current-song-info {
  display: flex;
  align-items: center;
  margin-left: .62rem;
  background: #818181;
  padding: .2%;
  border-radius: .4%;
}

.song-icon {
  height: 1.875rem;
  width: 3.125rem;
    outline-width: 3px;
}

.current-song-title {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  font-weight:bold;
  color: aliceblue;
  padding-right: .45rem;
}

.gif{
  display: block;
  margin: auto;
  margin-top: 5%;
  width: 100%;
  height: 6.25rem;
  margin-bottom: 1.5%;
  
}

body{
  background: #87fffd; 
  background: -moz-linear-gradient(-45deg, #87fffd 0%, #e93cec 100%); 
  background: -webkit-linear-gradient(-45deg, #87fffd 0%,#e93cec 100%); 
  background: linear-gradient(135deg, #87fffd 0%,#e93cec 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87fffd', endColorstr='#e93cec',GradientType=1 );}

#post{
  background: #C0C0C0;
  display: block;

  width: 40%;
  margin-bottom: .25%;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
}

#pnav{
  margin: 2px 0px 0px 2px;
  background-color: #00007f;
  width: 98%;
  height: 16px;
  color: #FFFFFF;
  padding: 0px 0px 2px 2px;
}

.pbuttons{
  float: right;
  padding: 2px 2px 2px 0px;
}

#content{
  width: 97%;
  height: 6.25rem;
  display: block;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 1.5%;
  margin-top: 1%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 0%;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}

#noter{
  margin: 0% 1% 1% 1%;
  width: auto;
  background: #C0C0C0;
  
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; 
  flex-direction: row;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.notebox{  
  font-size: small;
  flex-grow: 1;
  margin: auto;
  width: auto;
  padding-left: 2px;
  padding-right: 0px;
  color: #000000;
  border-top: 1px solid #929292;
  border-left: 1px solid #929292;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}


 .greetings {
  font-size: 2.5rem;
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  font-style: normal;
  color: white;
  margin-left:5%;
  }
  
  


body {font-family: "Lucida Console", "Courier New", monospace;}

/* Modals (background of the rest of the page when the modal is active) */
.modal {
  margin:auto;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  color: Black;
  background-color: #c3c3c3  ;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  overflow: hidden ;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
cursor: url("test.png"), help;
}


#office1{
    
  display: flex;
  justify-content: center; 
  margin-top: 2rem;
  margin-left:20%;
  height: 55%;
  width: 55%;
  overflow: hidden;
  align-items: center; 
  
  }
  
  
.parent {
  position: relative;
  top: 0;
  left: 0;
}

.office {
  display: flex;
  justify-content: center; 
  margin-top: 2rem;
  margin-left:20%;
  height: 55%;
  width: 55%;
  overflow: hidden;
  align-items: center;
}

.phone {
position: absolute;
height: 50px;
width: 50px;
left: 68%;
bottom: 74%;
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}


.tv {
position: absolute;
height: 120px;
width: 120px;
left: 33%; /* bigger number moves it right */
bottom: 64.5%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}

.me {
position: absolute;
height: 370px;
width: 160px;
left: 23%; /* bigger number moves it right */
bottom: 19%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}

.binders {
position: absolute;
height: 50px;
width: 50px;
left: 52.5%; /* bigger number moves it right */
bottom: 77%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}

.puter {
position: absolute;
height: 125px;
width: 225px;
left: 53%; /* bigger number moves it right */
bottom: 53%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}

.cd {
position: absolute;
height: 60px;
width: 100px;
left: 43.5%; /* bigger number moves it right */
bottom: 61%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}

.board {
position: absolute;
height: 115px;
width: 180px;
left: 40.2%; /* bigger number moves it right */
bottom: 72.75%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}

.drawer {
position: absolute;
height: 60px;
width: 100px;
left: 33%; /* bigger number moves it right */
bottom: 37.5%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}

.folder {
position: absolute;
height: 90px;
width: 100px;
left: 66.75%; /* bigger number moves it right */
bottom: 54.75%; /* bigger number movies it up */
z-index: 3;
cursor: url("test.png"), help;
opacity: 0;
}



/* speech bubble from 98.css */


:root {
  /* Color */
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --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("fonts/converted/ms_sans_serif.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

.window {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;
  bottom:65%;
  right:70%;
  width: 20%;
  position: absolute;
}

.title-bar {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.title-bar.inactive {
  background: linear-gradient(
    90deg,
    var(--dialog-gray),
    var(--dialog-gray-light)
  );
}


.title-bar-text {
  font-family: lucida console;
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
  font-size:1rem;
}


.title-bar-controls {
  display: flex;
  cursor: url("cursor2.png"), help;
}

.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
  cursor: url("cursor2.png"), help;
}

.title-bar-controls button:active {
  padding: 0;
}

.title-bar-controls button:focus {
  outline: none;
}

.title-bar-controls button[aria-label="Minimize"] {
  background-image: url("98/icon/minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
}

.title-bar-controls button[aria-label="Maximize"] {
  background-image: url("98/icon/maximize.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
  margin-left: 2px;
}

.title-bar-controls button[aria-label="Restore"] {
  background-image: url("98/icon/restore.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Help"] {
  background-image: url("98/icon/help.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 5px;
}

.title-bar-controls button[aria-label="Close"] {
  margin-left: 2px;
  background-image: url("98/icon/close.svg");
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
  
}

.status-bar {
  margin: 0px 1px;
  display: flex;
  gap: 1px;
}

.status-bar-field {
  box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
  flex-grow: 1;
  padding: 2px 3px;
  margin: 0;
}

.window-body {
  margin: var(--element-spacing);
  font-family: lucida console;
  font-size: 1.15rem;
}

fieldset {
  border-image: url("./icon/groupbox-border.svg") 2;
  padding: calc(2 * var(--border-width) + var(--element-spacing));
  padding-block-start: var(--element-spacing);
  margin: 0;
}

legend {
  background: var(--surface);
}

.field-row {
  display: flex;
  align-items: center;
}

[class^="field-row"] + [class^="field-row"] {
  margin-top: var(--grouped-element-spacing);
}

.field-row > * + * {
  margin-left: var(--grouped-element-spacing);
}

.field-row-stacked {
  display: flex;
  flex-direction: column;
}

.field-row-stacked * + * {
  margin-top: var(--grouped-element-spacing);
}

label {
  display: inline-flex;
  align-items: center;
}

button,
label,
input,
textarea,
select,
option,
ul.tree-view,
.window,
.title-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}

h1 {
  font-size: 5rem;
    font-family: "Pixelated MS Sans Serif";
  src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
  src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;

}

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;
}


.bodyText {
  position: absolute;
   bottom:65%;
  right:70%;
  }

/* new modal */

body {
  background: #008080;
}

.window2 { 
  margin:auto;
  max-width: 80%;
  max-height: 80%;
  font-family: 'Arial',sans-serif;
  background: #c0c0c0;
  border: 1px solid;
  border-top-color: #dfdfdf;
  border-left-color: #dfdfdf;
  border-right-color: #000;
  border-bottom-color: #000;
  z-index:4;
}

.window2 > .inner2 {
  border: 1px solid;
  border-top-color: #fff;
  border-left-color: #fff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  min-height: 15%;
}



.window2 .header2 {
  margin: 2px 2px 0;
  padding: 1px 2px;
  color: #fff;
  background: linear-gradient(to right, #000080, #1084d0);
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
}

.window.description .header2 {
  background: #000080;
}

.window2 .header2 > .icon2 {
  background: url('https://dl.dropboxusercontent.com/u/16697297/themes/releases/win98_v2/win98_notepad_icon.png') no-repeat;
  width: 16px;
  height: 16px;
  float: left;
  margin-right: 5px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
  .window2 .header2 > .icon2 {
    background-image: url('https://dl.dropboxusercontent.com/u/16697297/themes/releases/win98_v2/win98_notepad_icon@2x.png');
    background-size: 16px 16px;
  }
}

.window.description .header2 > .icon2 {
  background: url('https://dl.dropboxusercontent.com/u/16697297/themes/releases/win98_v2/win98_windows_icon.png') no-repeat;
  width: 16px;
  height: 16px;
  float: left;
  margin-right: 5px;
  margin-left: 1px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
  .window.description .header2 > .icon2 {
    background-image: url('https://dl.dropboxusercontent.com/u/16697297/themes/releases/win98_v2/win98_windows_icon@2x.png');
    background-size: 16px 16px;
  }
}

.window2 .header2 > .buttons2 {
  margin: 1px 0;
  background: url('https://dl.dropboxusercontent.com/u/16697297/themes/releases/win98_v2/win98_window_controls.png') no-repeat;
  width: 50px;
  height: 14px;
  float: right;
}

.window.description .header2 > .buttons2 {
  background-position: -35px 0;
  width: 15px;
  height: 14px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
  .window2 .header2 > .buttons2 {
    background-image:   url('https://dl.dropboxusercontent.com/u/16697297/themes/releases/win98_v2/win98_window_controls@2x.png');
    background-size: 50px 14px;
  }
}

.window2 .actions2 {
  margin: 5px 9px;
  line-height: 1;
  color: #000;
  font-size: 11px;
}

.window2 .content2 {
  margin: 0 2px 2px 2px;
  border: 1px solid;
  border-top-color: #808080;
  border-left-color: #808080;
  border-bottom-color: #fff;
  border-right-color: #fff;
  font-size: 13px;
}

.window2 .content2 > .inner2 {
  background: #fff;
  border: 1px solid;
  border-top-color: #000;
  border-left-color: #000;
  border-bottom-color: #dfdfdf;
  border-right-color: #dfdfdf;
  padding: 7px 10px;
}

.window.description .content2,
.window.description .content2 > .inner2 {
  margin: 0;
  border: 0;
  background: transparent;
}

p {
  margin: 0;
}

/* End of modal stuff, hopefully */

/* This is for the clock from https://sabreyna.neocities.org */

        .taskbar {
            background-color: #c3c3c3; /* Grey background for the taskbar */
            color: #000; /* Black text */
            display: flex;
            justify-content: space-between;
            align-items: center; /* Center items vertically */
            padding: 5px 10px; /* Retro padding */
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 10;
        }

        /* Time button styles */
        #time {
            font-size: 16px; /* Standard font size */
            background-color: #c3c3c3; /* Grey background for the time */
            padding: 5px 10px; /* Padding for buttons */
            border: 2px solid #ffffff; /* White border for a raised effect */
            border-top: 3.5px solid #989698; /* Light top border for depth */
            border-left: 3.5px solid #989698; /* Light left border for depth */
            border-right: 3.5px solid #fff;
            border-bottom: 3.5px solid #fff;
            box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.7), inset -1px -1px 3px rgba(0, 0, 0, 0.5); /* Sunken effect */
            position: relative;
            top: 0px; /* Adjust position */
            color: #000; /* Black text */
            width: 150px;
            cursor: url("cursor2.png"), help;
            margin-left:.5%;
        }



.p2{
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  font-style: normal;
  color: red;
}

.footer{
    font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  font-style: normal;
  }


/*---------------------------------------- 720p media query ----------------------------------------*/