body {
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 14px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
}

button {
    border: 2px solid black;
    background-color: #1ba2d7;
    text-shadow: 1px 1px 0px black;
    color: white;
    padding: 1ch;
    margin: 2px;
}

button:hover {
    background-color: #58bcd2;
}

button:active {
    background-color: #15779d;
}

input[type="color"] {
    height: 4ch;
}

#app {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-rows: 50px 1fr 50px;
    grid-template-areas:
        "header header"
        "left-panel right-panel"
        "footer footer";
    grid-gap: 1ch;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

@media (max-width: 800px) {
    #app {
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr min-content 50px;
        grid-template-areas:
            "header"
            "left-panel"
            "right-panel"
            "footer";
    }    
}

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer {
    text-align: center;
}

#header,
#footer,
#edition-panel,
#edition-form,
#preview-panel,
input,
textarea {
    border: 1px solid black;
    padding: 1ch;
}

#header {
    grid-area: header;
}

#footer {
    grid-area: footer;
}

#edition-panel {
    grid-area: left-panel;
    position: relative;
    display: grid;
    grid-gap: 1ch;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 4ch) 8ch 1fr;
    grid-template-areas:
        "title title title title"
        "date date date date"
        "summary summary summary summary"
        "t1 t2 t3 t4";
}

@media (max-width: 800px) {
    #edition-panel {
        grid-template-areas:
            "title"
            "date"
            "summary"
            "t1"
            "t2"
            "t3"
            "t4";
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 4ch) 8ch repeat(4, 1fr);
    }
}

#title {
    grid-area: title;
}

#cover {
    grid-area: cover;
}

#audio {
    grid-area: audio;
}

#date {
    grid-area: date;
}

#summary {
    grid-area: summary;
}

textarea {
    resize: none;
}

#text-lang-1 {
    grid-area: t1;
}

#text-lang-2 {
    grid-area: t2;
}

#text-lang-3 {
    grid-area: t3;
}

.lyrics {
    overflow-y: scroll;
}

#preview-panel {
    grid-area: right-panel;
    margin-right: 1ch;
    overflow-y: scroll;
}

.hidden {
    display: none;
}