/* General settings for body and html */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  /* Establishes a stacking context for children */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('pictures/computeroverlay.png') repeat;
  animation: scanline-move 20s linear infinite;
  opacity: 0.8;
  /* Adjust opacity for desired effect */
  pointer-events: none;
  /* Allows interaction with elements below */
  z-index: 9999;
  /* High z-index to stay above other content */
}

/* Define the animation */
@keyframes scanline-move {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -1000px -1000px;
    /* Adjust movement distance */
  }
}

/* Background container styles */
.background-container {
  background-image: url('pictures/windowsbackground.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: black;
  /* Fallback background color */
}

/* Loading Screen Styles */
.loading-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 1s ease;
  /* Fade-out transition */
}

.loading-screen img {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
}

/* Responsive adjustments for larger screens */
@media (min-width: 768px) {
  .loading-screen img {
    max-width: 400vw;
    max-height: 400vh;
  }
}

@media (min-width: 1200px) {
  .loading-screen img {
    max-width: 400vw;
    max-height: 400vh;
  }
}

/* Blue bar at the bottom of the screen */
.bluebar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 35px;
  width: 100%;
  background: linear-gradient(rgb(31, 47, 134), rgb(49, 101, 196) 3%, rgb(54, 130, 229) 6%, rgb(68, 144, 230) 10%, rgb(56, 131, 229) 12%, rgb(43, 113, 224) 15%, rgb(38, 99, 218) 18%, rgb(35, 91, 214) 20%, rgb(34, 88, 213) 23%, rgb(33, 87, 214) 38%, rgb(36, 93, 219) 54%, rgb(37, 98, 223) 86%, rgb(36, 95, 220) 89%, rgb(33, 88, 212) 92%, rgb(29, 78, 192) 95%, rgb(25, 65, 165) 98%);
  z-index: 1000;
}

/* Start button styling */
.startbtn {
  background-image: url("pictures/xp_btn_norm.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 120px;
  height: 35px;
  outline: none;
  position: relative;
  z-index: 20;
}

.startbtn:hover:not(.active) {
  background-image: url("pictures/xp_btn_hover.png");
}

.startbtn.active {
  background-image: url("pictures/xp_btn_clicked.png");
}

/* Tab bar styles */
.tabbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  height: 100%;
  z-index: 2;
}

/* Icon tray styling */
.icontray {
  width: 170px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: linear-gradient(rgb(12, 89, 185), rgb(19, 158, 233) 6%, rgb(24, 181, 242) 10%, rgb(19, 155, 235) 14%, rgb(18, 144, 232) 19%, rgb(13, 141, 234) 63%, rgb(13, 159, 241) 81%, rgb(15, 158, 237) 88%, rgb(17, 155, 233) 91%, rgb(19, 146, 226) 94%, rgb(19, 126, 215) 97%, rgb(9, 91, 201) 100%);
  box-shadow: rgb(24 187 255) 1px 0px 1px inset;
  z-index: 3;
}

/* Icon row settings */
.iconrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  margin: 0px;
  width: 90px;
  overflow: visible;
  z-index: 3;
}

/* Time display settings */
.time-display {
  color: white;
  font-family: Tahoma, Arial, sans-serif;
  position: absolute;
  right: 10px;
  font-size: 0.7em;
  font-weight: 550;
  z-index: 3;
}

/* Default icon sizes for all screens */
.iconrow img {
  width: 20px;
  height: 20px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .time-display span {
    font-size: 0.5em;
  }

  .iconrow img {
    width: 13px;
    /* Smaller size for smaller screens */
    height: 13px;
  }
}

/* Tab item styling */
.tab-item {
  padding: 3.8px 15px;
  /* Increased horizontal padding */
  background-color: #3251b1;
  border-radius: 2px;
  margin: 2px 2px 0;
  /* Adjusted margin-top */
  display: inline-flex;
  align-items: center;
  box-shadow: inset 3px 0 5px rgba(0, 0, 0, 0.3),
    /* Reversed inset box-shadow for more density on the right */
    inset 3px 0 3px rgba(0, 0, 0, 0.5);
  /* Additional inset box-shadow for more pronounced effect */
}

/* Icon styling */
.tab-item img {
  width: 20px;
  height: auto;
  margin-right: 5px;
}

/* Text styling within the tab item */
.tab-item span {
  color: white;
  font-family: Tahoma, Arial, sans-serif;
  /* Change font family */
}