@font-face {
    font-family: 'underwood_championregular';
    src: url('../fonts/underwood_champion-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html {
    font-family: 'underwood_championregular';
    font-size: 20px;
}

pre {
    font-family: 'underwood_championregular';
    white-space: pre-wrap;
}

#syllabary-container {
    overflow: hidden;
}

#syllabary-container,
.syllabary-display,
.grid-display,
.fade-layer,
.layer-display,
.layer,
.center-fade,
.loading-display
{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
}


.fade-layer {
    opacity: 0.5;
}

.poem-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px;
    z-index: 500;
    z-index: 500;
}

.poem-display {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 50px;
    right: 0px;
    max-width: 700px;
    margin: 0 auto;
    padding: 2em 2em 2em 2em;
    overflow: hidden;
}

.poem-text-container {
    position: absolute;
    top: 100px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

.poem-container.titleless .poem-text-container {
    top: 50px;
}

.poem-text {
    position: absolute;
}

.poem-title {
    font-size: 1.7em;
}

.poem-container.titleless .poem-title {
    display: none;
}


/* Control */

.control-container, .control-container.closed {
    position: absolute;
    z-index: 1000;
    width: 100%;
    top: 75%;
    bottom: 0;
}

.control-container.open {
    top: -20%;
}

.control-bar {
    position: absolute;
    z-index: 1;
    top: 20vmin;
    left: 0;
    right: 0;
    bottom: 0;
}

.control-info {
    position: absolute;
    z-index: 1;
    top: 30min;
    left: 0;
    right: 0;
    bottom: 0;
}

.control-display {
    position: relative;
    width: 20vmax;
    height: 20vmax;
    z-index: 2;
    float: right;
}

.button-hit {
    cursor:pointer;
    fill: transparent;
}

#debug-controls {
    position: absolute;
    z-index: 10000;
    right: 0;
    top: 0;
}

@media only screen and (max-width: 1024px) and (min-width: 568px) and (orientation: portrait) {
    .control-container, .control-container.closed {
        top: 80%;
        text-align: center;
    }

    .control-container.open {
        top: -20%;
    }

    .control-bar {
        top: 17vmax;
        padding-top: 27vmax;
    }

    .control-info {
        top: 50vmax;
    }

    .control-display {
        margin: 0 auto;
        width: 40vmax;
        height: 40vmax;
        float: none;
    }

    .poem-display {
        margin-left: 10vmin;
        margin-right: 10vmin;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 568px) and (orientation: landscape) {
    .control-container, .control-container.closed {
        top: 75%;
        text-align: center;
    }

    .control-container.open {
        top: -22%;
    }

    .control-bar {
        top: 20vmin;
        padding-top: 30vmin;
    }


    .control-info {
        top: 60vmin;
    }

    .control-display {
        margin: 0 auto;
        width: 50vmin;
        height: 50vmin;
        float: none;
    }

}

@media only screen and (max-width: 567px) and (orientation: portrait) {
    .control-container, .control-container.closed {
        top: 75%;
        text-align: center;
    }

    .control-container.open {
        top: -25%;
    }

    .control-bar {
        top: 17vmax;
        padding-top: 33vmax;
    }

    .control-info {
        top: 60vmax;
    }

    .control-display {
        margin: 0 auto;
        width: 50vmax;
        height: 50vmax;
        float: none;
    }

    .poem-display {
        margin-left: 5vmin;
        margin-right: 5vmin;
        bottom: 15vmax;
    }
}


@media only screen and (max-height: 567px) and (orientation: landscape) {
    .control-container, .control-container.closed {
        top: 75vmax;
        right: -50vmax;
        text-align: center;
        transform: rotate(-90deg);
    }

    .control-container.open {
        top: -10vmax;
    }

    .control-info {
        top: 10vmax;
    }

    .control-display {
        margin: 0 auto;
        width: 50vmax;
        height: 50vmax;
        float: none;
    }
}