@import url('https://fonts.googleapis.com/css2?family=Syne&display=swap');
	* {
		font-family: 'Syne', sans-serif;
	}
	
button {
  font: bold 16px;
  color: #ffffff;
  padding: 8px 16px;
  border-style: none;
  border-radius: 28px;
  background: #071689;
  transition: background 0.2s ease;
}

select {
  text-transform: uppercase;
  font-size: bold 18px;
  color: #071689;
  margin: 12px 2px;
  padding: 6px 24px;
  border: 3px solid;
  border-radius: 28px;
  background: #ffffff;
}

button:hover {
  background: #009fee;
}

#result {
  text-align: center;
  padding: 10px 20px;
  margin: 12px 0px;
  border-radius: 16px;
  color: #707070;
  background: #ebf6ff;
  padding: auto;
}

.resultbox{
	padding: 8px;
}
 .result-good{
	background-color: #99ff99;
	color:#009933;
	padding:24px;
	border-radius: 40px;
  }
 .result-bad{
	background-color: #ff8080;
	color: #b30000;
	padding:24px;
	border-radius: 40px;
  } 
  
 
.row {
	display: flex;
	justify-content: center; /* Horizontal centering */
	align-items: center; /* Vertical centering */
	height: 100vh; /* Full viewport height */
}

.col {
	text-align: center; /* Center content within the column */
}
 #reader {
    min-height: 300px;
    max-width: 100%;
}
  /* Responsive */
@media (max-width: 800px) {
    .row {
        flex-direction: column; /* Stack columns vertically on smaller screens */
    }
	#reader {
    max-width: 100%;
	}
}