* {
    font-family: Verdana, sans-serif;
    color: #000000;
    margin: 0;
    padding: 0;
}

html, body {
    background-color: #ffffff;
    width: 100vw;
}

body {
    overflow-x: hidden;
}

div#card {
    text-align: center;
}

div#card {
    width: 94vw;
    margin-left: 3vw;
    margin-right: 3vw;
    height: 90vw;
}

div#card p {
    padding-top: 3vh;
    font-size: 7vmin;
    line-height: 8.4vmin;
    text-align: center;
    opacity: 1.0;
    transition: opacity 0.3s;
}

div#card div#notes {
    font-size: 5vmin;
    color: #102030;
    background-color: #e8fff4;
    margin: 2vmin;
    padding: 0;
    text-align: left;
}

div#card p.hidden,
div#card div.hidden {
    transition: opacity 0s;
    opacity: 0.0;
}

div#card p span#index {
    color: #707070;
    font-size: 5vmin;
}

span.furigana {
    border: solid 0.7vmin;
    border-radius: 2vmin;
    transition: background-color 0.3s, border-color 0.3s;
    background-color: transparent;
    border-color: transparent;
}

span.furigana.visible {
    transition: background-color 0.0s, border-color 0.0s;
    background-color: #f4f8ff;
    border-color: #a8b8d0;
}

span.furigana ruby rt {
    opacity: 0.0;
    transition: opacity 0.3s;
    color: #405070;
    font-size: 4.5vmin;
}

span.furigana.visible ruby rt {
    opacity: 1.0;
    transition: opacity 0.0s;
}

div#card div#notes rt {
    font-size: 3.2vmin;
}

div#audio {
    position: absolute;
    z-index: 1;
    top: 1vh;
    left: 1vw;
    font-size: 5vmin;
}

a#play-audio,
label#autoplay-label {
    text-decoration: none;
    display: inline-block;
    font-size: 3vmin;
    font-weight: bold;
    padding: 1vmin;
    border-style: outset;
    border-width: 0.7vmin;
    border-radius: 2vmin;
    border-color: #000098;
    background-color: #0000b0;
    color: #ffffff;
    margin: 0.5vmin;
}

label#autoplay-label span#autoplay-label-on {
    color: #ffff30;
}

label#autoplay-label span#autoplay-label-off {
    color: #ffffff;
}

label#autoplay-label span#autoplay-label-on {
    display: none;
}

input#autoplay:checked ~ label#autoplay-label {
    border-style: inset;
    color: #ffff30;
    background-color: #000090;
}

input#autoplay:checked ~ label#autoplay-label span#autoplay-label-off {
    display: none;
}

input#autoplay:checked ~ label#autoplay-label span#autoplay-label-on {
    display: inline;
}

input#autoplay {
    display: none;
}

div#stats {
    position: absolute;
    z-index: 1;
    top: 1vh;
    right: 1vw;
    font-size: 5vmin;
}

div#stats,
div#stats span,
div#stats a {
    color: #585858;
}

div#stats span#stats-good {
    color: #007020;
}

div#stats span#stats-bad {
    color: #702030;
}

form#rate {
    display: block;
    margin-top: 10vmin;
    margin-left: 10vw;
    margin-right: 10vw;
    width: 80vw;
    height: 28vmin;
    text-align: center;
    background-color: #fff8d0;
    border: solid 1vmin #f0e8b0;
    padding: 0.7vmin;
    border-radius: 3vmin;
    opacity: 1.0;
    transition: opacity 0.25s;
    transition: height 0.25s;
}

form#rate.hidden {
    opacity: 0.0;
    transition: opacity 0.0s;
    transition: height 0.0s;
    height: 0;
    padding: 0;
    border-style: none;
    overflow: hidden;
}

form#rate a {
    font-size: 5vmin;
    font-weight: normal;
}

form#rate input#cont-input {
    font-size: 5vmin;
    line-height: 7vmin;
    height: 7vmin;
    width: 21vw;
    border: inset 0.3vmin #808080;
    border-radius: 2vmin;
}

form#rate button.hidden {
    display: none;
}

form#rate button {
    font-size: 5vmin;
    font-weight: bold;
    padding: 1vmin;
    border-style: outset;
    border-width: 0.7vmin;
    border-radius: 3vmin;
    margin: 0.5vmin;
}

button#rate-bad-add-to-focus,
button#rate-good-add-to-focus,
button#rate-skip,
button#rate-remove-from-focus {
    width: 21vw;
}

button#rate-good-add-to-focus {
    background-color: #b0b030;
    color: #ffffff;
    border-color: #a0a000;
}

button#rate-bad-add-to-focus {
    background-color: #b00000;
    color: #ffffff;
    border-color: #a00000;
}

button#rate-skip {
    background-color: #207870;
    color: #ffffff;
    border-color: #207070;
}

button#rate-remove-from-focus {
    background-color: #007800;
    color: #ffffff;
    border-color: #007000;
}

form#rate label {
    font-size: 3.5vmin;
}

input#extend-focus-amount {
    width: 10vw;
    font-size: 5vmin;
    line-height: 7vmin;
    height: 7vmin;
    border: inset 0.3vmin #808080;
    border-radius: 2vmin;
}

form#rate button#extend-focus {
    font-size: 5vmin;
    font-weight: bold;
    padding: 0.7vmin;
    border-style: outset;
    border-width: 0.7vmin;
    border-radius: 2vmin;
    margin: 0.7vmin;
}