*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Jersey 15', sans-serif;
    font-weight: 100;
    font-style: normal;
}
body {
    background-image: url('https://i.redd.it/nw9u2wyo9hqc1.gif');
    background-color: #C0C0C0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    height: 100%;
    padding: 70px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-content: flex-start;
    flex-direction: column;
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    font-family: "MS Sans Serif", sans-serif;
    font-size: 12px;
}

.loading-window {
    background: transparent;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right: 2px solid #808080;
    padding: 15px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.windows-logo {
    width: 100px;
    margin: 10px 20px;
    display: block;
}

.loading-text {
    margin: 20px;
    color: black;
}

.progress-bar-container {
    width: 280px;
    height: 14px;
    margin: 10px auto;
    background: #FFFFFF;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: #000080;
    transition: width 0.2s linear;
}


.launcher {
    background: transparent;
    border: none;
    width: 50px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    position: relative;
    text-decoration: wavy;
    gap: 10px;
    opacity: 50%;
}

.launcher:hover{
    width: 60px;
    opacity: 80%;
    transition: all 0.3s;
}


.window {
    position: absolute;
    display: none;
    width: 500px;
    background: #C0C0C0;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right: 2px solid #808080;
    font-size: 12px;
    overflow: hidden;
    box-shadow: none;
    z-index: 1000;
}

.navbar {
    background: #000080;
    color: white;
    height: 20px;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: move;
    font-weight: bold;
    user-select: none;
    border-bottom: 2px solid #808080;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
}

.navbar:active {
    cursor: grabbing;
    background: #0000A0;
}

.close-btn {
    width: 18px;
    height: 18px;
    background: #C0C0C0;
    color: black;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #808080;
    border-right: 2px solid #808080;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.close-btn:hover {
    background: #FF0000;
    color: white;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}


/* === Ventana 1 estilos === */
.c1 {
    background: #C0C0C0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    color: black;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}

.c1::-webkit-scrollbar {
    width: 12px;
}

.c1::-webkit-scrollbar-track {
    background: #C0C0C0;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.c1::-webkit-scrollbar-thumb {
    background: #A0A0A0;
    border: 1px solid #808080;
}

.c1::-webkit-scrollbar-thumb:hover {
    background: #808080;
}


.t1-1 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}
.t1-2 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: span 2;
    text-align: center;
}
.t1-3 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-row: 3;
    grid-column: 2;
}
.t1-4 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}

.img1-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
}
.img1-1 img {
    width: 200px;
    height: auto;
    border: 1px solid #808080;
    background: #000;
    padding: 2px;
}
.img1-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
}
.img1-2 img {
    width: 200px;
    height: auto;
    border: 1px solid #808080;
    background: #E0E0E0;
    padding: 2px;
}
.img1-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
}
.img1-3 img {
    width: 200px;
    height: auto;
    border: 1px solid #808080;
    background: #E0E0E0;
    padding: 2px;
}

/* === Ventana 2 estilos === */
.c2 {
    background: #C0C0C0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    color: black;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}

.c2::-webkit-scrollbar {
    width: 12px;
}

.c2::-webkit-scrollbar-track {
    background: #C0C0C0;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.c2::-webkit-scrollbar-thumb {
    background: #A0A0A0;
    border: 1px solid #808080;
}

.c2::-webkit-scrollbar-thumb:hover {
    background: #808080;
}

.d2-1{
    grid-column: span 2;
    background: #FFFFFF;
    padding: 8px;
    font-size: 16px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    text-align: center;
}

.d2-1 > a{
    text-decoration: none;
    color: #0000A0;
    font-weight: bold;
}

.d2-1 > a:hover{
    text-decoration: underline;
    color: #0000A0;
    transition: all 0.3s;
}


.d2-2{
    grid-column: span 2;
    grid-row: 0;
    background: #FFFFFF;
    padding: 8px;
    font-size: 16px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    text-align: center;
}

.d2-2 > a{
    text-decoration: none;
    color: #0000A0;
    font-weight: bold;
}

.d2-2 > a:hover{
    text-decoration: underline;
    color: #0000A0;
    transition: all 0.3s;
}


.d2-3{
    grid-column: span 2;
    grid-row: 0;
    background: #FFFFFF;
    padding: 8px;
    font-size: 16px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    text-align: center;
}

.d2-3 > a{
    text-decoration: none;
    color: #0000A0;
    font-weight: bold;
}

.d2-3 > a:hover{
    text-decoration: underline;
    color: #0000A0;
    transition: all 0.3s;
}


.t2-1 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}
.t2-2 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    text-align: center;
    grid-column: span 2;
}
.t2-3 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-row: 4;
    grid-column: 2;
}
.t2-4 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}

.img2-1 {
    background-image: url(https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=984,h=590,fit=crop/YleqNP1zX5f36gKk/imagen_2025-02-01_012557885-mxBMOg6g0pC5vQBp.png);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
}
.img2-1 img {
    width: 200px;
    height: auto;
    border: 1px solid #808080;
    background: #E0E0E0;
    padding: 2px;
}
.img2-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
    grid-row: 4;
    grid-column: 1;
}
.img2-2 img {
    width: 200px;
    height: auto;
    border: 1px solid #808080;
    background: #E0E0E0;
    padding: 2px;
}
.img2-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
}
.img2-3 img {
    width: 150px;
    height: auto;
    border: 1px solid #808080;
    background: #E0E0E0;
    padding: 2px;
}

/* === Ventana 3 estilos === */
.c3 {
    background: #C0C0C0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    color: black;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}

.c3::-webkit-scrollbar {
    width: 12px;
}

.c3::-webkit-scrollbar-track {
    background: #C0C0C0;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.c3::-webkit-scrollbar-thumb {
    background: #A0A0A0;
    border: 1px solid #808080;
}

.c3::-webkit-scrollbar-thumb:hover {
    background: #808080;
}


.t3-1 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}
.t3-2 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: span 2;
    text-align: center;
}
.t3-3 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-row: 4;
    grid-column: span 2;
}
.t3-4 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-row: 6;
    grid-column: 2;
}

.img3-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
}
.img3-1 img {
    width: 180px;
    height: auto;
    border: 1px solid #808080;
    background: #E0E0E0;
    padding: 2px;
}
.img3-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
    grid-column: span 2;
}
.img3-2 img {
    width: 250px;
    height: auto;
    border: 1px solid #808080;
    background: #E0E0E0;
    padding: 2px;
}
.img3-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 8px;
    grid-row: 6;
}
.img3-3 img {
    width: 150px;
    height: auto;
    border: 1px solid #808080;
    background: #000;
    padding: 2px;
}

/* === Ventana 4 estilos === */
.c4 {
    background: #C0C0C0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    color: black;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}

.c4::-webkit-scrollbar {
    width: 12px;
}

.c4::-webkit-scrollbar-track {
    background: #C0C0C0;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.c4::-webkit-scrollbar-thumb {
    background: #A0A0A0;
    border: 1px solid #808080;
}

.c4::-webkit-scrollbar-thumb:hover {
    background: #808080;
}


.t4-1 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: span 2;
    text-align: center;
}
.t4-2 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    text-align: center;
}
.t4-3 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: 2;
    text-align: center;
}
.t4-4 {
    background: #d1363a;
    color: #fff;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: span 2;
    text-align: center;
    font-weight: 100;
}

.t4-4 > a:hover {
    text-decoration: underline;
    color: #fff;
}

.t4-4 > a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 100;

}

.img4-1 {
    background: #FFFFFF;
    color: transparent;
    height: 200px;
    background-image: url(/Interfaz\ Windows.png);
    background-size: cover;
    background-position: center;
    padding: 8px;
    font-size: 12px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: span 2;
    text-align: center;
}

/* === Ventana 6 estilos === */

.c6 {
    background: #C0C0C0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    color: black;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
}



.c6::-webkit-scrollbar {
    width: 12px;
}

.c6::-webkit-scrollbar-track {
    background: #C0C0C0;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.c6::-webkit-scrollbar-thumb {
    background: #A0A0A0;
    border: 1px solid #808080;
}

.c6::-webkit-scrollbar-thumb:hover {
    background: #808080;
}

.t6-1 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: span 2;
    grid-row-start: 2;
    text-align: center;

}

.t6-1 > a {
    text-decoration: none;
    text-decoration: wavy;
    font-size: 12.5px;
    color: #d1363a;
    transition: .5s;
}

.t6-1 > a:hover {
    text-decoration: underline;
    color: #d1363a;
}

.t6-2 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 12px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-column: span 2;
    grid-row-start: 4;
    text-align: center;
}

.t6-2 > a {
    text-decoration: none;
    text-decoration: wavy;
    font-size: 12.5px;
    color: #d1363a;
    transition: .5s;
}

.t6-2 > a:hover {
    text-decoration: underline;
    color: #d1363a;
}

.t6-3 {
    background: #FFFFFF;
    padding: 8px;
    font-size: 12px;
    line-height: 1.4;
    border-top: 1px solid #C0C0C0;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
    grid-row-start: 6;
    text-align: center;
    grid-column: span 2;
}

.t6-3 > a {
    text-decoration: none;
    text-decoration: wavy;
    font-size: 12.5px;
    color: #d1363a;
    transition: .5s;
}

.t6-3 > a:hover {
    text-decoration: underline;
    color: #d1363a;
}

.img6-1 {
    background-image: url(https://preview.redd.it/2y94rgbqas691.jpg?width=1080&crop=smart&auto=webp&s=f0b3a4833910cd5eec3d9d7cc4f0ed7ca824c532);
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    grid-column: span 2;
    width: 450px;
    height: 100px;
}

.img6-2 {

    background-image: url(https://localfame.com/wp-content/uploads/2019/05/instagram-banner--1024x350.png);
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    grid-column: span 2;
    width: 450px;
    height: 100px;
}

.img6-3 {
    background-image: url(https://creativereview.imgix.net/uploads/2023/07/twitterx-banner.jpg?auto=compress,format&crop=faces,entropy,edges&fit=crop&q=60&w=1920&h=600);
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    grid-column: span 2;
    width: 450px;
    height: 100px;
}

/* Contenedor Paint */
#paint-container {
    margin-top: 10px;
}

/* Toolbar Paint */
#paint-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
    user-select: none;
}

/* Botones Paint */
.paint-btn {
    padding: 4px 8px;
    cursor: pointer;
    background: #808080;
    color: white;
    border: none;
    border-radius: 2px;
    font-size: 12px;
    transition: background-color 0.2s ease;
}

.paint-btn:hover {
    background: #505050;
}

.paint-btn.active {
    background: #000080;
}

/* Canvas Paint */
#paintCanvas {
    border: 1px solid #808080;
    background: white;
    display: block;
}

#eraser-cursor {
    position: absolute;
    pointer-events: none; 
    border: 2px solid red; 
    border-radius: 50%;
    width: 20px;  
    height: 20px;
    transform: translate(-50%, -50%); 
    display: none; 
    z-index: 2000; 
}

@media (max-width: 768px) {
    body {
        padding: 5px;
        gap: 5px;
        background-size: cover; 
        background-position: center;
        min-height: 100vh;
        display: flex;
        flex-direction: row; 
        align-items: right; 
        justify-content: center;
        overflow-x: hidden; 
    }

    .launcher {
        width: 80px; 
        height: 80px; 
        font-size: 9px; 
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: flex;
        img {
            width: 40px; 
            height: 40px;
        }
        span {
            margin-top: 2px;
            white-space: nowrap; 
            font-size: 12px; 
        }
    }

    .window {
        position: fixed; 
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%); 
        width: 95vw; 
        max-width: 300px; 
        height: auto; 
        max-height: 30vh; 
        z-index: 1000;
        overflow-y: auto; 
        border-radius: 0; 
    }

    .navbar {
        height: 25px; 
        padding: 2px 5px;
        font-size: 11px;
        cursor: grab; 
    }

    .close-btn {
        width: 20px;
        height: 20px;
        font-size: 13px;
        margin-left: 5px;
    }


    .c1, .c2, .c3, .c4, .c6 {
        padding: 8px; 
        gap: 8px;
        grid-template-columns: 1fr; 
        max-height: none; 
        overflow-y: auto;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
        border-bottom: 1px solid #808080;
        border-right: 1px solid #808080;
    }

    .c1::-webkit-scrollbar,
    .c2::-webkit-scrollbar,
    .c3::-webkit-scrollbar,
    .c4::-webkit-scrollbar,
    .c6::-webkit-scrollbar {
        width: 8px; 
    }

    .c1::-webkit-scrollbar-track,
    .c2::-webkit-scrollbar-track,
    .c3::-webkit-scrollbar-track,
    .c4::-webkit-scrollbar-track,
    .c6::-webkit-scrollbar-track {
        background: #C0C0C0;
        border-left: 1px solid #FFFFFF;
        border-top: 1px solid #FFFFFF;
        border-right: 1px solid #808080;
        border-bottom: 1px solid #808080;
    }

    .c1::-webkit-scrollbar-thumb,
    .c2::-webkit-scrollbar-thumb,
    .c3::-webkit-scrollbar-thumb,
    .c4::-webkit-scrollbar-thumb,
    .c6::-webkit-scrollbar-thumb {
        background: #A0A0A0;
        border: 1px solid #808080;
        min-height: 20px; 
    }

    .c1::-webkit-scrollbar-thumb:hover,
    .c2::-webkit-scrollbar-thumb:hover,
    .c3::-webkit-scrollbar-thumb:hover,
    .c4::-webkit-scrollbar-thumb:hover,
    .c6::-webkit-scrollbar-thumb:hover {
        background: #808080;
    }


    .t1-1, .t1-2, .t1-3, .t1-4,
    .t2-1, .t2-2, .t2-3, .t2-4,
    .t3-1, .t3-2, .t3-3, .t3-4,
    .t4-1, .t4-2, .t4-3, .t4-4,
    .t6-1, .t6-2, .t6-3,
    .d2-1, .d2-2, .d2-3 {
        grid-column: span 1 !important; 
        grid-row: auto; 
        text-align: left; 
        font-size: 11px; 
        line-height: 1.3;
        padding: 6px;
        margin-bottom: 5px;
    }

    .t1-2, .t2-2, .t3-2, .t4-1, .t6-1 { 
        text-align: center;
    }

    .img1-1 img, .img1-2 img, .img1-3 img,
    .img2-1 img, .img2-2 img, .img2-3 img,
    .img3-1 img, .img3-2 img, .img3-3 img,
    .img4-1, .img4-2 img, .img4-3 img,
    .img6-1, .img6-2, .img6-3 {
        width: 100%; 
        max-width: 250px; 
        height: auto;
        margin: 0 auto; 
        display: block;
    }

    .img1-1, .img1-2, .img1-3,
    .img2-1, .img2-2, .img2-3,
    .img3-1, .img3-2, .img3-3,
    .img4-1, .img4-2, .img4-3,
    .img6-1, .img6-2, .img6-3 {
        grid-column: span 1 !important;
        text-align: center;
        padding: 6px;
        background: transparent;
    }

    .img6-1, .img6-2, .img6-3 {
        height: 80px; 
        width: 100%;
        background-size: cover;
        background-position: center;
    }


    .d2-1 a, .d2-2 a, .d2-3 a,
    .t4-4 a, .t6-1 a, .t6-2 a, .t6-3 a {
        font-size: 14px; 
        padding: 8px 12px; 
        display: inline-block;
        min-width: 120px; 
    }

    
    #paint-container {
        padding: 5px;
    }

    #paint-toolbar {
        flex-direction: column; 
        align-items: stretch;
        gap: 5px;
        margin-bottom: 5px;
    }

    .paint-btn {
        width: 100%; 
        padding: 8px;
        font-size: 11px;
    }

    #colorPicker, #brushSize {
        width: 100%; 
        padding: 5px;
        font-size: 11px;
    }

    #paintCanvas {
        width: 100% !important; 
        height: auto !important;
        max-height: 300px; 
        border: 1px solid #808080;
    }

    #eraser-cursor {
        width: 30px; 
        height: 30px;
        border-width: 3px;
    }


    .loading-window {
        padding: 10px;
        font-size: 11px;
    }

    .windows-logo {
        width: 80px;
    }

    .progress-bar-container {
        width: 200px;
    }

    body {
        -webkit-overflow-scrolling: touch; 
    }

    h1, h2 {
        font-size: 14px; 
    }

    p, span {
        font-size: 10px; 
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .launcher {
        width: 70px;
        height: 70px;
        img {
            width: 35px;
            height: 35px;
        }
        span {
            font-size: 7px;
        }
    }

    .window {
        width: 98vw;
        padding: 2px;
    }

    .c1, .c2, .c3, .c4, .c6 {
        padding: 5px;
        gap: 5px;
    }

    .t1-1, .t1-2, .t1-3, .t1-4,
    .t2-1, .t2-2, .t2-3, .t2-4,
    .t3-1, .t3-2, .t3-3, .t3-4,
    .t4-1, .t4-2, .t4-3, .t4-4,
    .t6-1, .t6-2, .t6-3,
    .d2-1, .d2-2, .d2-3 {
        padding: 4px;
        font-size: 10px;
    }

    .img1-1 img, .img1-2 img, .img1-3 img,
    .img2-1 img, .img2-2 img, .img2-3 img,
    .img3-1 img, .img3-2 img, .img3-3 img {
        max-width: 200px;
    }

    #paintCanvas {
        max-height: 250px;
    }

    h1, h2 {
        font-size: 12px;
    }

    p, span {
        font-size: 9px;
    }
}