*{
	font-family: sans-serif;
}

header h1{
	padding: 1rem;
    background-color: #FEFDFE;
}

header h1 a{
    text-decoration: none;
	font-family: FrederickatheGreat;
	color: #181818;
}

h2{
	font-family: FrederickatheGreat;
	color: #181818;
}

.accordion-body a{
    text-decoration: none;
}

.accordion-body a:hover {
    text-decoration: underline;
}

.accordion-body a:before{
    content: "\2192";
    padding-right: .5rem;
    font-size: 22px;
}

.wyslijPropozycje label, .wyslijPropozycje input, .wyslijPropozycje button{
    display: inline-block;
}

.wyslijPropozycje input{
    width: 300px;
    margin-left: 2rem;
}

.wyslijPropozycje button {
    margin-left: 1rem;
}

#generator{
	text-align: center;
}

#generator h2{
	text-align: left;
}

#plansza{
	width: 1000px;
	max-width: 98%;
	display: inline-flex;
	flex-direction: column;
	border: 2px solid gray;
	background-color: hsla(120, 1%, 99%, 0.2);
}

#plansza > div {
	width: 100%;
	height: 67%;
}

#plansza > div + div{
	height: 33%;
	border-top: 1px solid gray;
}

#plansza img{
	width: 50px;
	margin: .2rem;
}

.planszaWynik ul{
	font-size: 14px;
    list-style-type: circle;
}

.planszaWynik ul li{
	margin-bottom: .25rem;
	text-align: left;
	max-width: 95%;
}

#przycisk{
	margin: 2rem 0;
}

#planszaUp{
    display: inline-flex;
    flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

#planszaUp > div{
	width: 20%;
	min-width: 196px;
	height: 300px;
	flex-grow: 1;
	border-right: 1px solid gray;
}

#planszaUp > div:last-child{
	border-right: unset;
}

#planszaDown{
    display: inline-flex;
    flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

#planszaDown > div{
	min-width: 200px;
	width: calc(50% - 1px);
    height: 150px;
}

.planszaNazwa{
	display: inline-flex;
    align-items: center;
    width: 100%;
	margin-bottom: .5rem;
}

.planszaTytul{
	color: darkslategray;
    font-size: 14px;
    padding: .5rem;
}

#kd, #rZk{
	height: 150px;
	border-bottom: 1px solid gray;
}

#sko{
	border-right: 1px solid gray;
}

footer{
	text-align: center;
	margin-top: 4rem;
}

@media only screen and (max-width:700px) {
    #generator #plansza{
        max-width: 400px;
        width: 90%;
    }

	#planszaUp > div {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid gray;
    }

    #plansza #planszaUp #sk, #plansza #planszaUp #rZkIk{
		width: 100%;
        border-top: none;
	}

    #plansza #planszaDown{
        border-top: none;
    }

    #planszaDown > div{
        width: 100%;
        border-top: none;
        border-bottom: 1px solid gray;
    }

    #planszaDown #sko{
        border-right: none;
    }

	#planszaUp #kp, #planszaUp #pw, #planszaUp #sk{
		height: 150px;
	}
}

@media only screen and (max-width:1100px) {
	#plansza {
		max-width: 800px;
        width: 90%;
	}

	#planszaUp #rZkIk{
		width: 50%;
        border-top: 1px solid gray;
	}

	#planszaUp #pw{
		border-right: none;
	}

	#planszaUp #sk{
		width: 50%;
		border-top: 1px solid gray;
	}
}







@font-face {
  font-family: "FrederickatheGreat";
  src: local("FrederickatheGreat"), url("fonts/FrederickatheGreat-Regular.ttf");
}