.flex-parent-element {
 display: flex;
  flex-wrap: nowrap; 
  
}

.flex-child-element {
  flex: 1;
  border: 2px solid blue;
  min-width: 0; 
  max-width: 100%;
  margin:10px;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #2400d6 #0f0f0f;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 9px;
  }

  *::-webkit-scrollbar-track {
    background: #0f0f0f;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #2400d6;
    border-radius: 5px;
    border: 2px dashed #0029a3;
  }
.zoom {
    zoom: 0.9;
    -moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;
}
.mother {
    transform: scale(0.9); 
    transform-origin: top center; 
}
.bigwrap {
 
  }
  
   .screen::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(19, 17, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.03), rgba(0, 0, 255, 0.08));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.028;
  }
  5% {
  opacity: 0.0355;
  }
  10% {
  opacity: 0.0245;
  }
  15% {
  opacity: 0.01061;
  }
  20% {
  opacity: 0.0182;
  }
  25% {
  opacity: 0.0107;
  }
  30% {
  opacity: 0.0182;
  }
  35% {
  opacity: 0.0237;
  }
}

.screen::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(19, 17, 16, 0.2);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}



.retro-window {
  width: 400px;
  background-color: #f8f8f8; 
  border: 2px solid #000; 
  box-shadow: inset -2px -2px #ddd, inset 2px 2px #fff, -4px 4px #000;
  font-family: 'Pixelated MS Sans Serif', Arial, sans-serif;
  position:absolute;
   top: 33px;
   right: 33px;
}

.retro-window .title-bar {
  background: linear-gradient(90deg, navy, #1084d0); 
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  font-weight: bold;
  font-size: 14px;
}

.retro-window .title-bar .title {
  text-align: left;
}

html body .retro-window .title-bar .close-buttn {
  background-color: red !important;
  color: white !important;
  border: none !important;
  width: 20px !important;
  height: 20px !important;
  text-align: center !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff !important;
}
.retro-window .content {
  text-align: center;
  padding: 20px;
}

.retro-window .content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 2px solid #000;
  box-shadow: inset -2px -2px #ddd, inset 2px 2px #fff;
}

.retro-window .content .caption {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  text-shadow: 1px 1px #fff, -1px -1px #aaa;
}

