@font-face {
    font-family: "KirangHaerang";
    src: url(assets/KirangHaerang-Regular.ttf);
}

:root {
    --digit-gap: 5%;

    --font: "KirangHaerang";
    --icon-size: 50px;
    --lap-width: 300px;
    --lap-height: 250px;

    --ui-offset-w: 150px;
    --ui-offset-h: 100px;
    --bg-color: #93bbdc;
    --ui-text-color: white;
    --ui-panel-color: #136290;
}

body {
    margin: 0;
    background-color: var(--bg-color);
    font-family: var(--font);
    overflow: hidden;
}

p {
    font-size: 1.5rem;
}

h4 {
    font-size: 2rem;
}

.bgimg {
    background-image: url(assets/tileable-wave-pattern-982710227.png);
    background-size: 8in;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 10%;
}

.digit {
    position: absolute;
    perspective: 500px;
}

.panel {
    position: absolute;
    left: 0;
    top: 0;
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;
    transform-box: fill-box;
    transform-origin: center calc(100% + var(--digit-gap));
    border-radius: 0.5rem;
    transform-style: preserve-3d;
}

.bottom-panel {
    transform: translateX(-50%) translateY(var(--digit-gap));
}

.top-panel {
    transform: translateX(-50%) translateY(calc(-100% - var(--digit-gap)));
}

.top-panel-half {
    transform: translateX(-50%) translateY(calc(-100% - var(--digit-gap)))
        rotateX(-90deg);
}

.top-panel-full {
    transform: translateX(-50%) translateY(calc(-100% - var(--digit-gap)))
        rotateX(-180deg);
}

.no-transition {
    transition: none !important;
}

.timer-display {
    position: absolute;
    left: 50vw;
    top: var(--ui-offset-h);
    transform-box: fill-box;
}

.timer-label {
    position: absolute;
    text-align: center;
    transform: translate(-50%, -50%);
    color: var(--ui-text-color);
    background-color: var(--ui-panel-color);
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.control-panel {
    position: absolute;
    display: flex;
    left: calc(50vw - var(--ui-offset-w));
    bottom: 1rem;
    transform: translate(-50%, 0%);
    background-color: var(--ui-panel-color);
    border-radius: 0.5rem;
}

.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 1rem;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(154deg)
        brightness(105%) contrast(105%);
    cursor: pointer;
    transition-duration: 0.25s;
}

.icon:hover {
    filter: invert(77%) sepia(26%) saturate(731%) hue-rotate(173deg)
        brightness(96%) contrast(92%);
}

.lap-times {
    position: absolute;
    left: calc(50vw + var(--ui-offset-w));
    bottom: 1rem;
    transform: translate(-50%, 0%);
    background-color: var(--ui-panel-color);
    color: var(--ui-text-color);
    padding: 1rem;
    width: var(--lap-width);
    height: var(--lap-height);
    box-sizing: border-box;
    border-radius: 0.5rem;
}
.lap-label {
    text-align: center;
    margin: 0.25rem;
}
.times {
    width: 100%;
    height: 80%;
    overflow-y: scroll;
}
.time {
    margin: 0.25rem;
}