:root {
    --black: #0e0e0e;
    --dark-gray: #22201f;
    --gray: #413e3c;
    --blue: rgb(195, 221, 240);
    --blue-gray: rgb(121, 166, 202);
    --light-gray: #c6c7ca;
    --white: #f4f9ff;

    --red: rgb(146, 77, 77);
    --green: rgb(117, 170, 97);
}

body {
    margin: 0;
    height: 100vh;
    background-color: var(--black);
    display: grid;
    grid-template-columns: 30% 40% 30%;
    color: var(--white);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body>* {
    margin: 10px;
}

.pad {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50pt;
    font-weight: bold;
    user-select: none;
    cursor: pointer;
    transition: .2s;
    border-style: solid;
    border-color: var(--gray);
    border-width: 2px;
    border-radius: 10pt;
}

#center {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 30% 40% 30%;
}

#center>* {
    margin: 10px;
    border-radius: 10pt;
}

.action {
    border-style: solid;
    border-width: 2px;
    border-color: var(--gray);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20pt;
    transition: .2s;
    user-select: none;
    cursor: pointer;
}

.action:active {
    transition: 0s;
    background-color: var(--dark-gray);
}

#times {
    grid-column: 1 / span 2;
    grid-row: 2 / span 3;
    border-style: solid;
    border-width: 2px;
    border-color: var(--gray);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pad:active {
    transition: 0s;
}

.black {
    background-color: var(--dark-gray);
    color: var(--white);
}

.white {
    background-color: var(--white);
    color: var(--dark-gray);
}

.black:active {
    background-color: var(--gray);
}

.white:active {
    background-color: var(--light-gray);
}

.green {
    border-color: var(--green);
    border-width: 10pt;
}

.red {
    border-color: var(--red);
    border-width: 10pt;
}

#t0 {
    transform: rotateZ(90deg);
}

#t1 {
    transform: rotateZ(-90deg);
}

#chips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.chip {
    padding: 3px 7px;
    border-radius: 10px;
    background-color: var(--gray);
    font-family: "JetBrains Mono", monospace;
    user-select: none;
    cursor: pointer;
    transition: .2s;
}

.chip:active {
    background-color: var(--dark-gray);
    color: var(--white);
    transition: 0s;
}

#custom {
    display: grid;
    grid-template-columns: 40% 20% 40%;
    grid-template-rows: 50% 50%;
    row-gap: 10px;
}

#custom>* {
    text-align: center;
}

#time {
    flex-grow: 0;
}

input[type="number"] {
    appearance: none;
    background-color: transparent;
    border-radius: 5pt;
    border-style: solid;
    border-width: 2px;
    border-color: var(--gray);
    outline: none;
    font-size: 15pt;
    color: var(--white);
}

input[type="number"]:focus-visible {
    border-color: var(--light-gray);
}