body {
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
    margin: 1em 0;
    font-size: 1rem;
    /* set max width and calculate margins on each side based on that */
    max-width: 800px;
    margin-inline: max(20px, (100% - 800px) / 2);
	/* Prevent font scaling in landscape while allowing user zoom */
	/* https://stackoverflow.com/q/48423282/9698467 and https://stackoverflow.com/a/40892507/9698467 */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#langs {
    display: flex;
    justify-content: flex-end;
    gap: 0.8em;
    margin-bottom: 0.8em;
}

main {
    border: 1px solid lightskyblue;
}

.ribbon {
    background-color: lightskyblue;
    padding: 1em;
    text-align: center;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-inputs {
    display: flex;
    flex-direction: row;
    padding: 1em;
    gap: 10px;
}

.col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.col:nth-child(1) {
    width: 200px;
}
.col:nth-child(2) {
    flex-grow: 1;
}

input {
    font-size: 1rem;
    padding: 0.8rem 1rem;
    letter-spacing: 0.05em;
    border: none;
    /* This is a fix for an iOS issue which occurs on input elements next to each other,
    e.g. for time - when one is in focus, the other one shifts a bit down. This is due to
    an incorrect calculation of the baseline for the element in focus; to fix it we add
    vertical-align to top or middle */
    vertical-align: middle;
}

input[type="text"] {
    border: 1px solid #ccc;
}

input[type="submit"] {
    background-color: steelblue  ;
    color: white;
    margin: 0 1em;
    width: 150px;
}

#results {
    display: none; 
    flex-direction: column;
    gap: 1em;
    padding: 2em;
}

footer {
    margin-top: 1rem;
}

a, a:active, a:visited {
    color: steelblue;
    text-decoration: none;
}

a:hover {
    color: lightskyblue;
}

/**
 * Styles for extra small screens (below 670px wide)
 */
@media screen and (max-width: 670px) {
    .data-inputs {
        flex-direction: column;
    }
    .col {
        align-items: stretch;
    }
    .col:nth-child(1) {
        width: 100%;
    }
    input[type="submit"] {
        width: 100px;
    }
}