html {
    background: linear-gradient(moccasin, lavender, lightblue);
    min-height: 100vh;
    color: darkslateblue;
    text-align: center;
    font-family: monospace;
}

/*span*/
.top-text {
    color: maroon;
}

/*main grid*/
.grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header header header header'
        'left-sidebar main-content main-content right-sidebar'
        'footer footer footer footer';
    min-height: 100vh;
}

/*format*/
.grid > * {
    padding: 1rem;
}

.grid > .header {
    grid-area: header;
    background: lightpink;
}

.grid > .main-content {
    grid-area: main-content;
    background: floralwhite;
}

.grid > .left-sidebar {
    grid-area: left-sidebar;
    background: darkorange;
}

.grid > .right-sidebar {
    grid-area: right-sidebar;
    background: cornflowerblue;
}

.grid > .footer {
    grid-area: footer;
    background: paleturquoise;
}

/*main container*/
.main-container {
    border: slateblue 2px solid;
    border-image: url(/assets/testy-border.png) 16 / 16px / 4px round;
    border-radius: 20px;
}

/*container*/
.container {
    display: flex;
    flex-flow: row nowrap;
}

/*boxes*/
.box {
    color: black;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    padding: 1rem;
    
}

/*left box*/
.box:nth-child(1) {
    background: greenyellow;
    width: calc(100% / 3 * 2);
}
    /*subcontainer*/
    .sub-container {
        display: flex;
        flex-flow: row nowrap;
        padding: 1rem;
        gap: 1rem;
        justify-content: space-around;
    }
    
    /*inner boxes*/
    .inner-box {
        color: white;
        padding: 1rem;
    }
    
    .inner-box:nth-child(1) {
        background: lightblue;
    }
    
    .inner-box:nth-child(2) {
        background: dodgerblue;
    }

    .inner-box:nth-child(3) {
        background: midnightblue;
    }

    /*gallery*/
    .flex-gallery {
        display: flex;
        flex-flow: row wrap;
    }
    
/*right box*/
.box:nth-child(2) {
    background: thistle;
    width: calc(100% / 3);
}

/*bottom box*/
.bottom {
    background: brown;
}