/*⫘⫘⫘Este archivo CSS (Cascading Style Sheets) contiene los estilos para la página actual⫘⫘⫘*/

/*En caso de que alguien lo necesitara eh escrito un comentario en cada linea de codigo... no tengo amigos y estoy muy solo.*/
/* Estilos para la página de inicio al estilo Windows 95. Posteriormente la idea se abandono y decidi quedarme con la estetica y los colores. */
body{
    margin: 0; /*Margen de la pagina*/
    padding-bottom: 40px; /* espacio para la barra */
    font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif; /*La fuente típica de Windows 95 y alternativas por si la principal no esta disponible */
    background: #008080; /* color típico del escritorio */
}
/*Configuraciones del texto*/
/*Por el momento no me eh decidido en el diseño del texto*/

/*⫘⫘⫘Fondo de la pantalla⫘⫘⫘ */
/*Anteriormente era una imagen del logo del windows 95 pero decidi cambiarlo por un patron de ciervitos inspirandome de la pagina oculta de Noelle Bukaru. Te quiero mucho, gracias por inspirarme. */
#background {
z-index: -3;/**/
position: fixed;/**/
top: 0;/**/
left: 0;/**/
width: 200%; /* Set to larger than 100% to allow scrolling */
height: 200%;/**/
background-image: url('https://mydarkroom.neocities.org/Resources/background/the-deer.png'); /* Example background image */
background-repeat: repeat;/**/
animation: scrollBackground 60s linear infinite;/**/
image-rendering: pixelated; /* Optional: for a pixelated effect */
margin: 0%;/**/
}
/*Animacion de ciervos de fondo*/
@media screen {
@keyframes scrollBackground {
0% {
    transform: translate(0, 0);
}
100% {
    transform: translate(-50%, -50%); /* Diagonal movement */
}
}
/* Reset scrollbar styles */
::-webkit-scrollbar {
    width: auto;
    height: auto;
}

/* Remove double arrows from scrollbar buttons */
::-webkit-scrollbar-button {
    display:none; /* Hide scrollbar buttons */
}
}

/*Imagen del arbol arriba a la derecha de la pantalla*/
.CherryBlossom {
    z-index: 0; /* Ensure it is above the background */
    position: fixed;
    top: 0%;
    left: 40%;
    width: 100%;
    height: 95%;
}
/*Hello Gif*/
.Hello {
    z-index: -2; /* Ensure it is above the background */
    position: fixed;
    top: 15%;
    left: 86%;
    width: 20%;
    height: 30%;
}
/*Configuración de la escritorio*/
/*Basicamente es la forma en la que declaramos el como va a estar posicionado los iconos.*/
.desktop {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-auto-rows: 100px;
    gap: 10px;
    padding: 10px;
    background: none; /* color típico */
    height: 100vh;
    box-sizing: border-box;
}
.desktop2 {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 6%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-auto-rows: 100px;
    gap: 10px;
    padding: 10px;
    background: none; /* color típico */
    height: 100vh;
    box-sizing: border-box;
}
/*Clase en la que se definen los iconos del escritorio*/
.icon {
width: 80px;
text-align: center;
font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
background-color: none;
color: white;
cursor: pointer;
user-select: none;
text-decoration: none;
}
/*Configuración de la imagen del icono*/
.icon img {
width: 48px;
height: 48px;
margin-bottom: 5px;
border: 2px solid none;
box-shadow:
1px 1px 0 none,
2px 2px 0 none;
background: none;
}
.icon:active img {
border-color: #0015ff;
}
/*Barra de tareas y sus componentes*/
.taskbar{
    z-index: 2;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #c0c0c0;
    border-top: 2px solid #fff; /* borde claro arriba */
    border-left: 2px solid #fff; /* borde claro a la izquierda*/
    border-bottom: 2px solid #404040; /* borde oscuro abajo */
    border-right: 2px solid #404040; /* borde oscuro a la derecha */
    display: flex;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;
}
/*Botón de inicio y su configuración*/
.start-button {
    background: #c0c0c0;
    border-top: 2px solid #fff; /* borde claro arriba */
    border-left: 2px solid #fff; /* borde claro a la izquierda*/
    border-bottom: 2px solid #404040; /* borde oscuro abajo */
    border-right: 2px solid #404040; /* borde oscuro a la derecha */
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
}
.start-button:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}
  /* Icono dentro del botón Inicio (opcional) */
.start-icon {
    width: 16px;
    height: 16px;
    background: url('https://static.wikitide.net/windowswallpaperwiki/8/8e/Forest_%28Windows_95%29.png') no-repeat center; /* Aquí podrías poner un icono real */
    margin-right: 5px;
}
  /* Área para botones de programas abiertos */
.taskbar-buttons {
    margin-left: 10px;
    display: flex;
    gap: 5px;
}
.taskbar-button {
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #404040;
    border-right: 2px solid #404040;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.taskbar-button:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}
/* Contenedor para hora y clima */
.taskbar-info {
    /*Visual*/
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    /*Configuración*/
    margin-left: auto; /* Empuja esta sección hacia la derecha */
    display: flex;
    gap: 15px;
    font-size: 13px;
    font-weight: bold;
    color: black;
    user-select: none;
}
/*Aplicaciones*/

/*「 ✦ Javier Enrique Martínez Hurtado ✦ 」*/