@font-face {
    font-family: "Am Sans";
    src: url('./Am Sans/Am Sans Regular/Am Sans Regular.otf');
}

@font-face {
    font-family: "Open Dyslexic";
    src: url("./OpenDyslexic/OpenDyslexic3-Regular.ttf");
}

@font-face {
    font-family: "Open Dyslexic";
    src: url("./OpenDyslexic/OpenDyslexic3-Bold.ttf");
    font-weight: bold;
}

/* Light mode */
body {
    background-color: #f5f5f5;
    color: #333;
    font-family: "Am Sans", Calibri, 'Comic Sans';
}

body.dyslexia {
    font-family: "Open Dyslexic" !important;
}

header, main, footer {
    background-color: #fff;
    padding: 1rem;
    margin: 1rem;
    border-radius: 5px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
nav li {
    margin-right: 1rem;
}
nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
/* Dark mode */
body.dark-mode {
    background-color: #333;
    color: #f5f5f5;
}
header.dark-mode, main.dark-mode, footer.dark-mode {
    background-color: #222;
}
nav.dark-mode a {
    color: #f5f5f5;
}



div.bingofield {
    width: 95vmin;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 50px;
    
    max-height: 80%;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0px;
    margin: 0 auto;
}

div.BINGO {
    border-style: ridge;
    /*border-color: #EC0016;*/
    color: white;
    /*font-weight: bold;*/
    background-color: #ec0016;
}

.bingo-tile {
    
    border: 2px solid #333;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #F0F3F5 ;
    aspect-ratio: 1;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;    
    padding: 1px;


}

.bingo-tile input {
    display: none;
}

.bingo-tile label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}

.bingo-tile.dark-mode {
    background-color: #444;
}

.bingo-tile input:checked + label {
    background-color: #408335 ;
    color: #fff;
}

.bingo-tile.BINGO input:checked + label {
    background-color: #ec0016;
    color: #fff;
}








button.themetoggle {
    position: fixed;
    right: 10px;
    top: 10px;

}

.headerbox {
    text-align: center;
}

.h1 {
    text-align: center;
    font-size: 3em;
    color: #EC0016 ;
    display: inline-block;
    font-weight: 900;
    font-family: Calibri, 'Comic Sans' !important;
}

.logo {
    border-style: solid;
    text-align: center;
    font-size: 3em;
    color: #EC0016 ;
    border-radius: 8px;
    border-width: 7px;
    font-weight: bolder;
    margin-right: 10px;
    padding-right: -2px;
    display: inline-block;
    font-family: Calibri, 'Comic Sans' !important;
}

.logo p {
    
    margin-top: -0.3em;
    margin-bottom: -0.22em;
}

div#freifeld_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
} 
  
#freifeld {
    margin-right: 10px;
}



div.oldwarning {
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100%-20px);
    text-align: center;
    background-color: #F39200 ;
    border-style: double;
    border-radius: 10px;
    border-color: #ec0016;
    color:white;
    cursor:pointer;
    
}

div.oldwarning h2 {
    margin-top: 6px;
    margin-bottom: 2px;
}

input#freifeld {
    width: 1.7em;
    height: 1.7em;
}
div#freifeld_box label {
    font-size: 1.7em;
}

.noshow {
    display: none !important;
}

div.testfail {
    background-color: red;
    border-style: double;
    border-radius: 10px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    color: white;   
}

div.jsfail {
    background-color: red;
    border-style: double;
    border-radius: 10px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    color: white;   
}

div.testfail a:link {
    color: lightblue;
}

div.testfail a:visited {
    color: lightsalmon !important;
}

div.testfail a:hover {
    background-color: yellow;
}

p#logfield {
    width: calc(100%-20px);
    overflow-x: hidden;
    word-wrap: break-word;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 5px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background-color:#222;
    color:#f5f5f5;
}

div.bottominfo {
    width: calc(100%-10px);
}
p.extrainfo {
    margin: 0 auto;
    text-align: center;
}

div.bmc-btn-container {
    display: inline-block;
    height: 28px;
}

a.bmc-btn {
    height: 26px;
}

div#sharelink {
    width:100%;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 25px;
    
}
div#sharelink h2 {
    margin-top: 10px;
    margin-bottom: 2px;
}

div#copycontainer {
    height: 2em;
    width: 95vmin;
    margin:0 auto;
    padding-left: -47.5vmin;
    position: relative;
}

div#sharelink #copylink {
    border-style:solid;
    border-width: 1px;
    border-color: grey;
    position: absolute;
    width: calc(95%-130px);
    font-size: 1.2em;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 6.5em;
    line-height: 28px;
    padding-left: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-weight: bold;
    margin-right: 0px;
    
    background-color: #F0F3F5 ;
    color:#222;
    text-align: left;
    border-right: none;
    word-wrap:normal;
    padding-right:10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.common {
    border-color: #AFB4BB ;
}

.rare {
    border-color: #73AEF4 ;
}

.legend {
    border-color: #FACA7F ;
}

div#sharelink #copylinkbutton {
    border-style:solid;
    border-width: 1px;
    border-color: grey;
    position:absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding-top:3px;
    width: 6.5em;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #00A099;
    color:white;
    font-weight: bold;
    margin-left: 0px;
    border-left: none !important;
    font-size: 1.3em;
    display: inline-block;
    bottom: 0px;
    
}

body.dyslexia div#sharelink #copylinkbutton {
    font-family: Calibri;
}

div#sharelink #copylinkbutton:hover {
    background-color: turquoise;
}



div#sharelink p#copied {
    position: absolute;
    z-index: 1;
    background-color: rgba(50,50,50,0.85);
    width: 490px;
    left: 50%;
    margin-left: -255px;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 0px;
    font-size: 1.3em;
    font-weight: bold;
    padding-top: 3px;
    color:#f5f5f5;
    display: none;
}

.fakebutton {
    
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.fakebutton:link {
    text-decoration: none;
}

button#toggle-theme {
    width: 3em;
    height: 3em;
    background-color: transparent;
    border: none;
    background-image: url("./night-mode.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    cursor: pointer;
}
button#toggle-theme.dark-mode {
    background-image: url("./day-mode.png")
}

.centertext {
    text-align: center;
}

a {
    color: black;
}

a.dark-mode {
    color: #f5f5f5;
}

p#credits {
    word-wrap: break-word;
}


div#rules p {
    text-align: center;
    width: 100%;
    font-size: large;
    line-height: 125%;
}

span.bingored {
    color:#EC0016;
}
span#gutefahrt {
    font-size: larger;
    font-weight: bold;
}

div#dyslexia {
    font-family: "Open Dyslexic" !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

input#dysl {
    width: 1.7em;
    height: 1.7em;
}
div#dyslexia label {
    font-size: 1.5em;
}

div#rules {
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    background-color:#cdd2d8;
    margin-bottom: 10px;
    border-radius: 10px;
    display: none;
}

div#rules.dark-mode {
    background-color: #222;
}

div#toggleInstructions p {
    cursor: pointer;
}

div#alternativeshare a {
    border-style:solid;
    border-width: 1px;
    border-color: grey;
    
    height: 100%;
    width: 130x;
    border-radius: 10px;
    background-color: #00A099;
    color:white;
    font-weight: bold;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: none !important;
    font-size: 1.5em;
    display: inline-block;
    top: 100%;
    bottom: 100%;
}

div#alternativeshare a:hover {
    background-color: turquoise;
}

div#acks {
    display: none;
}

p#credits {
    cursor: pointer;
}

div#itsbingo {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    
    z-index: 5;
    pointer-events: none;
    display:flex;
    justify-content: center;
    align-items: center;
}

div#itsbingo_text {
    
    position:fixed;

    font-family: Calibri !important;
    font-size: 32vmin;
    color: #EC0016;
    font-weight: bolder;
    border-color: #EC0016;
    border-style: solid;
    border-width:4vmin;
    padding-left: 1vmin;
    border-radius: 5vmin;
    padding-right: 1vmin;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 0 0 50px #fff;
}

div#itsbingo_text p {
    margin-top: -7vmin;
    margin-bottom: -6vmin;
}

@-webkit-keyframes spin {  
    from {  
        -webkit-transform: rotate(0deg); 
        opacity: 0; 
        scale: 0%;
    }  
    25% {
        opacity: 0.3 ;
    }
    90% {
        -webkit-transform: rotate(3650deg);  
        scale: 150%;
        opacity: 0.9

    }
    94% {
        -webkit-transform: rotate(3570deg);
        scale: 140%; 
    }
    to {  
        -webkit-transform: rotate(3600deg);
        opacity: 1;
        size: 100%;
    } 
}

@keyframes spin {  
    from {  
        transform: rotate(0deg); 
        opacity: 0; 
        scale: 0%;
    }  
    75% {
        opacity: 0.3;
    }
    90% {
        transform: rotate(3620deg);  
        scale: 150%;
        opacity: 0.9

    }
    94% {
        transform: rotate(3595deg);
        scale: 140%; 
    }
    to {  
        transform: rotate(3600deg);
        opacity: 1;
        size: 100%;
        } 
}

@-webkit-keyframes goodbye {  
    from {  
        
        opacity: 1; 
        scale: 100%;
    }  
    15% {
        scale: 120%;
    }
    
    to {  
        
        opacity: 0;
        scale: 5%;
    } 
}

@keyframes goodbye {  
    from {  
        
        opacity: 1; 
        scale: 100%;
    }  
    15% {
        scale: 120%;
    }
    
    to {  
        
        opacity: 0;
        scale: 5%;
    } 
}

.wheel {
    -webkit-animation-name: spin;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    animation-name: spin;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

.fuckoff {
    -webkit-animation-name: goodbye;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration: 1.0s;
    animation-duration: 1.0s;
    animation-name: goodbye;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}