@import url('https://fonts.googleapis.com/css?family=Audiowide|Rock+Salt|Roboto+Mono&display=swap');

@import url('splash.css');
@import url('instruments.css');
@import url('counter.css');
@import url('recorder.css');
@import url('score.css');
@import url('debug.css');
@import url('table.css');
@import url('volume.css');
@import url('tuner.css');

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    text-align: center;
    font-family: "helvetica Neue", Helvetica, Arial, sans-serif;
}

.wrapper {
    width: 100%;
}

.wrapper > * {
    /*border: 2px solid #f08c00;
    background-color: #ffec99;
    border-radius: 5px;*/
    padding: 1em;
}

.placement-header {
    grid-area: header;
}
.placement-controls {
    grid-area: controls;
}
.placement-score {
    grid-area: score;
}
.placement-content {
    grid-area: content;
}
.placement-instrument {
    grid-area: instrument;
}
.placement-debug {
    grid-area: debug;
}

.wrapper {
    display: grid;
    grid-gap: 0;
    grid-template-areas:
            "header"
            "controls"
            "score"
            "content"
            "instrument"
            "debug";
}

@media (min-width: 500px) {
    html, body {
        overflow: hidden;
    }

    .wrapper {
        grid-template-columns: 3fr 1fr;
        grid-template-areas:
                "header     controls"
                "content    score"
                "content    debug"
                "instrument debug";
    }
}
/*@media (min-width: 700px) {
    .wrapper {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas:
                "header  header  header"
                "content content sidebar"
                "content content controls"
                "footer  footer  footer"
    }

}*/
.placement-content {
    position: relative;
}

.placement-content .show-pitch-direction {
    position: absolute;
    right: 0;
    font-size: 2em;
    color: red;
}

.placement-content .show-pitch-direction > i:first-of-type {
    padding-top: 1em;
}

.placement-score {
    font-family: 'Audiowide', "helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.5em;
}

.placement-instrument {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
}

.song-title {
    font-family: 'Audiowide', "helvetica Neue", Helvetica, Arial, sans-serif;
}

[data-file] {
    cursor: pointer;
}

.level {
    width: 2em;
    height: 1em;
}

th.sortable {
    cursor: pointer;
}

.instrument-thumb {
    width: 100%;
    height: 100px;
}