/* Allgemeine Stile */
body {
    font-family: arial, verdana, helvetica, sans-serif;
    margin: 0;
    color: #000;
    background-color: #FFF;
    font-size: 20px;
    max-width: 100%;
    overflow-x: hidden;
}

/* Container für Bingo-Karten und Gewinnkarten */
table.card,
table.win {
    text-align: center;
    border: 2px solid #000;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

table.win {
    border: 2px solid #0F0;
}

table.card td,
table.win td {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    padding: 2px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 5px;
    box-shadow: #AAA 0px 5px 0px 0px;
}

table.card td:hover:not(.freecell),
table.win td:hover {
    cursor: pointer;
    box-shadow: rgb(126, 0, 38) 0px 5px 0px 0px;
}

table.card td:hover,
table.win td:hover {
    background-color: rgb(229, 0, 70);
    z-index: -1;
    transition: all .3s ease-in-out;
    width: 0;
}

table.card td.clicked,
table.win td.clicked {
    background-color: rgb(229, 0, 70);
    box-shadow: rgb(126, 0, 38) 0px 5px 0px 0px;
}

table.card td.clicked:hover,
table.win td.clicked:hover {
    background-color: #AAA;
}

td:before {
    content: "";
    background: #000;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

table.card td.win,
table.win td.win {
    background-color: #0F0;
}

table.card td.freecell,
table.win td.freecell {
    font-weight: bold;
    background-color: #CCC;
    color: #000;
    font-size: 20px;
}

hr {
    color: #000;
    background-color: #FFF;
    border: 1px dashed #CCC;
    width: 90%;
    margin: 0 auto;
}

h1,
.abouthead {
    text-align: center;
    margin-bottom: 0px;
}

h2.abouthead {
    margin-top: 0px;
}

ul {
    padding-bottom: 20px;
}

ul li {
    padding-bottom: 5px;
}

.howtoplay,
.about,
#intro {
    text-align: center;
    font-weight: bold;
    margin: auto;
    max-width: 100%;
}

#game_description {
    text-align: center;
    margin: auto;
    max-width: 100%;
}

.howtoplay,
.about {
    border: 0px;
    text-align: left;
    padding: 0px;
    font-weight: normal;
}

.footer,
.navbar,
#legal,
#share,
#original {
    font-weight: normal;
    font-size: 20px;
    text-align: center;
    margin: 0;
    max-width: 100%;
    margin: auto;
}

#sopa,
#sopaframe {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    max-width: 100%;
    height: auto;
    margin: auto;
}

#legal {
    color: #999;
    background-color: #FFF;
    margin-bottom: 5px;
}

#share,
#original,
.center {
    text-align: center;
    margin: auto;
    background-color: #FFF;
}

#share {
    margin-top: 5px;
    height: 50px;
    max-width: 100%;
}

div.addthis_toolbox {
    max-width: 100%;
    margin: 0 auto;
    margin-top: 5px;
    background-color: #FFF;
}

input {
    width: 100%;
    max-width: 400px;
}

label {
    padding-top: 10px;
    font-weight: bold;
    font-size: 20px;
}

img {
    border: 0px;
}

#adbanner {
    padding-top: 10px;
    margin: auto;
    max-width: 100%;
}

.notice {
    color: #f00;
    background-color: #FFF;
}

.url {
    display: none;
}

@media print {
    #intro,
    .howtoplay,
    .footer,
    .navbar,
    .contact,
    hr,
    #original,
    #game_description {
        display: none;
    }

    h1,
    .abouthead,
    .url {
        display: block;
        text-align: center;
        margin-bottom: 0px;
    }

    .url {
        font-size: 9pt;
    }

    #adbanner,
    #share {
        display: none;
    }
}

#ECFormSubmit {
    background-color: #FFF;
    color: #FFF;
}

/* Styling für den Button */
#clearSessionStorage {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    display: block;
    width: 50%;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Hover-Effekt */
#clearSessionStorage:hover {
    background-color: #2980b9;
}