/* General Styles */
body {
    font-family: Arial, sans-serif;
    background-image: url('background.jpg');
    background-size: cover; /* Dopasowuje obrazek do całego tła */
    background-position: center; /* Centruje obrazek */
    color: #8B0000; /* Dark red text */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    padding: 20px;
    background-color: #000000; /* Black background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    max-width: 400px; /* Limit container width */
    margin: 20px;
}

h1 {
    color: #8B0000; /* Dark red header */
    margin-top: 0;
}

h3 {
    color: #808080; /* grey header */
    margin-top: 0;
}

p {
    margin-bottom: 15px;
}

button {
    background-color: #000000; /* Dark red header */
    color: #808080;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    cursor: pointer;
    margin: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease-out, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Drop shadow effect */
}

button:hover {
    background-color: #8B0000; /* Darker shade of Google blue */
    transform: scale(1.05); /* Scale up on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

button:active {
    transform: scale(0.95); /* Scale down on click */
    box-shadow: none; /* Remove shadow on click */
}

/* Result Animation */
@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#result {
    animation: slideInDown 0.5s ease-out;
    margin-top: 20px;
    font-size: 16px;
}

/* Font Awesome Icon Style */
.fa-dice {
    margin-right: 10px;
}

/* Bottle Animation */
@keyframes spinBottle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1080deg); /* Full rotation */
    }
}

.spin-animation {
    animation: spinBottle 2s ease-out;
    transform-origin: center;
    transition: transform 2s ease-out;
}


/* Result Display */
#result {
    margin-top: 20px;
    font-size: 20px;
    padding: 10px;
    background-color: #211B1B; /* semi black background */
    border: 2px solid #000000; /* black border */
    border-radius: 5px;
    max-width: 300px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    display: none; /* Hidden by default */
}

#result.active {
    display: block; /* Show result when active class is added */
    animation: slideInDown 0.5s ease-out; /* Animation for sliding in */
}

@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#spinButton {
    background: url('penis_spin.jpg') no-repeat center center; /* Ustawia obrazek jako tło */
    background-size: cover; /* Wypełnia cały przycisk obrazkiem */
    width: 200px; /* Szerokość przycisku */
    height: 120px; /* Wysokość przycisku */
    border: none; /* Usuwa obramowanie */
    color: white; /* Kolor tekstu */
    font-size: 16px; /* Rozmiar tekstu */
    text-align: center; /* Wyrównanie tekstu na środku */
    line-height: 100px; /* Wysokość linii równa wysokości przycisku, co centrowuje tekst */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
}

.button-container {
    position: absolute; /* Umożliwia swobodne pozycjonowanie elementu */
    bottom: 20px; /* Odstęp od dolnej krawędzi okna */
    right: 20px; /* Odstęp od prawej krawędzi okna */
    background-color: rgba(255, 255, 255, 0.5); /* Ustawia półprzezroczyste białe tło */
    border: 1px solid #ccc; /* Szare obramowanie */
    border-radius: 5px; /* Zaokrąglone rogi */
    padding: 10px; /* Odstęp wewnętrzny */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Lekki cień */
    text-align: center; /* Wyśrodkowanie tekstu w kontenerze */
}

.small-button {
    display: flex; /* Umożliwia użycie flexbox do centrowania */
    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe */
    width: 100%; /* Szerokość przycisku na 100% kontenera */
    height: 30px; /* Wysokość przycisku */
    margin: 5px 0; /* Odstęp między przyciskami */
    font-size: 16px; /* Rozmiar czcionki */
    cursor: pointer; /* Zmiana kursora na wskazujący przy najeździe */
    background-color: black; /* Czarny kolor tła przycisku */
    color: white; /* Biały kolor tekstu */
    border: none; /* Usunięcie domyślnego obramowania przycisku */
    border-radius: 5px; /* Zaokrąglone rogi dla przycisku */
}

/* Stylizacja modalu */
.modal {
    display: none; /* Ukryty domyślnie */
    position: fixed; /* Umożliwia umiejscowienie na ekranie */
    z-index: 1; /* Ustawienie na wierzchu */
    left: 0;
    top: 0;
    width: 100%; /* Pełna szerokość */
    height: 100%; /* Pełna wysokość */
    background-color: rgba(0, 0, 0, 0.5); /* Przezroczyste tło */
}

.modal-content {
    background-color: black; /* tło */
    margin: 15% auto; /* Marginesy z góry i wyśrodkowanie */
    padding: 20px; /* Odstęp wewnętrzny */
    border: 1px solid #808080; /* Obramowanie */
    width: 80%; /* Szerokość modalu */
    max-width: 700px; /* Maksymalna szerokość modalu */
}

/* Stylizacja tabeli w modalu */
table {
    width: 100%; /* Szerokość tabeli */
    border-collapse: collapse; /* Złączenie krawędzi */
}

th, td {
    padding: 8px; /* Odstęp wewnętrzny */
    text-align: left; /* Wyrównanie tekstu do lewej */
    border-bottom: 1px solid #808080; /* Dolne obramowanie */
    color: #808080;
}

th {
    background-color: black; /* Szare tło nagłówków */
    color: #8B0000;
}

.list-container {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #808080;
    width: 45%; /* Szerokość każdej listy */
}

li {
    padding: 10px;
    cursor: pointer;
    background: #000000;
    border-bottom: 1px solid #000000;
}

li:hover {
    background: #808080;
}

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    z-index: 1000;
}
.toast.success {
    background-color: #4CAF50; /* Zielony kolor dla sukcesu */
}
.toast.error {
    background-color: #f44336; /* Czerwony kolor dla błędów */
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    background-color: black;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    margin-right: 10px;
    border: none;
}

input[type="checkbox"]::before {
    content: "👻";
    color: white;
}

input[type="checkbox"]:checked::before {
    content: "😈";
    color: red;
}

/* Stylowanie dla listy rozwijanej (select) */
select {
    background-color: black;   /* Czarny kolor tła */
    color: #8B0000;            /* Czerwony kolor tekstu */
    border: 1px solid #8B0000; /* Czerwona ramka */
    padding: 5px;
    border-radius: 5px;        /* Zaokrąglenie krawędzi */
    font-size: 16px;
}