:root {
    --font-size: 1vw;
    @media (max-width: 900px) {
        --font-size: 2.5vw;
    }
}

body {
    color:white; background: black;
    font-family: monospace;
    padding:0;margin:0;
    font-size: var(--font-size);
}

main {
    min-height: 100vh;
}

footer, .input-container {
    margin: 2em;
}

.input-container, .input-sub {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
}
.input-container {
    flex-direction: column;
    @media (min-width: 900px) {
        flex-direction: row;
        align-items: baseline;
    }
}
.input-sub {
    flex-direction: row;
}

span {
    font-size: 5em;
}

.timers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 3em 0;

    @media (max-width: 900px) {
        grid-template-columns: 1fr;
    }
}

.timer-container .timer-name, .current-container .current-name {
    margin: .2em 0;
    font-size: 2em;
}

.current-container {
    color: lightgreen;
    padding: 1em;
}

.timer-container {
    color: grey;
    padding: 1em;
}

.timer-container:nth-child(2), .current-container {
    //grid-column: 1 / 3;
    font-size: 1.5em;
}

.timer-container:nth-child(2) .timer-name, .current-container .current-name {
    //font-size: 
}

.timer-container:nth-child(2) {
    color: white;
}

@keyframes blink {
	1% { background-color: red; }
	100% { background-color: none; }
}

.ending {
    //color: red !important;
	animation: blink 1s ease-in infinite;
}

input, button {
    font-family: monospace;
    font-size: var(--font-size);
    display: inline;
    width: 10em;
    height: 1.5em;
    border: none;
    padding: .1em .2em;
    margin: 0;
}