* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
	font-family: "Arial", "sans-serif";
	font-size: 16px;
	-webkit-print-color-adjust:exact !important;
	print-color-adjust:exact !important;
}

#jogo {
	max-width: 800px;
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#jogo > * {
    border-bottom: 2px solid lightgrey;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#jogo > *:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.problemas {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.problema {
	display: flex;
	border-radius: 100px;
	outline: 3px solid black;
	outline-offset: -2px;
}

.problema span {
	display: flex;
	white-space: nowrap;
	padding: 10px;
	align-items: center;
	justify-content: center;
}

.problema span:first-child {
	background-color: #ff5555;
	color: #fff;
	border: 3px solid black;
	border-radius: 40px;
	width: 40px;
}

.problema span:nth-child(2) {
	padding-right: 20px;
}

.frase {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.letra {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px;
	font-size: 20px;
	border-radius: 10px;
	justify-content: flex-end;
}

.letra.entrada {
	border: 3px solid black;
}

.letra input {
	width: 100%;
	text-align: center;
	font-size: inherit;
	text-transform: uppercase;
	border: none;
}

button, textarea, input {
	font: inherit;
}

.frase-entrada textarea {
	width: 100%;
	padding: 10px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

button {
	width: 120px;
	float: right;
}

input[type=range]{
	vertical-align: middle;
}

@page {
  size: A4 landscape;
}

@media (width < 600px) {
	#jogo {
		padding: 10px;
	}
	
	.problemas {
		grid-template-columns: repeat(2, 1fr);
	}
	
}

@media print {
  .frase-entrada, .controles {
	  display: none;
  }

  .problema span:first-child {
	  width: 40px;
	  height: 40px;
  }
}