@charset "utf-8";
/* CSS Document */

:root {
	--acc-color: #ee9c00;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  font-family: tahoma,'sans-serif';
  background-color: #202020;
  color: whitesmoke;
  height: 100vh;
}
header {
  display: grid;
  background: var(--acc-color);
  align-content: center;
  position: relative;
  z-index: 1;
}
header img {
  max-height: 5em;
  margin: 1em 2em;
  filter: drop-shadow(0 11px .5em rgba( 0 0 0 / .2));
}
h1 {
  font-size: 3em;
  margin-top: 0;
}
main {
  height: calc(100% - 6rem - 9em);
  display: grid;
  align-items: center;
  justify-items: center;
}
footer {
  position: fixed;
  bottom: 0;
  display: grid;
  justify-content: center;
  align-content: center;
  width: 100%;
  background-color: var(--acc-color);
  z-index: 1;
}
button:active {
	scale: .9;
}
footer button {
  margin-block: 2rem;
  padding: 1rem 2rem;
  font-size: 2em;
  border: 0;
  border-radius: .6rem;
  background-color: #5e0066;
  color: whitesmoke;
  filter: drop-shadow(0 .2rem .5rem rgba(0 0 0 / .6));
  cursor: pointer;
}
.card {
  display: grid;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  padding: 2rem;
  border-radius: 1rem;
  margin: 1rem;
  filter: drop-shadow(0 .5rem 1rem rgba(0 0 0 / .8));
  grid-area: 1 / 1;
}
.card img {
  border-radius: 50%;
}
h2 {
  margin-block: .3em 0;
}
.card-box-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  height: 100%;
  grid-area: 1 /1;
}
.hidden {
	opacity: 0;
}
.winner {
	transition: .4s;
	scale: 1.3;
	font-size: 2em;
}
.winner img {
  box-shadow: 0 0 2em .3em darkgreen;
  transition: .4s;
}
.loser-bracket {
  grid-template-columns: 1fr 1fr;
}
.loser {
  grid-row: 1;
  grid-column: unset;
}
.loser img {
  box-sizing: ;
  box-shadow: 0 0 4em 1em #932e2e;
}
label {
  display: flex;
}
input[type="checkbox"] {
  visibility: collapse;
}
input[type="checkbox"]:checked + span {
  background-color: #533e8c;
}
label span {
  padding: .8em 1em;
  border-radius: 1em;
  border: 1px solid;
}
.user-select-wrapper {
  grid-area: 1 / 1;
  display: grid;
  align-items: center;
  justify-items: center;
  z-index: 1;
}
.user-select {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  max-width: 50vw;
  font-size: 1.3em;
  font-weight: bold;
  justify-content: center;
}
.disabled {
  opacity: .6;
  cursor: not-allowed;
}
.disabled:active {
  scale: unset;
}
@media (max-width: 80em) {
	.card img {
		width: 55vw;
	}

	.loser {
		grid-row: unset;
  		grid-column: 1;
	}
	.loser-bracket {
	  grid-template-columns: 1fr
	}
	.user-select {
		font-size: 1em;	
		max-width: 80vw;
	}
	.user-select-wrapper {
		max-width: 80vw;
 		text-align: center;	
	}
}