body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Tahoma', sans-serif; /* Carattere usato in Windows 95 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Aggiunto per posizionare la barra in basso */
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(155, 155, 155); /* Schermo blu */
    overflow: hidden;
    z-index: 0; /* Assicura che sia dietro tutto il resto */
}

.line {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: white; /* Linee bianche */
    animation: blink 1s step-end infinite, move 10s linear infinite;
    z-index: 1; /* Ensure lines are above the background */
}

.thick-line {
    height: 3px; /* Linee più spesse (il triplo) */
    background-color: white; /* Linee bianche */
}

.dark-blue-thick-line {
    height: 3px; /* Linee più spesse (il triplo) */
    background-color: darkblue; /* Linee blu scuro */
}

.half-thick-line {
    height: 0.5px; /* Linee sottili la metà */
    background-color: white; /* Linee bianche */
}

.vertical-line {
    width: 6px; /* Spessore delle linee verticali raddoppiato */
    height: 100%; /* Altezza delle linee verticali */
    background-color: rgb(155, 155, 155); /* Linee blu */
}

@keyframes move {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes rainbow-bg {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.marquee {
    position: absolute;
    top: 0;
    right: 0;
    width: 200%;
    height: 240px; /* 4 volte l'altezza originale di 30px */
    color: yellow; /* Colore del font giallo */
    z-index: 2; /* Ensure the marquee is above the lines */
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center; /* Centra verticalmente */
}

.marquee p {
    display: inline-block;
    animation: marquee 15s linear infinite;
    font-size: 16em; /* 8 volte la dimensione originale del testo */
    text-shadow: 
        4px 4px 0 #000, 
        -4px -4px 0 #000, 
        4px -4px 0 #000, 
        -4px 4px 0 #000, /* Contorno nero più spesso */
        0px 4px 0 #000, 
        4px 0px 0 #000, 
        0px -4px 0 #000, 
        -4px 0px 0 #000;
    font-family: 'Tahoma', sans-serif; /* Changed to Tahoma */
}

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

@keyframes rainbow-text {
    0% { color: red; }
    16% { color: orange; }
    32% { color: yellow; }
    48% { color: green; }
    64% { color: blue; }
    80% { color: indigo; }
    100% { color: violet; }
}

.marquee p span.rainbow {
    animation: rainbow-text 1s infinite; /* Doubled the speed of the animation */
}

.icon-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2; /* Assicura che le icone siano sopra la scritta */
    width: 50px; /* Larghezza fissa per tutte le icone */
    height: 70px; /* Altezza fissa per tutte le icone */
    margin: 10px; /* Margine per separare le icone */
}

.icon-wrapper img {
    width: 46px; /* Larghezza dell'icona */
    height: 46px; /* Altezza dell'icona */
}

 

.icon-label {
    font-family: "MS Sans Serif", sans-serif; /* Font in stile Windows 95 */
    font-size: 12px; /* Dimensione del testo */
    margin-top: 5px;
    text-align: center;
    background-color: yellow; /* Sfondo giallo */
}
.continue-button {
    width: 100px; /* Larghezza del bottone */
    height: 30px; /* Altezza del bottone */
    background-color: #C0C0C0; /* Colore di sfondo in stile Windows 95 */
    border: 2px solid #000; /* Bordo nero */
    cursor: pointer; /* Cambia il cursore quando si passa sopra il bottone */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Rimuove il padding del bottone */
    font-family: "MS Sans Serif", sans-serif; /* Font in stile Windows 95 */
    font-weight: bold; /* Testo in grassetto */
    box-shadow: 2px 2px #808080, -2px -2px #fff; /* Ombra in stile Windows 95 */
    color: #000; /* Colore del testo */
    text-align: center; /* Allinea il testo al centro */
}
.music-button, .folder-button, .showbusiness-button, .mail-button, .graphics-button {
    width: auto; /* Adatta la larghezza al contenuto */
    height: auto; /* Adatta l'altezza al contenuto */
    background-color: transparent; /* Rimuove lo sfondo grigio chiaro */
    border: none; /* Rimuove il bordo */
    cursor: pointer; /* Cambia il cursore quando si passa sopra il bottone */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Rimuove il padding del bottone */
    font-family: "MS Sans Serif", sans-serif; /* Font in stile Windows 95 */
    font-weight: bold; /* Testo in grassetto */
    color: #000; /* Colore del testo */
    text-align: center; /* Allinea il testo al centro */
}

.music-button img, .folder-button img, .showbusiness-button img, .mail-button img, .graphics-button img {
    max-width: 100%;
    max-height: 100%;
}

.continue-button:hover {
    background-color: #fff; /* Cambia il colore di sfondo al passaggio del mouse */
}

.music-button img, .folder-button img {
    max-width: 100%;
    max-height: 100%;
}

.hidden-audio {
    display: none;
}

.window {
    width: 300px;
    border: 2px solid #000;
    background: #c0c0c0;
    box-shadow: 3px 3px #808080;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra la finestra */
    z-index: 3; /* Assicura che le finestre siano sopra la scritta */
}

#mainWindow {
    z-index: 3; /* Assicura che la finestra principale sia sopra lo sfondo */
}

#musicWindow {
    z-index: 4; /* Assicura che la finestra musicale sia sopra tutto */
}

#illustrationWindow {
    width: 80vw; /* Set width relative to the viewport */
    height: 80vh; /* Set height relative to the viewport */
    z-index: 4; /* Ensure the illustration window is above everything else */
    top: 10%; /* Position 10% from the top edge of the screen */
    left: 50%;
    transform: translate(-50%, 0); /* Center horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#illustrationSlider {
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensure the images do not overflow */
    position: relative;
    margin-top: 0; /* Remove the space between the two sliders */
}

.title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0e000;
    color: #000000;
    padding: 2px;
    height: 20px;
}

.title-bar-text {
    margin-left: 5px;
    font-weight: bold;
}

.title-bar-controls {
    display: flex;
}

.close-button {
    width: 20px;
    height: 20px;
    border: none;
    background: #f0e000;
    text-align: center;
    cursor: pointer;
    line-height: 20px; /* Centra la "X" verticalmente */
}

.close-button:hover {
    background: #fff;
}

.rainbow-text {
    animation: rainbow-text 0.5s infinite; /* Double the speed of the animation */
}

@keyframes rainbow-text {
    0% { color: red; }
    16% { color: orange; }
    32% { color: yellow; }
    48% { color: green; }
    64% { color: blue; }
    80% { color: indigo; }
    100% { color: violet; }
}

.window-body {
    padding: 10px;
}

.content {
    background: #c0c0c0; /* Sfondo grigio stile Windows 95 */
    border: 2px solid #000;
    padding: 10px;
    box-shadow: inset 2px 2px #808080, inset -2px -2px #fff;
}

.music-file-button {
    display: block;
    margin: 10px auto;
    padding: 5px 20px;
    background: #c0c0c0;
    border: 2px solid #000;
    box-shadow: 2px 2px #808080, -2px -2px #fff;
    cursor: pointer;
}

.music-file-button.selected {
    background: #fff; /* Highlight the selected button */
}

.music-file-button:hover {
    background: #fff;
}

.play-button {
    display: block;
    margin: 10px auto;
    padding: 5px 20px;
    background: #c0c0c0;
    border: 2px solid #000;
    box-shadow: 2px 2px #808080, -2px -2px #fff;
    cursor: pointer;
}

.play-button:hover {
    background: #fff;
}

#illustrationContainer {
    position: relative;
    width: 100%;
    height: calc(100% - 50px); /* Adjust height to account for title bar */
    overflow: hidden; /* Ensure the images do not overflow */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; /* Add space below the title bar */
}

.illustration-img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 2s ease-in-out; /* Double the duration for crossfade effect */
}

#illustrationImg2 {
    z-index: 2; /* Ensure the second image is above the first */
}

#illustrationFullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Ensure it is above everything else */
    overflow: hidden;
}

.illustration-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-fullscreen-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: #c0c0c0;
    border: 2px solid #000;
    color: #000;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 6; /* Ensure it is above the fullscreen content */
}

.close-fullscreen-button:hover {
    background-color: #fff;
}

/* Remove or comment out redundant styles */
/* 
.illustration-item {
    flex: 0 0 50%; 
    display: flex;
    justify-content: center;
    align-items: center.
}

.illustration-item img {
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
    display: block.
    transition: transform 0.2s.
}

#illustrationSlider2 {
    width: 100%;
    height: calc(100% - 50px); 
    overflow: hidden.
    position: relative.
    margin-top: 0; 
}

.illustration-container img {
    width: fit-content; 
    height: fit-content; 
    object-fit: contain; 
    display: block.
    transition: transform 0.2s.
}

#illustrationImg {
    width: 100%; 
    height: auto; 
    object-fit: contain; 
    display: block.
    border: 2px solid #000.
    transition: opacity 1s ease-in-out.
}

#illustrationFullscreen {
    position: fixed.
    top: 0.
    left: 0.
    width: 100vw.
    height: 100vh.
    background-color: black.
    display: flex.
    justify-content: center.
    align-items: center.
    z-index: 5; 
    overflow: hidden.
}

.illustration-slider {
    display: flex.
    width: 400%; 
    height: 100%.
    animation: scrollImages 12s linear infinite.
}

.illustration-slide {
    flex: 0 0 25%; 
    display: flex.
    justify-content: center.
    align-items: center.
}

.illustration-slide img {
    max-width: 100%.
    max-height: 100%.
    object-fit: contain.
}

@keyframes scrollImages {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

#illustrationFullscreen img {
    max-width: 100%.
    max-height: 100%.
    object-fit: contain.
}
*/

.controls {
    display: none; /* Hide controls */ß
}

#timeline {
    width: 100%;
    margin-top: 10px;
}

.taskbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #C0C0C0;
    border-top: 2px solid #000;
    padding: 2px;
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0; /* Posiziona la barra di avvio in basso */
    z-index: 5; /* Assicura che la barra sia sopra tutto il resto */
    transition: bottom 0.3s ease; /* Aggiunge una transizione per il movimento */
}

.taskbar.up {
    bottom: 10%; /* Sposta la barra del 20% verso l'alto */
}

.start-button {
    background-color: #C0C0C0;
    border: 2px solid #000;
    padding: 2px 10px;
    cursor: pointer;
    box-shadow: 2px 2px #808080, -2px -2px #fff;
    font-weight: bold;
    position: absolute;
    left: 2%; /* Sposta il pulsante Start il 10% a destra */
}

.start-button:hover {
    background-color: #fff;
}

.taskbar-time {
    margin-left: auto; /* Sposta l'orologio tutto a destra */
    margin-right: 10px;
    font-weight: bold;
    color: #000;
}

.blinking-text {
    color: red;
    font-weight: bold;
    margin-right: auto;
    animation: blink-text 1s infinite;
}

@keyframes blink-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.time-display {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-family: 'Tahoma', sans-serif;
    font-size: 14px;
}

.enlarged-icon {
    transform: scale(2); /* Enlarge the icon to twice its original size */
}

.reduced-icon {
    transform: scale(0.75); /* Reduce the icon to three-quarters of its current size */
}

.increased-icon {
    transform: scale(1.75); /* Increase the icon to one and three-quarters of its original size */
}