body {
    user-select: none;
    background: linear-gradient(to right, rgb(150, 0, 150), rgb(0, 0, 150));
    color: rgb(255, 255, 255);
    overflow: hidden;
}
html {
    visibility: hidden;
}
*, *::before, *::after {
    font-family: Hand, cursive;
}
.Napis1 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 10%;
    font-size: 500%;
    text-align: center;
    font-weight: 1000;
    visibility: visible;
}
.kratka {
    display: flex;
    position: relative;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 2px solid black;
    background: none;
    padding-right: 10px;
    padding-top: 10px;
    z-index: 3;
}
.kratka1 {
    border-top: none;
    border-left: none;
}
.kratka2 {
    border-left: none;
}
.kratka3 {
    border-left: none;
    border-bottom: none;
}
.kratka4 {
    border-top: none;
}
.kratka5 {
    border: 2px solid black;
}
.kratka6 {
    border-bottom: none;
}
.kratka7 {
    border-top: none;
    border-right: none;
}
.kratka8 {
    border-right: none;
}
.kratka9 {
    border-bottom: none;
    border-right: none;
}
.X::before,
.X::after {
    position: absolute;
    content: '';
    top: 0;
    width: calc(100px * .15);
    height: 100px;
    border-radius: 24px;
    background: black;
}
.X {
    opacity: 0.5;
}
.XShow{
    opacity: 1;
}
.X::before {
    transform: rotate(45deg);
}
.X::after {
    transform: rotate(-45deg);
}
.O {
    opacity: 0.5;
}
.O::before,
.O::after {
    position: absolute;
    content: '';
    top: -5%;
    left: -2%;
    margin: 5px;
    border-radius: 50%;
}
.O::before {
    width: 90px;
    height: 90px;
    background: black;
}
.O::after {
    width: calc(90px * .65);
    height: calc(90px * .65);
    top: 10%;
    left: 13%;
    background: white;
}
.XShow::before,
.XShow::after {
    position: absolute;
    content: '';
    top: 0;
    width: calc(100px * .15);
    height: 100px;
    border-radius: 24px;
    background: black;
}
.XShow{
    opacity: 1;
    z-index: 2;
}
.XShow::before {
    transform: rotate(45deg);
}
.XShow::after {
    transform: rotate(-45deg);
}
.OShow {
    opacity: 1;
    z-index: 0;
}
.OShow::before,
.OShow::after {
    position: absolute;
    content: '';
    top: -5%;
    left: -2%;
    margin: 5px;
    border-radius: 50%;
}
.OShow::before {
    width: 90px;
    height: 90px;
    background: black;
}
.OShow::after {
    width: calc(90px * .65);
    height: calc(90px * .65);
    top: 10%;
    left: 13%;
    background: white;
}
.Komunikat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 36vh;
    padding-right: 0;
    padding-left: 0;
    background-color: hsl(0, 0%, 5%);
    font-size: 7rem;
    text-align: center;
    color: white;
    font-weight: 500;
    transition: 50ms ease-out;
    visibility: hidden;
}
.board {
    background-color: white;
    padding: 30px 50px;
    border-radius: 50px;
    position: absolute;
    display: flex;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}
.start_menu {
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    height: 100%;
    width: 100%;
    background-color: hsl(0, 0%, 5%);
    text-align: center;
    color: white;
    transition: 50ms ease-out;
    visibility: visible;
}
.options_menu {
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    height: 100%;
    width: 100%;
    background-color: hsl(0, 0%, 5%);
    text-align: center;
    color: white;
    transition: 50ms ease-out;
    visibility: hidden;
}
.Wygrana {
    opacity: 0.8;
    visibility: visible;
    z-index: 2;
}
.btn1 {
    width: 300px;
    height: 100px;
    font-size: 3rem;
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn1:hover {
    opacity: 1;
    border: 2px solid white;
    background: black;
    color: white;
}
.btn2 {
    width: 300px;
    height: 100px;
    font-size: 3rem;
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn2:hover {
    opacity: 1;
    border: 2px solid white;
    background: black;
    color: white;
}
.btn3 {
    width: 300px;
    height: 100px;
    font-size: 3rem;
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn3:hover {
    opacity: 1;
    border: 2px solid white;
    background: black;
    color: white;
}
.btn4 {
    width: 300px;
    height: 100px;
    font-size: 3rem;
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn4:hover {
    opacity: 1;
    border: 2px solid white;
    background: black;
    color: white;
}
.btn5 {
    width: 300px;
    height: 100px;
    font-size: 3rem;
    
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn5:hover {
    opacity: 1;
    border: 2px solid white;
    background: black;
    color: white;
}
.btn6 {
    width: 300px;
    height: 100px;
    font-size: 3rem;
    
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn6:hover {
    opacity: 1;
    border: 2px solid white;
    background: black;
    color: white;
}
.btn7 {
    position: absolute;
    top: 30%;
    left: 40%;
    width: 300px;
    height: 100px;
    font-size: 3rem;
    
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn7:hover {
    border: 2px solid white;
    background: black;
    color: white;
    border: 5px solid lime;
}
.btn8 {
    position: absolute;
    top: 45%;
    left: 40%;
    width: 300px;
    height: 100px;
    font-size: 3rem;
    
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn8:hover {
    border: 2px solid white;
    background: black;
    color: white;
    border: 5px solid lime;
}
.btn9 {
    position: absolute;
    top: 60%;
    left: 40%;
    width: 300px;
    height: 100px;
    font-size: 3rem;
    
    font-weight: 500;
    border-radius: 50px;
    border: none;
}
.btn9:hover {
    border: 2px solid white;
    background: black;
    color: white;
    border: 5px solid lime;
}
.btn10 {
    position: absolute;
    margin: 25px;
    top: 0%;
    left: 0%;
    width: 150px;
    height: 50px;
    font-size: 1.5rem;
    border-radius: 50px;
    border: none;
    visibility: hidden;
}
.btn10:hover {
    border: 2px solid white;
    background: black;
    color: white;
    border: 5px solid lime;
}

.bg1btn, .bg2btn, .bg3btn, .bg4btn, .bg5btn, .bg6btn, .save {
    width: 350px;
    height: 75px;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 50px;
    border: none;
}

.bg1:hover, .bg2:hover, .bg3:hover, .bg4:hover, .bg5:hover, .bg6:hover, .save:hover {
    border: 10px solid white;
    color: white;
    width: 450px;
}

.bg1 {
    background: linear-gradient(to right, rgb(150, 0, 150), rgb(0, 0, 150));
}
.bg2 {
    background: linear-gradient(to right, rgb(250, 242, 0), rgb(212, 0, 250));
}
.bg3 {
    background: linear-gradient(to right, rgb(200, 100, 0), rgb(0, 250, 250));
}
.bg4 {
    background: linear-gradient(to left, rgb(250, 0, 0), rgb(42, 250, 0));
}
.bg5 {
    background: linear-gradient(to right, rgb(250, 0, 250), rgb(0, 250, 250));
}
.bg6 {
    background: rgb(0, 0, 0);
    color: white;
}
.picked {
    border: 10px solid white;
    color: white;
    width: 450px;
}
.container {
    position: absolute;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: 400px 50px 400px;
    grid-template-rows: 15% repeat(3, 150px) 15%
}
.bg1, .bg3, .bg5 {
    grid-column: 1;
}
.bg2, .bg4, .bg6 {
    grid-column: 3;
}
.bg1, .bg2 {
    grid-row: 2 / 3;
}
.bg3, .bg4 {
    grid-row: 3 / 4;
}
.bg5, .bg6 {
    grid-row: 4 / 5;
}
.save {
    position: relative;
    top: 85%;
}
.save:hover {
    border: 2px solid white;
    background: black;
    color: white;
    border: 5px solid lime;
}
input {
    
    font-weight: 500;
    border: none;
}
.Punkty {
    margin: 0;
    padding: 0;
    background: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 75%;
    font-size: 8rem;
    text-align: center;
    width: auto;
    border-bottom: 5px solid black;
    border-radius: 24px;
    visibility: hidden;
    font-family: 'Courier New', Courier, monospace;
}
.visible {
    visibility: visible;
}
.hidden {
    visibility: hidden;
}