@font-face {
    font-family: 'Noto Sans';
    src:
        url('/static/fonts/NotoSans-Regular.woff2') format('woff2'),
        url('/static/fonts/NotoSans-Regular.woff') format('woff'),
        url('/static/fonts/NotoSans-Regular.ttf') format('truetype');
}

html {
    position: relative;
    min-height: 100vh;
}

body {
    font-family: 'Noto Sans', sans-serif;
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

body > .container {
    padding: 60px 15px 10px;
}

.popup {
    overflow: hidden;
}

body > .container-popup {
    padding: 0 10px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.abc {
    background-color: #cfe2f3;
}

.abc .caron {
    background-color: #c9daf8;
}

.abc .jot, .ew {
    background-color: #d9ead3;
}

.abc .stroke {
    background-color: #d9d2e9;
}

.abc .vowel {
    background-color: #f4cccc;
}

.abc .vowel-i {
    background-color: #fce5cd;
}

.letter {
    font-size: xx-large;
    font-weight: bold;
}

.letter-name {
    font-style: italic;
}

.conv textarea {
    height: 35vh;
    resize: none;
}

.usage {
    text-align: center;
}

.usage td {
    vertical-align: middle;
}

.poem.w12 {
    width: 12rem;
}

.poem.w16 {
    width: 16rem;
}

.hoverable {
    user-select: none;
}

.hoverable .hover {
    display: none;
}

.hoverable:hover .normal {
    display: none;
}

.hoverable:hover .hover {
    display: inline;
}

.examples.hoverable {
    padding-bottom: 1em;
    font-style: italic;
}

.examples.hoverable .normal {
    border-bottom: 1px dashed;
}

.examples.hoverable .hover {
    padding-left: .5em;
    padding-right: .5em;
}

.nobull {
    list-style: none;
    padding-left: 0;
    text-indent: -1em;
}

.carousel-caption, .carousel-control-next, .carousel-control-prev, .carousel-indicators {
    filter: invert(100%);
}

.display-table {
    display: table;
}

.logo-img {
    max-width: 360px;
    width: 100%;
}

.outline {
    text-shadow: -2px -2px 1px #000,
                  2px -2px 1px #000,
                 -2px  2px 1px #000,
                  2px  2px 1px #000;
}

.download-icon {
    content: url('/static/icons/download.png');
    display: inline-block;
    vertical-align: middle;
    margin-right: .5em;
}

.novyny-icon, .novyny-icon:hover {
    color: #93c54b;
    background-color: #3e3f3a;
    border-color: #3e3f3a;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}