:root {
  --navbar-background: #edebeb;
  --dropdown-background: #e4e2e2;
  --dropdown-hover: #3399fe;
}

#navBar {
  /* border: 1px solid black; */
  height: calc(2.6vh + 3px);
  background-color: var(--navbar-background);
  font-family: Pixelify Sans;
  width: calc(100% - 2px);
  top: 0px;
  position: sticky;
  z-index: 11;
  -webkit-user-select: none;
  user-select: none;
}
#navBar p {
  margin: 0px;
}

.navButton {
  color: black;
  position: absolute;
  margin-top: 0px !important;
  padding-left: 5px;
  padding-right: 5px;
}
.navButton:hover {
  background-color: var(--dropdown-hover);
  border-color: var(--dropdown-hover);
  color: white;
}

.navDropdown {
  position: absolute;
  text-align: left;
  margin-top: 19px;
  color: black;
  z-index: 2;
  background-color: var(--dropdown-background);
}

#fileButton {
  text-align: center;
}

#fileDropdown.hidden {
  display: none;
}

#selection {
  text-align: left;
  padding: 5px;
}
#selection:hover {
  background-color: var(--dropdown-hover);
  color: white;
}

.hidden {
  display: none;
}

#editButton {
  margin-left: 36px;
}

#editDropdown {
  margin-left: 36px;
}
#editDropdown.hidden {
  display: none;
}

#viewButton {
  margin-left: 79px !important;
}

#viewDropdown {
  margin-left: 100px;
}

#viewDropdown.hidden {
  display: none;
}

#navBar :hover {
  cursor: url("assets/cursors/w98normal.cur"), default;
}

.shortcut {
  cursor: url("assets/cursors/w98hand.cur"), pointer;
  -webkit-user-select: none;
  user-select: none;
  height: fit-content;
  width: fit-content;
  text-align: center;
}

.shortcut:hover {
  background-color: rgb(128, 128, 128, 0.5);
  border-style: dashed;
  border-width: 1px;
}

#entryMessage {
  /* display: none; */
  width: 100%;
  height: 100%;
  position: fixed;
  background: #00309c;
  color: white;
  top: 0px;
  left: 0px;
  z-index: 999999999999999999999999999;
}

#entryMessage.hidden {
  display: none;
  z-index: -1;
}

#window1 {
  position: absolute;
  top: 10px;
  right: 270px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 400px;
  width: 400px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window5 {
  position: absolute;
  top: 36vh;
  left: 14vw;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 400px;
  width: 400px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window12 {
  position: absolute;
  top: 36vh;
  left: 14vw;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 400px;
  width: 400px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window4 {
  position: absolute;
  top: 86px;
  left: 523px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 400px;
  width: 400px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window11 {
  position: absolute;
  top: 20vh;
  left: 30vw;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 500px; /* change to 500 when blog gets longer */
  width: 500px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window6 {
  position: absolute;
  top: 95px;
  left: 477px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 371px;
  width: 600px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window1.hidden {
  display: none;
}

#closeWindowButton2,
#closeWindowButton3 {
  background-image: url("assets/Exit.png");
  background-size: cover;
  height: 20px;
  width: 20px;
  position: absolute;
  right: 3px;
  top: 3px;
  cursor: url("assets/cursors/w98normal.cur"), default;
}

#closeWindowButton,
#closeWindowButton4,
#closeWindowButton6 {
  background-image: url("assets/Exit.png");
  background-size: cover;
  height: 20px;
  width: 20px;
  position: absolute;
  right: 5px;
  top: 6px;
  cursor: url("assets/cursors/w98normal.cur"), default;
}

#closeWindowButton:hover,
#closeWindowButton2:hover,
#closeWindowButton3:hover,
#closeWindowButton4:hover,
#closeWindowButton6:hover {
  background-image: url("assets/Exit-Shaded.png");
}

#window1Drag,
#window4Drag,
#window5Drag,
#window6Drag,
#window11Drag,
#window12Drag {
  cursor: url("assets/cursors/w98move.cur"), move;
  z-index: 10;
  background-color: #2196f3;
  background-image: linear-gradient(to top, #255dd4, #255dd4, #255dd4, #56a1ff);
  color: #fff;
  position: absolute;
  top: 0;
  width: calc(100% + 6px);
  height: 31px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-user-select: none;
  user-select: none;
}

#window2Drag,
#window3Drag,
#window7Drag,
#window8Drag,
#window9Drag,
#window10Drag {
  cursor: url("assets/cursors/w98move.cur"), move;
  z-index: 10;
  background-color: #2196f3;
  background-image: linear-gradient(
    to top,
    #255dd4,
    #255dd4,
    #255dd4,
    #255dd4,
    #56a1ff
  );
  color: #fff;
  position: absolute;
  top: 0;
  width: calc(100%);
  height: 25px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-user-select: none;
  user-select: none;
}

#window2 {
  position: absolute;
  top: 103px;
  left: 213px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 75px;
  width: 227px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
#window3 {
  position: absolute;
  top: 131px;
  left: 1004px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 85px;
  width: 120px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window7 {
  position: absolute;
  top: 295px;
  left: 373px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 66px;
  width: 119px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window8 {
  position: absolute;
  top: 328px;
  left: 291px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 66px;
  width: 119px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window9 {
  position: absolute;
  top: 381px;
  left: 990px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 70px;
  width: 135px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#window10 {
  position: absolute;
  top: 534px;
  left: 469px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  height: 83px;
  width: 166px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.webBox {
  border-left: 3px solid #255dd4;
  border-bottom: 3px solid #255dd4;
  border-right: 3px solid #255dd4;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: DOS;
}

#webBoxWindowOne,
#webBoxWindowFive {
  background-color: white;
  color: black;
  background-size: cover;
  z-index: 2;
  height: calc(100% - 32px);
  bottom: 0px;
  width: 100%;
  position: absolute;
}

#webBoxWindowFive {
  user-select: none;
}

#webBoxWindowFour {
  background-color: white;
  color: black;
  background-size: cover;
  z-index: 2;
  height: calc(100% - 32px);
  bottom: 0px;
  width: 100%;
  position: absolute;
  font-family: Cascadia Mono;
  text-align: left;
}

#webBoxWindowTwelve {
  background-color: white;
  color: black;
  background-size: cover;
  z-index: 2;
  height: calc(100% - 32px);
  bottom: 0px;
  width: 100%;
  position: absolute;
  font-family: Cascadia Mono;
  text-align: left;
}

#webBoxWindowSix {
  background-color: white;
  color: black;
  background-size: cover;
  z-index: 2;
  height: calc(100% - 32px);
  bottom: 0px;
  width: 100%;
  position: absolute;
  font-family: Cascadia Mono;
  text-align: left;
  overflow: hidden;
}

#stupidFuckingWorkingBulletPoints {
  list-style-position: inside;
  margin: 0px;
  padding-left: 0px;
  margin-bottom: 17px;
}

#startMenuButton {
  background-image: url("assets/start.png");
  background-size: cover;
}

#startMenuButton:hover {
  background-image: url("assets/start-hover.png");
}

#taskbar {
  position: fixed;
  width: 100%;
  height: 35px;
  bottom: 0px;
  left: 0px;
  background-color: white;
  background-image: linear-gradient(
    to top,
    #255dd4,
    #255dd4,
    #255dd4,
    #255dd4,
    #56a1ff
  );
}

#startMenu {
  position: fixed;
  border: 4px solid #165fc9;
  height: 500px;
  width: 400px;
  bottom: 35px;
  left: 0px;
  background-color: white;
  z-index: 9999999;
}

#startMenu.hidden {
  display: none;
}

#horriblyWrongIndicator {
  display: none;
}

html {
  background-color: grey;
  background-image: url("assets/windows_xp_14.jpg");
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  height: 100%;
}
.musicLink {
  text-decoration: none;
}

.aboutme-text-box {
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}
audio::-webkit-media-controls-panel {
  background-color: #8f8f8f;
}
audio {
  margin-top: 5px;
  margin-bottom: 10px;
}
.centered-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.youtube-img {
  height: 22px;
  margin-bottom: -7px;
}
.spotify-img {
  height: 15px;
  margin-bottom: -3px;
}
.soundcloud-img {
  height: 15px;
  margin-bottom: -3px;
  border-radius: 50%;
}

.applemusic-img {
  height: 15px;
  margin-bottom: -3px;
  margin-left: 5px;
}

#bottomBlueStartMenu {
  height: 40px;
  width: 100%;
  background-color: blue;
  background-image: linear-gradient(to top, #165fc9, #165fc9, #165fc9, #4087e1);
  position: absolute;
  bottom: 0px;
  left: 0px;
}

#topBlueStartMenu {
  height: 80px;
  width: 100%;
  background-image: linear-gradient(to top, #165fc9, #165fc9, #165fc9, #4087e1);
  position: absolute;
  top: 0px;
  left: 0px;
}

#topBlueStartMenu #userDisplay p {
  color: white;
  position: absolute;
  left: 80px;
  top: 30px;
  font-size: 30px;
  margin-top: 0px;
  font-family: Franklin Gothic Regular;
}

#topBlueStartMenu #userDisplay img {
  border: 2px solid grey;
  border-radius: 10px;
  position: absolute;
  left: 10px;
  top: 7px;
  height: 60px;
}

#welcomeUserLogin img {
  top: 12%;
  border: 2px solid grey;
  border-radius: 10px;
  position: absolute;
}

.desktopShortcutText {
  text-shadow: 2px 2px 4px #000000;
  font-family: Franklin Gothic Regular;
  color: white;
  user-select: none !important;
}

#welcomeBorder {
  border-left: 1px solid #7394e4;
  height: 500px;
  position: fixed;
  border-radius: 100%;
}

#welcomeUserLogin {
  height: 11%;
  width: 21%;
  margin-top: 10px;
  border-radius: 10px;
  position: fixed;
  right: 27%;
  user-select: none;
  cursor: url("assets/cursors/w98hand.cur"), pointer;
  top: 44%;
  opacity: 1;
  transition: opacity 0.2s linear;
}

#welcomeUserLogin:hover img {
  border: 2px solid yellow;
}

#welcomeSideLeft {
  animation: opacityIncrease 0.2s linear;
  height: 80%;
  width: 50%;
  position: fixed;
  right: 0px;
}

/* Dim when hovering parent */
#welcomeSideLeft:hover > #welcomeUserLogin {
  opacity: 0.6;
}

/* Restore when hovering the actual login */
#welcomeUserLogin:hover {
  opacity: 1 !important;
}

#guestUserSettings {
  height: 11%;
  width: 21%;
  margin-top: 10px;
  border-radius: 10px;
  position: fixed;
  right: 27%;
  user-select: none;
  top: 44%;
  opacity: 0;
  pointer-events: none;
  transition:
    top 0.6s ease,
    opacity 0.3s ease;
}

#guestUserSettings img {
  top: 12%;
  border: 2px solid grey;
  border-radius: 10px;
  position: absolute;
}

.guestUserSettingsTransition {
  top: 16% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#navigationMenuBackContainment {
  height: 100%;
  width: 20%;
  cursor: url("assets/cursors/w98normal.cur"), default;
}

#navigationMenuBackContainment:hover {
  background-color: #cfcbb7;
}

.musicRow {
  position: absolute;
  left: 47px;
  top: 69px; /* adjust to match your layout */
  display: flex;
  align-items: center;
  height: 16px;
  width: 72px;
  z-index: 1;
}

.musicRow img {
  height: 12px;
  margin-right: 4px;
}

.musicRow p {
  margin: 0;
  font-size: 12px;
}

.dropMusicRow {
  cursor: url("assets/cursors/w98hand.cur"), pointer !important;
}

.dropMusicRow:hover {
  background-color: rgb(202, 202, 202);
}

.music {
  text-align: left !important;
  position: relative;
  left: 10px;
}

details.music summary {
  cursor: url("assets/cursors/w98hand.cur"), pointer;
  list-style: none;
  position: relative;
  padding-left: 24px;
  user-select: none;
}

details.music summary::-webkit-details-marker {
  display: none;
}

details.music summary::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 2px;
  width: 12px;
  height: 12px;
  background-image: url("assets/Expand.png");
  background-size: contain;
  background-repeat: no-repeat;
}

details[open].music summary::before {
  background-image: url("assets/Collapse.png");
}

.dropMusicRow {
  position: relative;
  left: 30px;
  cursor: url("assets/cursors/w98normal.cur"), default;
  padding-left: 6px;
  width: 82px;
  user-select: none;
}

.dropMusicRow img {
  height: 12px;
  top: 3px;
  position: relative;
}

.dropMusicRow p {
  margin: 0;
  font-size: 12px;
}

.musicRow:hover {
  background-color: rgb(202, 202, 202);
}

#bottomBlueStartMenu #restartIcon {
  height: 33px;
  width: 33px;
  position: absolute;
  top: 5px;
  right: 8px;
  background-image: url("assets/Restart.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#bottomBlueStartMenu #restartIcon:hover {
  height: 33px;
  width: 33px;
  position: absolute;
  top: 5px;
  right: 8px;
  background-image: url("assets/Restart-shaded.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#changeBackgroundBliss:hover,
#changeBackgroundLilies:hover,
#changeBackgroundTulips:hover {
  background-color: #cfcbb7;
}

#webBoxWindowEleven {
  background-color: white;
  color: black;
  background-size: cover;
  z-index: 2;
  height: calc(100% - 32px);
  bottom: 0px;
  width: 100%;
  position: absolute;
  font-family: Cascadia Mono;
  text-align: left;
}

#todoListWindowEleven {
  background-color: white;
  color: black;
  background-size: cover;
  z-index: 2;
  height: 100%;
  bottom: 0px;
  width: 100%;
  position: absolute;
  font-family: Cascadia Mono;
  text-align: left;
}

.blogh3 {
  margin-left: 10px;
  margin-bottom: 0px;
  margin-right: 10px;
  margin-top: 0px;
  font-size: 30px;
}

a,
button,
summary,
label,
input,
[role="button"] {
  cursor: url("assets/cursors/w98hand.cur"), pointer !important;
}

textarea,
[contenteditable="true"] {
  cursor: url("assets/cursors/w98text.cur"), text;
}

#contextMenu {
  background-color: rgb(188, 188, 188);
  height: fit-content;
  width: fit-content;
  position: fixed;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  z-index: 999999999999999999999999;
}

@keyframes fadeOut {
  60% {
    opacity: 50%;
  }

  100% {
    opacity: 0%;
  }
}

.option {
  width: 100%;
  user-select: none;
  position: relative;
  border-bottom: 1px solid grey;
  border-top: 1px solid white;
  cursor: url("assets/cursors/w98hand.cur"), pointer;
}

.topOption {
  width: 100%;
  user-select: none;
  position: relative;
  border-bottom: 1px solid grey;
  cursor: url("assets/cursors/w98hand.cur"), pointer;
}

.bottomOption {
  width: 100%;
  user-select: none;
  position: relative;
  border-top: 1px solid white;
  cursor: url("assets/cursors/w98hand.cur"), pointer;
}

.option:hover,
.topOption:hover,
.bottomOption:hover {
  background-color: rgb(157, 157, 157);
}

a {
  color: #008cff;
}

a:hover {
  color: red;
}
