body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;

}


.head{
    /* background-image: url('blackjack.png'); */
    /* background-position: center center; */
    background-color: #2f4f4f;
    background-size: cover;
    background-attachment:fixed;
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 19px 38px 0px, rgba(0, 0, 0, 0.1) 0px 15px 12px 0px;
}


.head #aceDiamond {
    position: absolute;
    top: 50%; /* Umieszczamy kartę na środku wysokości */
    transform: translate(-25%, -50%) rotate(-10deg); /* Przesuwamy o połowę szerokości i wysokości, dodając obrót */
    width: 30vw; /* Karta dostosowuje się do szerokości ekranu */
}

.head #kingHeart {
    position: absolute;
    top: 50%; /* Umieszczamy kartę na środku wysokości */
    transform: translate(25%, -50%) rotate(10deg); /* Przesuwamy w poziomie, dodając obrót */
    width: 30vw; /* Karta dostosowuje się do szerokości ekranu */
}

.head .text {
    position: absolute;
    top: 60%; /* Umieszcza tekst delikatnie pod kartami */
    font-size: 8vw; /* Dynamiczna wielkość czcionki w zależności od szerokości ekranu */
    color: white;
    letter-spacing: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    text-align: center;
    width: 100%; /* Upewnia się, że tekst jest wyśrodkowany */
}


@media screen and (max-width: 1200px) {
    .head #kingHeart {
        width: 40vw;
    
    }
    .head #aceDiamond {
        width: 40vw;
    
    }
    .head .text {

        font-size: 10vw;
    }
    .head{
        height: 80vh;
    }

}

@media screen and (max-width: 600px) {
    .head #kingHeart {
        width: 50vw;
    
    }
    .head #aceDiamond {
        width: 50vw;
    
    }
    .head .text {

        font-size: 11vw;
    }

}

@media screen and (max-width: 500px) {
    .head #kingHeart {
        width: 55vw;
    
    }
    .head #aceDiamond {
        width: 55vw;
    
    }

}


.logo{
    color: #fff;
    font-size: 3em;
    filter: drop-shadow(15px 8px 13px #000);
    letter-spacing: 3px;
    /*font-weight: bold;*/

}


.icon {
    border: 0 !important;
    position: absolute !important; /* Pozycjonowanie względem najbliższego kontenera */
    top: 50px; /* Odległość od góry strony */
    right: 50px; /* Odległość od prawej strony */
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 2.2em;
    height: fit-content;
    z-index: 9999;
}



.nav{
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    background-color: #878788;
    color: #fff;
    width: 20%;
    transform: scaleX(0); /* zwijamy cały element */
    transform-origin: center right; /* ustawiamy punkt zwijania względem środka górnej krawędzi */
    transition: 200ms; /* wydłużamy wykonywanie stylów */
    visibility: hidden;
}


@media screen and (max-width: 1200px) {
    .nav{
        width: 45%;
    }

}

@media screen and (max-width: 600px) {
    .nav{
        width: 60%;
    }

}

@media screen and (max-width: 500px) {
    .nav{
        width: 80%;
    }
    .new{
        font-size: 1.1em;
    }

}





.nav.responsive{
    transform: scale(1);
    visibility: visible;
}

.nav ol li{
    list-style: none;
    line-height: 2.5em;
    font-size: 1.5em;
}

.nav ol li a{
    text-decoration: none;
    color: #fff;
}

.nav ol li ul li{

    font-size: 0.8em;
}

.nav ol li ul li a{
    text-decoration: none;
    color: #fff;
}

.nav ol li ul{
    display: none;
    background-color: #c6cfd8;
    border-radius: 0 5px 5px 5px;
    width: 70%;
}

.nav ol li:hover ul{
    display: block;
}

#close{
    position: absolute;
    bottom: 0;
    font-size: 3em;
}

.about-game {
    padding: 40px 20px;
    background-color: #ffffff;

    max-width: 1200px;
    margin: 0 auto;
}

.about-game header {
    margin-bottom: 20px;
}

.about-game h1 {
    font-size: 36px;
    color: #2f4f4f; /* Kolor nagłówka */
    text-align: center;
}

.about-game p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-game h3 {
    font-size: 28px;
    margin-top: 40px;
    color: #2f4f4f;
}

.about-game ul {
    list-style-type: none;
    padding: 0;
}

.about-game li {
    font-size: 18px;
    margin-bottom: 10px;
}

.about-game strong {
    color: #e74c3c;
}

/* Stylowanie sekcji "Pobierz grę" */
.download {
    padding: 40px 20px;
    background-color: #ffffff;
    text-align: center;
    max-width: 1200px;
    margin: 40px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.download header {
    margin-bottom: 20px;
}

.download h1 {
    font-size: 36px;
    color: #2f4f4f;
}


.download details {
    background-color: #ecf0f1;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
}

.download details summary {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.download details p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
    text-align: left;
}




/* Responsywność */
@media (max-width: 768px) {
    .about-game h1, .download h1 {
        font-size: 28px;
    }

    .about-game p, .about-game li, .download p {
        font-size: 16px;
    }

    .download button {
        font-size: 16px;
        padding: 12px 25px;
    }
}

.game-rules {
    padding: 40px 20px;
    background-color: #ffffff;
    text-align: center;
    max-width: 1200px;
    margin: 40px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.game-rules header {
    margin-bottom: 20px;
}

.game-rules h1 {
    font-size: 36px;
    color: #2f4f4f;
}

.game-rules .rule {
    background-color: #ecf0f1;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.game-rules .rule h3 {
    font-size: 24px;
    color: #e74c3c;
}

.game-rules .rule p {
    font-size: 18px;
    line-height: 1.6;
    margin-top: 10px;
}

/* Responsywność */
@media (max-width: 768px) {
    .game-rules h1 {
        font-size: 28px;
    }

    .game-rules .rule h3 {
        font-size: 20px;
    }

    .game-rules .rule p {
        font-size: 16px;
    }
}

/* Stylowanie sekcji "Strategia podstawowa" */
.basic-strategy {
    padding: 40px 20px;
    background-color: #ffffff;
    text-align: center;
    max-width: 1200px;
    margin: 40px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.basic-strategy header {
    margin-bottom: 20px;
}

.basic-strategy h1 {
    font-size: 36px;
    color: #2f4f4f;
}

.basic-strategy p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.basic-strategy h3 {
    font-size: 28px;
    margin-top: 40px;
    color: #e74c3c;
}

/* Stylowanie tabeli */
/* General styling for the table */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;

}

/* Styling for header cells */
.header-cell {
    background-color: #2f4f4f; /* Kolor tła */
    text-align: center;
    padding: 10px;
    color: white;
    box-sizing: border-box; /* Border będzie wewnątrz komórki */
    border: 2px solid #263737; /* 10% ciemniejszy od #2f4f4f */
}

.player-cards {
    background-color: #C0C0C0; /* Kolor tła */
    text-align: center;
    padding: 10px;
    box-sizing: border-box; /* Border będzie wewnątrz komórki */
    border: 2px solid #a8a8a8; /* 10% ciemniejszy od #C0C0C0 */
}


.inf {
    background-color: #ecf0f1; /* Kolor tła */
    text-align: center;
    padding: 10px;
    box-sizing: border-box; /* Zapewnia, że border jest wewnątrz komórki */
    border: 2px solid #ccd1d1; /* 10% ciemniejszy szary od #ecf0f1 */
}

/* Styling for action cells (H, D, S) */
.action-cell {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.action-cell.H {
    background-color: #00FF00;
    border: 2px solid #00CC00; /* 10% ciemniejszy zielony */
}

.action-cell.D {
    background-color: #00FFFF;
    border: 2px solid #00CCCC; /* 10% ciemniejszy cyan */
}

.action-cell.S {
    background-color: #FF0000;
    border: 2px solid #CC0000; /* 10% ciemniejszy czerwony */
}

.action-cell.P {
    background-color: #FFFF00;
    border: 2px solid #CCCC00; /* 10% ciemniejszy żółty */
}
/* Section styling */
.game-table {
    margin: 0 auto;
    max-width: 800px;
}


.legend p{
    text-align: left;
}

.contact {
    padding: 40px 20px;
    background-color: #ffffff;
    text-align: center;
    max-width: 1200px;
    margin: 40px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.contact header {
    margin-bottom: 20px;
}

.contact h1 {
    font-size: 36px;
    color: #2f4f4f;
}




button a{
    text-decoration: none;
    color: #2f4f4f;
    transition: color 0.5s;
}


button {
    border: 0;
    font-size: 20px;
}
  
button {
    margin-top: 10px;
    background-color: transparent;
    color: #2f4f4f;
    padding: 13px 36px;
    border: 2px solid #2f4f4f;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: color 0.5s;
}
  

button:hover a {
    color: white;
}
button:hover {
    color: white;
}
  
  
button:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 100%;
    width: 120%;
    height: 220%;
    background-color: #2f4f4f;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.6s ease;
}
  
button:hover:before {
    top: -50%;
    left: -10%;
}




.przyski{
    float: right;
    margin-right: 4%;
}

.przycisk{
    padding: 7px 18px;
    margin-top: 0;
}


.footer{
    width: 100%;
    background-color: #f7f7f7;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
    margin-top: 60px;
}