/* general css */
html {
    font-size: 62.5%;
    background: linear-gradient(to bottom, #051450 0%, #000000 100%);
    height: 100%;
}

body {
    color: #fff;
    padding: 4vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Arial, serif;
    font-size: 5vh;
    overflow: hidden;
    height: 100%;
    text-align: center;
}

div, span, header, body, footer, p, input, textarea, select, button {
    box-sizing: border-box;
}

p {
    margin: 0;
    padding: 0 0 0 0;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #7fbac0;
}

.total-points {
    background-color: #060f6e;
    border: 1vh #000 solid;
    padding: 1vh;
    width: 35vh;
    margin: 1vh auto 3vh auto;
    font-weight: 700;
    font-size: 14vh;
    box-shadow: 0 0 1vh #eee6;
    border-radius: 1vh;
    text-shadow: 0 0 1vh #000;
}

.board {
    display: flex;
    flex-grow: 1;
    width: 100%;
}
.board > div {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}
.board .answer {
    width: 100%;
    background: linear-gradient(to bottom, #1255b9 0%, #012f6c 100%);
    margin: 1vh;
    padding-left: 3vh;
    border-radius: 1vh;
    overflow: hidden;
    height: 16vh;
    pointer-events: none;
    transition: all ease-in-out 0.2s;
    box-shadow: 0 0 1vh #000;
}
.board .answer.small {
    height: 10vh;
}
.board .answer.animate {
    animation: open linear 0.4s forwards;
}
.disabled {
    pointer-events: none;
}

@keyframes open {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
.board .answer .text {
    float: left;
    display: flex;
    align-items: center;
    height: 100%;
    width: 80%;
    overflow: visible;
}
.board .answer .points, .board .answer .pos {
    float: right;
    border: 1vh solid #fff;
    padding: 4vh 0;
    background: linear-gradient(to bottom,  #7db9e8 0%, #123e73 100%);
    width: 8vw;
    height: 100%;
}
.board .answer .pos {
    display: none;
    border: 1vh solid #000;
    padding: 3vh 15vh;
    text-align: center;
    margin: 1vh;
    float: none;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,  #171466 0%,#233fbc 50%,#1946a0 51%,#141766 100%);
    box-shadow: 0 0 1vh #7fbac0;
    font-weight: 700;
    height: auto;
    font-size: 12vh;
    text-shadow: 0 0 1vh #000;
}

.board .answer.closed {
    background: linear-gradient(to bottom,  #7db9e8 0%, #3367a6 100%);
    text-align: center;
    justify-content: center;
    display: flex;
    pointer-events: initial;
}
.board .answer.closed .text, .board .answer.closed .points {
    display: none;
}
.board .answer.closed .pos {
    display: flex;
    align-items: center;
    justify-content: center;
}
.board .answer input {
    border: none;
    width: 100%;
    display: inline-block;
    font-size: 5vh;
    position: relative;
    pointer-events: initial;
    background-color: transparent;
    color: #fff;
    outline: none;
}
.board .answer.small .points {
    padding: 1vh 0;
}
.board .answer.small .points input {
    text-align: center;
}

.bottom {
    display: flex;
    flex-direction: row;
    width: calc(100% - 5vh);
    position: fixed;
    bottom: 2vh;
    gap: 2vh;
}
.bottom > div {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    gap: 1vh;
}
.bottom .box, .bottom .repeater {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom,  #7db9e8 0%, #123e73 100%);
    height: 12vh;
    display: flex;
    border-radius: 1vh;
    flex-shrink: 1;
}
.bottom .box {
    color: #a80707;
    font-size: 8vw;
    writing-mode: tb;
    font-weight: bold;
    cursor: pointer;
    width: 100px;
}
#clock {
    position: fixed;
    background: radial-gradient(ellipse at center,  #171466 0%,#233fbc 50%,#1946a0 51%,#141766 100%);
    box-shadow: 0 0 2vh #000;
    bottom: 2vh;
    left: 50%;
    width: 18vh;
    transform: translateX(-50%);
    padding: 2vh 3vh;
    border-radius: 9vh;
    font-size: 10vh;
    font-weight: 700;
    text-shadow: 0 0 1vh #000;
    display: none;
}
#clock.active {
    display: block;
}