* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    min-width: 99vw;
    background-color: #94989b;
    background-image: url('../background.jpg');
    font-family: arial;
    font-weight: bold;
    font-size: calc(15px + 0.390625vw);
    overflow-y: auto;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #303090;
}

h1,
h2 {
    text-align: center;
    margin: 0 0 .3rem 0;
}

/* layout */
.layout-detail-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex: none;
    width: 100%;
    padding-bottom: 0;
    padding-right: 1rem;
}

.layout-detail-header>* {
    padding: 1rem;
}

.layout-title {
    flex: 1 0 0;
}

.layout-detail-header h1 {
    font-size: 2em;
}

.layout-detail-header nav {
    flex: 0 0 0;
    text-align: right;
    width: 60px;
}

.layout-detail-container {
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: .5rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

.layout-detail {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 1rem;
}

.layout-detail-image {
    flex: 0 0 auto;
}

/* Inserting this collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row */
.layout-detail-break {
    flex-basis: 100%;
    height: 0;
}

@media only screen and (min-width:768px) {

    .layout-detail-text-wide {
        flex: 1 0 calc(99vw - 400px);
        /* min-width: calc(99vw - 400px); */
    }
}

@media only screen and (max-width:767px) {
    .layout-detail-text-wide {
        flex: 1 0 360px;
    }
}