body{
    background-color: black;
    background: url(./imgs/back.png) no-repeat center center fixed;
    margin: 0;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    font-family: Tahoma, sans-serif;
}
#introVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: black;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 1s ease;
}
.fade-out {
  opacity: 0; 
}
.desktop {
  position: relative;
  width: 100%;
  height: 100dvh;
}

.desktop-icon {
  width: 64px;
  text-align: center;
  color: white;
  font-size: 0.8rem;
  font-family: Tahoma, sans-serif;
  cursor: pointer;
  
}
.desctop-icons{
  padding-top: 10px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.desktop-icon img {
  width: 48px;
  height: 48px;
}

.window {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 700px;
    transform: none;
    background: #106cdb;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: 3px solid #106cdb;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    z-index: 1000;
}
@media (max-width: 768px) {
    .window {
        width: 90vw;
        height: 60vh;
    }
}
.window-header {
  background: linear-gradient(rgb(0, 88, 238) 0%, rgb(53, 147, 255) 4%, rgb(40, 142, 255) 6%, rgb(18, 125, 255) 8%, rgb(3, 111, 252) 10%, rgb(2, 98, 238) 14%, rgb(0, 87, 229) 20%, rgb(0, 84, 227) 24%, rgb(0, 85, 235) 56%, rgb(0, 91, 245) 66%, rgb(2, 106, 254) 76%, rgb(0, 98, 239) 86%, rgb(0, 82, 214) 92%, rgb(0, 64, 171) 94%, rgb(0, 48, 146) 100%);
  color: white;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.window-header span{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mini-icon{
  width: 25px;
  height: auto;
}
.window iframe {
  width: 100%;
  height: calc(100% - 30px);
  border: none;
}
.buttons{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.close-btn {
  box-shadow: rgb(218, 70, 0) 0px -1px 2px 1px inset;
  background-image: radial-gradient(circle at 90% 90%, rgb(204, 70, 0) 0%, rgb(220, 101, 39) 55%, rgb(205, 117, 70) 70%, rgb(255, 204, 178) 90%, white 100%);
  border: none;
  color: white;
  cursor: pointer;
  margin-right: 1px;
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 3px;
  padding-top: 3px;
}
.max-btn {
  box-shadow: rgb(70, 70, 255) 0px -1px 2px 1px inset;
  background-image: radial-gradient(circle at 90% 90%, rgb(0, 84, 233) 0%, rgb(34, 99, 213) 55%, rgb(68, 121, 228) 70%, rgb(163, 187, 236) 90%, white 100%);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 3px;
  color: white;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.min-btn{
  box-shadow: rgb(70, 70, 255) 0px -1px 2px 1px inset;
  background-image: radial-gradient(circle at 90% 90%, rgb(0, 84, 233) 0%, rgb(34, 99, 213) 55%, rgb(68, 121, 228) 70%, rgb(163, 187, 236) 90%, white 100%);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 3px;
  color: white;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7px;
  font-weight: 900;
}

.max-b{
  width: 18px;
  height: 18px;
}
.max-btn:active {
    background-image: radial-gradient(circle at 90% 90%, rgb(0, 70, 192) 0%, rgb(27, 79, 169) 55%, rgb(57, 101, 188) 70%, rgb(129, 147, 185) 90%, white 100%);
}
.resizer {
    position: absolute;
    background: transparent;
    z-index: 2;
  touch-action: auto !important;
}

.resizer.top    { top: -2px; left: 0; height: 5px; width: 100%; cursor: n-resize; }
.resizer.bottom { bottom: -2px; left: 0; height: 5px; width: 100%; cursor: s-resize; }
.resizer.left   { left: -2px; top: 0; width: 5px; height: 100%; cursor: w-resize; }
.resizer.right  { right: -2px; top: 0; width: 5px; height: 100%; cursor: e-resize; }

.resizer.tl { top: -2px; left: -2px; width: 10px; height: 10px; cursor: nw-resize; z-index: 3; }
.resizer.tr { top: -2px; right: -2px; width: 10px; height: 10px; cursor: ne-resize; z-index: 3; }
.resizer.bl { bottom: -2px; left: -2px; width: 10px; height: 10px; cursor: sw-resize; z-index: 3; }
.resizer.br { bottom: -2px; right: -2px; width: 10px; height: 10px; cursor: se-resize; z-index: 3; }

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
      background: linear-gradient(rgb(31, 47, 134) 0px, 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%);
  display: flex;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
  color: white;
  font-family: Tahoma, sans-serif;
}

.clock {
  font-size: 13px;
  padding: 0 10px;
}
.taskbar-space {
  flex-grow: 1;
}

.start-button {
  display: flex;
  align-items: center;
}

.start-button img {
  height: 30px;
  margin-right: 5px;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.start-button img:hover{
  filter: brightness(1.2);
}
.start-button img:active{
  filter: brightness(0.8);
}
.start-menu {
  position: fixed;
  bottom: 45px;
  left: 5px;
  width: 320px;
  background: #f0f0f0;
  border: 2px solid #999;
  border-radius: 10px;
  display: none;
  flex-direction: column;
  box-shadow: 2px 2px 5px #0162cd;
  z-index: 9998;
}

.start-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.start-menu li {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  color: black;
}

.start-menu li:hover {
  background: #cce4ff;
}

.start-menu img {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.top-menu{
  padding-left: 10px;
  height: 60px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: linear-gradient(to top, #5b8bca, #0162cd);
  display: flex;
  align-items: center;
}
.top-menu img {
    border: 2px solid #999;
}
.low-menu{
  height: 50px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #106cdb;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
}
.low-cont{
  display: flex;
  align-items: center;
}
.taskbar-tasks{ 
  display:flex; 
  gap:6px; 
  flex:1; 
  align-items:center; 
  padding:0 6px; 
}
.task-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 200px;
  background-color: rgb(37, 106, 244);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Tahoma, sans-serif;
  font-size: 13px;
  border: none;
    box-shadow: rgba(0, 0, 0, 0.3) -1px 0px inset, rgba(255, 255, 255, 0.2) 1px 1px 1px inset;
}

.task-btn img {
  width: auto;
  height: 25px;
  object-fit: contain;
}
.task-btn.active{ 
    background-color: rgb(30, 82, 183);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.7) 1px 0px 1px inset;
}
@media (max-width: 1400px) {
  .task-btn span{
    display: none;
  }
  .task-btn {
    width: auto;
  }
}
.taskbar-right{
  padding-left: 10px;
  height: 100%;
  background: linear-gradient(rgb(12, 89, 185) 1%, 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%);
    border-left: 1px solid rgb(16, 66, 175);
    box-shadow: rgb(24, 187, 255) 1px 0px 1px inset;
    display: flex;
    align-items: center;
}






.skrep{
  position: fixed;    
  right: 10px;
  bottom: 50px;
  z-index: 1000;
}

.skrep-img {
  width: 100px;
  height: auto;
  display: block;
  cursor: pointer;
}


.skrep .popup-window {
  position: absolute;
  right: 0;                
  bottom: calc(100% + 8px); 
  display: none;          
  background: transparent;
  border: none;
  padding: 0;
}

.skrep .popup-window[aria-hidden="false"] {
  display: inline-block;    
}

.popup-img {
  display: block;
  max-width: 400px;
  height: auto;
}


.popup-window p {
  position: absolute;
  top: 48%;               
  left: 48%;                
  transform: translate(-50%, -50%);
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 700px) {
.popup-img {
  max-width: 300px;
}
.popup-window p {
  font-size: 0.6rem;
}
}



.gif-trigger {
    width: 64px;
    text-align: center;
    cursor: pointer;
    color: white;
    font-size: 0.8rem;
}

.gif-icon {
    width: 48px;
    height: 48px;
}

.gif-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    padding: 5px;
    z-index: 1000;
}

.gif-popup img {
    width: 200px;
    height: auto;
}