html {
  height: 100vh;
  width: 100vw;
  cursor: url("win982.png"), default;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

body {
  background-image: url("pixel-sky.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

p {
  font-family: "Pixelated MS Sans Serif", Arial;
}

#title-bar {
  background: linear-gradient(90deg, #86a1f1, #e8bfe4);
}

#bottom-bar {
  height: 25px;
  width: 99.3vw;
  position: absolute;
  bottom: 0%;
  left: 0%;
  padding-left: 5px;
  padding-right: 5px;
}

#bottom-bar-buttons {
  display: flex;
  align-items: center;
  gap: 3px;
}

#bottom-bar-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#bottom-button-start {
  background: silver;
  border: none;
  border-radius: 0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  box-sizing: border-box;
  color: transparent;
  height: 23px;
  width: 75px;
  padding: 0 5px;
  text-shadow: 0 0 #222;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bottom-button {
  background: silver;
  border: none;
  border-radius: 0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  box-sizing: border-box;
  color: transparent;
  height: 23px;
  width: 160px;
  padding: 0 5px;
  text-shadow: 0 0 #222;
  display: flex;
  align-items: center;
  gap: 5px;
}

#browser-window {
  height: 800px;
  width: 950px;
  position: absolute;
  top: 2%;
  right: 4%;
  transition: 0.3s all;
}

#edit-bar {
  display: flex;
  height: 30px;
  margin: 0;
  align-items: center;
  padding-left: 5px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px grey;
}

#edit-bar p {
  padding: 5px;
}

#edit-bar p:hover {
  background-color: #dfdfdf;
}

#explorer-icons {
  display: flex;
  padding: 5px;
  margin: 0;
  /* gap: 15px; */
  box-shadow: inset 1px 1px #fff, inset -1px -1px grey;
}

.explorer-w-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  padding: 5px 10px 5px 10px;
}

.explorer-w-title p {
  margin-bottom: 0;
}

.explorer-w-title:hover {
  background-color: #dfdfdf;
}

#address-bar {
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px grey;
  border-bottom: 1px inset white;
}

#address-bar input {
  width: 881px;
}

#address-bar select {
  width: 770px;
}

.go {
  display: flex;
  height: 23px;
  align-items: center;
  gap: 5px;
  padding-right: 3px;
}

.address-bar-links {
  display: flex;
  height: 23px;
  align-items: center;
  gap: 10px;
}

#extra {
  align-self: self-start;
  margin: 0;
}

#blog-main-view {
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  display: block;
  margin: 0 auto;
  padding: 12px 8px;
  height: 579px;
}

#blog-contents {
  height: 570px;
  width: 912px;
  border: none;
}

#browser-scroll-bar {
  width: 17px;
  height: 599px;
  image-rendering: pixelated;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 21.8%;
  right: 13px;
}

.up-arrow {
  width: 17px;
}

.down-arrow {
  width: 17px;
}

.scrollbar {
  width: 17px;
  height: 200px;
  background: silver;
  border: none;
  border-radius: 0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #e9e9e9, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  box-sizing: border-box;
  color: transparent;
  padding: 0 5px;
  text-shadow: 0 0 #222;
  margin-bottom: 400px;
}

#browser-bottom-info {
  display: flex;
  align-items: center;
  height: 23px;
  margin-left: 7px;
  width: 935px;
  position: absolute;
  bottom: 0.5%;
}

.ie-bottom-box {
  width: 50px;
  height: 23px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px rgb(166, 166, 166), inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

#first-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 5px;
  flex-grow: 10;
}

#last-box {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 160px;
  padding-left: 5px;
}

#browser-bottom-info p {
  margin: 0;
}

.line {
  width: 4px;
  height: 70%;
  box-shadow: inset -1px -1px #565656, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  /* border-radius: 1px; */
  margin-right: 3px;
}

.line2 {
  width: 4px;
  height: 23px;
  box-shadow: inset -1px -1px #565656, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  /* border-radius: 1px; */
}

.line3 {
  width: 0px;
  height: 65px;
  border-left: 1px inset grey;
  border-right: 1px inset #dfdfdf;
  border-top: 1px inset #dfdfdf;
  border-bottom: 1px inset grey;
  margin-right: 3px;
}

.line4 {
  width: 4px;
  height: 67px;
  box-shadow: inset -1px -1px #565656, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  /* border-radius: 1px; */
  margin-right: 3px;
}

.pressed {
  border-top: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  box-shadow: inset 1px 1px grey !important;
  background-color: #dfdfdf !important;
  border-right: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
}

#desktop-icons {
  display: flex;
  width: 80px;
  height: 500px;
  flex-direction: column;
  gap: 10px;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.desktop-icon p {
  width: 70px;
  text-align: center;
}

/* MUSIC PLAYER */

.flex {
  display: flex;
}

.player {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 10%;
  left: 4%;
  transition: 0.3s all;
}

#music-title-bar {
  background: linear-gradient(90deg, #86a1f1, #e8bfe4);
  height: 14px;
}

.title-bar-text {
  display: flex;
  align-items: center;
  gap: 5px;
}

.title-bar-text p {
  margin: 0;
}

#application-box {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 23px;
  width: 105px;
  padding: 0 10px 0 10px;
  margin-right: auto;
  box-shadow: inset -1px -1px #fff, inset 1px 1px rgb(166, 166, 166), inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

#time {
  padding-left: 5px;
}

#bottom-spacer {
  flex-grow: 10;
}

#imagestyle {
  background: silver; /* background color of player */
  border: 2px solid silver; /* border around player */
  width: 95px; /* width of the player */
  height: 95px;
  padding-right: 5px;
  /* box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; */
}

.ic {
  width: 91px;
  position: relative;
  bottom: 2px;
  right: 2px;
  overflow: hidden;
  padding: 2px;
  border: 2px solid transparent;
}

#musicplayer {
  border: 2px solid silver; /* border around player */
  border-width: 2px 0px 0px 0px;
  width: 160px; /* width of the player */
}

.songtitlewindow {
  background-color: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.songtitlearrow {
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("down-arrow.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;
}

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

.controls {
  font-size: 18px !important; /* size of controls */
  text-align: center;
  width: 100%;
  position: relative;
  bottom: 10px;
  background-color: silver;
}

.controls td {
  padding: 8px 5px 0px 5px; /* padding around controls */
}

.controlimg {
  height: 15px;
  width: 15px;
}

.player-button {
  min-width: 40px;
}

.minimized {
-webkit-transform: translate(-500px, 500px) scale(0);
}

.display-none {
  display: none !important;
}

#minimizebtn:hover,
#minimizebtn2:hover,
#player-bottom-btn:hover,
#blog-bottom-btn:hover,
#closebtn:hover,
#closebtn2:hover,
#internet-explorer:hover,
#cd-player:hover,
.prev-track:hover,
.playpause-track:hover,
.next-track:hover,
.player-button:hover,
.seek_slider:hover,
a:hover,
#minimizebtn3:hover,
#closebtn3:hover,
#chat-bottom-btn:hover,
#documents-chat,
#log-off,
#shut-down,
#bottom-button-start {
  cursor: url("win98-pointer.png"), pointer;
}

/* START MENU */
#start-menu {
  width: 160px;
  position: absolute;
  z-index: 2;
  left: 0.3%;
  bottom: 3.5%;
  display: flex;
  flex-direction: column;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 5px;
}

.menu-item p {
  margin: 5px 0px 5px 0px;
}

.start-line {
  border-top: 1px solid grey;
  border-bottom: 1px solid white;
  width: 150px;
  margin-left: 5px;
}

.menu-item:hover {
  background-color: #dfdfdf;
}

.start-arrow {
  text-align: right;
  height: 8px;
}

.arrows {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 14.5%;
  right: 5%;
  gap: 15.1px;
}

#start-menu a {
  color: #222 !important;
  text-decoration: none;
}

#start-menu a:visited {
  color: #222 !important;
  text-decoration: none;
}

.return-button {
  display: none;
}

/* CHAT */
#chat-window {
  width: 310px;
  position: absolute;
  left: 7.5%;
  top: 11%;
  transition: 0.3s all;
}

#chat-title-bar {
  background: linear-gradient(90deg, #86a1f1, #e8bfe4);
}

#chat-main-view {
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  display: block;
  margin: 0 auto;
  padding: 3px 2px 2px 2px;
  height: 400px;
}

/* RESPONSIVENESS */
@media screen and (max-height: 950px) {
  #blog-contents {
    height: 65vh;
  }
}

@media screen and (max-width: 1440px) {
  #chat-window {
    display: none;
  }
}

@media screen and (max-width: 1350px) {
  .player {
    display: none;
  }
}

@media screen and (max-width: 1080px) {
  #desktop-icons {
    display: none;
  }

  #browser-window {
    position: static;
    margin: 0 auto;
    height: 95vh;
    width: 90vw;
  }

  #blog-contents {
    width: 80vw;
    height: 83vh;
    margin-left: 2vw;
    margin-right: 3vw;
  }

  #blog-main-view {
    height: 87vh;
  }

  #edit-bar,
  #explorer-icons,
  #address-bar,
  #browser-scroll-bar,
  #browser-bottom-info {
    display: none;
  }

  .return-button {
    display: block;
    font-size: 13px;
  }
}

@media screen and (max-height: 700px) {
  #blog-contents {
    height: 80vh;
  }

  #blog-main-view {
    height: 85vh;
  }
}

@media screen and (max-height: 580px) {
  #blog-contents {
    height: 78vh;
  }

  #blog-main-view {
    height: 83vh;
  }
}

@media screen and (max-height: 470px) {
  #blog-contents {
    height: 72vh;
  }

  #blog-main-view {
    height: 80vh;
  }
}

@media screen and (max-height: 370px) {
  #blog-contents {
    height: 68vh;
  }

  #blog-main-view {
    height: 75vh;
  }
}

@media screen and (max-height: 950px) and (max-width: 1080px) {
  #bottom-bar {
    display: none;
  }

  #blog-contents {
    height: 68vh;
  }

  .return-button {
    display: block;
    font-size: 13px;
  }
}