* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ececec;
}

body{
    background-color: #202020;
    min-width: 800px; /* Prevents shrinking below 800px */
}

h1{
    position: absolute;
    width: 35%;
    top: 3%;
    left: 3%;
     font-weight: bold;
    font-size: 630%;
    text-shadow: 0 -1px 0 #ffffffe1, 0 2px 0 #ffffffe1;    
    color: rgba(0, 0, 0, 0.596);   
}

form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    position: absolute;
    top: 3%;
    left:42%;
    padding:1%;
    padding-left:3%;
    padding-right:3%;
    padding-bottom:2%;
    background-color: #3f3f3f71;
    border-radius: .75em;
    box-shadow:  -1px -2px 0 #ffffffa4, 1px 2px 0 #ffffffa4, inset 0 0 5px #acacac6e;
    min-width: 400px; /* Minimum width for form */
}

form label{
    text-align: center;
    font-weight: bold;
    font-size: 200%;
    padding: 1%;
}

form input,form select, form button {
    background-color: #202020;
    min-height: 40px;
    margin-top: 1%;
    border: 1px solid #adadad ;
    border-radius: .75em;
    box-shadow: 0 0 10px inset rgba(0, 0, 0, .5);
}

form button {
    font-weight: bold;
    box-shadow: 0 0 10px inset rgba(0, 0, 0, .5);
    width: 50%;
    margin: 0 auto;
    margin-top: 1%;
    transition: all .3s ease-in-out;
}

form button:hover{
    box-shadow: 0 0 10px  rgba(0, 0, 0, .5);
    transform: scale(1.02);
}

/* Unit selector styling */
.unit-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.unit-group input {
    flex: 2;
    margin-top: 1%;
}

.unit-group select {
    flex: 1;
    margin-top: 1%;
    max-width: 60px;

}

/* Error and success message styling */
.error {
    background-color: #ff4444;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.success {
    background-color: #44ff44;
    color: #202020;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
}