.compatible {
    position: fixed;
    left: 5%;
    right: 5%;
    top: 5%;
    bottom: 5%;
    padding: 1rem;
    background-color: rgb(116, 116, 116);
    border: 5px solid rgb(59, 59, 59);
    
    /* Center content */
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Adjust font size for smaller screens */
.compatible p {
    margin: 0;
    font-size: 1.5rem;
}

/* Media query for tablets */
@media (max-width: 768px) {
    .compatible {
        left: 5%;
        right: 5%;
        top: 5%;
        bottom: 5%;
        padding: 0.5rem;
    }

    .compatible p {
        font-size: 1.25rem;
    }
}

/* Media query for mobile screens */
@media (max-width: 480px) {
    .compatible {
        left: 2%;
        right: 2%;
        top: 2%;
        bottom: 2%;
    }

    .compatible p {
        font-size: 1rem;
    }
}
@supports (-webkit-touch-callout: none) {
    .container {
        display: flex;
    }
  }

body {
    text-align: center;
    background-color: rgb(242, 242, 242);
}
h1 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
p {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

table {
    flex: 1;
    width: 500px;
    aspect-ratio: 1;
    margin-inline: auto;
    border-style: solid;
}
.Field {
    width: 100%;
    aspect-ratio: 1;
}
.more {
    font-size: 3vmin;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    background-color: rgb(176, 176, 176);
    border-color: rgb(203, 203, 203);
    border-style:solid;
    width: 30vmin;
    height: 5vh;
    margin-top: 2.3vh;
    
}
.more:hover {
    background-color: rgb(182, 182, 182);
}
.more:active {
    background-color: rgb(250, 250, 250);
}
.reset {
    margin-top: 2%;

    width: 20%;
    height: 5vh;
    font-weight: 3;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 3.5vmin;
}

footer {
    position: absolute;
    width: 100vw;
    height: 10vh;
    background-color: rgba(32, 32, 32, 0.398);
    bottom: 0;
    left: 0;
}

.x {
    background-color: rgb(237, 74, 74);
    border-color: beige;
}
.x:hover {
    background-color: rgb(223, 72, 72);
}
.x:active {
    background-color: rgb(172, 32, 32);
}

.o {
    background-color: rgb(74, 117, 237);
    border-color: beige;
}
.o:hover {
    background-color: rgb(72, 138, 223);
}
.o:active {
    background-color: rgb(32, 130, 172);
}

@media (max-width:550px) {
    table {
        width: 90%;
    }
}

.winscreen1, .winscreen2 {
    position: fixed;
    top: 10%;
    bottom: 10%;
    left: 5%;
    right: 5%;
    width: 90%;
    background-color: rgba(0, 0, 0, 0.313);
    height: 80%;
    backdrop-filter: blur(4px);
    border: 5px solid rgba(26, 26, 26, 0.301);  /* Border hinzugefügt */
    display: flex;           /* Aktiviert Flexbox */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center;     /* Zentriert den Inhalt vertikal */
    text-align: center;      /* Optional: stellt sicher, dass der Text selbst zentriert ist */
}


.winscreen1 p, .winscreen2 p {
    font-size: 5vmin; /* Responsives Text-Scaling */
    color: rgb(25, 25, 25);     /* Textfarbe, kannst du nach Bedarf anpassen */
    font-weight: bold; /* Optional: für fettgedruckten Text */
}


.win {
    display: none;
}