@import url("10-variables-0d9f4c5de7629d3ef41c9037b74c99cb.css");
@import url("12-overview-d02a686f35a6349c26c19f163323bd96.css");
@import url("14-detail-290a627a1f3c1c46c4226166362d98fa.css");
@import url("20-typography-f06b28386864e54e0802805073ffce67.css");
@import url("30-form-5ae4b360ea5422e82cac02ab85ebfc4e.css");
@import url("40-image-detail-006ff04e8581120f2aff690c47f1baec.css");
@import url("50-import-5035b315c74fe4baab82f4215ccb6711.css");
@import url("60-album-stage-f2385d04eba60806f4e260d2a47a3ff5.css");

* {
    box-sizing: border-box;
}

body {
    width: 1200px;
    margin: 20px auto;
    /*border: 1px solid var(--background-lightgrey);*/
    
    .body-header {
        display: grid;
        grid-template-columns: 1fr 1fr;

        .page-title {
            display: inline-block;
            img.img-logo {
                height: 28px;
                width: 28px;
                margin-right: 20px;
            }
        }
        
        .body_navigation {
            text-align: right;
        }

        .flashes {
            display: inline-block;
            height: 50px;
            overflow-y: visible;
            
            .flash {
                padding: 1em;
                border-radius: 0.5em;
                color: black;
                margin-bottom: 0.2em;
                
                &.success {
                    background-color: forestgreen;
                }
                &.error {
                    background-color: orangered;
                }
            }
        }
    }
    
    .center {
        margin: 0 auto;
    }
    
    .button {
        text-decoration: none;
        display: inline-block;
        color: var(--text-color);
        background-color: var(--background-lightgrey);
        border: 1px solid var(--background-lightgrey);
        border-radius: 0.5em;
        
        padding: 0.2em 1em;
        margin: 0.5em 0;
        
        cursor: pointer;

        &.active, &:hover {
            background-color: var(--background-grey);
        }
    }
    .button-inverted {
        border: 1px solid var(--background-grey);
        &:hover {
            background-color: var(--background-lightgrey);
        }
    }
    
    .paging {
        display: flex;
        flex-direction: row;
    }
}