/* Set black background and white text for the whole page */
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
padding: 10px;
padding-top: 5px;
}

/* Each form row spacing */
.form-row {
margin-bottom: 15px;
}

/* Inputs and selects styling */
input, select, button {
background-color: #222; /* dark input background */
color: white;
border: 1px solid #555;
padding: 10px 10px;
font-size: 1rem;
}

/* Button hover effect */
button:hover {
background-color: #444;
cursor: pointer;
}

/* Small text styling */
small {
color: #aaa;
}

div {
    font-size: 23px;
    font-weight: bold;
}

/* Result box styling */
#resultBox {
  margin-top: 20px;
  padding: 10px;
  background-color: #111;
  border: 1px solid #555;
  min-height: 50px;
  white-space: pre-wrap; /* preserves line breaks */
}

@media (orientation: portrait) {
    body {
        font-size: 60px;
    }
    div {
        font-size: 63px;
    }
    /* Inputs and selects styling */
    input, select, button {
        font-size: 55px;
        margin-bottom: 15px;
    }
    h1 {
        font-size: 68px;
        font-weight: bolder;
    }
    label {
        font-size: 60px;
    }
    span {
        font-size: 50px;
    }
}