body{
    font-family: "Noto Sans JP", sans-serif;
    margin: 0%;
    padding: 0.5%;
}

header{
    font-weight: 900;
    font-size: 2vh;
    color: gray;
    float: right;
}

#timerDisplay{
    width: 100%;
}

#remainingTimeText{
    font-weight: 900;
    font-size: 20vh;
    color: black;
}

#remainingTimeBar{
    width: 100%;
    height: 40vh;
    background-image: repeating-linear-gradient(
        to right,
        hsl(0deg, 80%, 50%),
        hsl(30deg, 80%, 50%),
        hsl(60deg, 80%, 50%),
        hsl(90deg, 80%, 50%),
        hsl(120deg, 80%, 50%),
        hsl(150deg, 80%, 50%),
        hsl(180deg,80%,50%),
        hsl(210deg, 80%, 50%),
        hsl(240deg, 80%, 50%),
        hsl(270deg, 80%, 50%),
        hsl(300deg, 80%, 50%),
        hsl(330deg, 80%, 50%),
        hsl(360deg,80%,50%) 25%
    );
}

#remainingTimeBar.running{
    animation: barColor 2s linear 0s infinite;
}

@keyframes barColor{
    from{
        background-position: 0vw 0;
    }
    to{
        background-position: -25vw 0;
    }
}

#remainingTimeBarVariable{
    height: 100%;
    background-color: lightgray;
}

#controls{
    margin-top: 5vh;
    width: 100%;
}

#controls button{
    background: transparent;
    border: none;
}

#controls button:disabled{
    opacity: 0.2;
}

#controls button img{
    height: 15vh;
    max-height: 15vw;
    max-width: 15vw;
}

dialog{
    border: none;
    width: 80vw;
    padding: 2vh 5vw;
    overflow-y: scroll;
}

dialog::backdrop{
    background-color: rgba(0,0,0,50%);
}

dialog dl{
    margin: 0 0 5vh;
}

dialog dt{
    margin-top: 3vh;
    font-size: 3vh;
    font-weight: 600;
}

dialog dd{
    margin: 0;
}

dialog input,dialog select{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 5vh;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: solid 3px darkgray;
}

dialog input[type="submit"]{
    border: none;
    background-color: darkred;
    color: white;
}

dialog p{
    font-size: 2vh;
}

div.dialog{
    background-color: white;
    border: solid 5vw rgba(0,0,0,50%);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 2vh 5vw;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    display: none;
}

div.dialog dl{
    margin: 0 0 5vh;
}

div.dialog dt{
    margin-top: 3vh;
    font-size: 3vh;
    font-weight: 600;
}

div.dialog dd{
    margin: 0;
}

div.dialog input,div.dialog select{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 5vh;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: solid 3px darkgray;
}

div.dialog button{
    width: 100%;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 5vh;
    border: none;
    background-color: darkred;
    color: white;
}

div.dialog p{
    font-size: 2vh;
}