*,
*::before,
*::after {
    box-sizing: border-box;
}



body {
    font-family: 'Arial';
    font-size: 16px;
    background-image: url("img/checkerboard.png");
    color: #161616;
    margin: 0;
    width: 100%;
}

.white {
    width: 100%;
    max-width: 900px;
    min-height: 100vh;
    margin: 0 auto;
    background: #ffffff;
    border-left:10px solid black;
    border-right:10px solid black;
}

body::after {
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:url("img/nav/art-hov.gif") url("img/nav/home-hov.gif") url("img/nav/music-hov.gif");
}


a {
    color: #0000ff;
    text-decoration: none;
}

.content-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1em 0;
    box-sizing: border-box;
}

header {
    background: transparent;
    padding: 1em;
    text-align: center;
}

nav {
    text-align: center;
}

nav a {
    color: #000000;
    text-decoration: none;
    padding: 0px;
}

nav a img {
    padding: 0px;
    margin: none;
}

nav button {
    padding: 0px;
    margin: none;
}



footer {
    background: transparent;
    padding: 1em;
    text-align: center;
}

.layout {
    display: flex;
    gap: 2em;
    box-sizing: border-box;
    justify-content: center;
    /* <-- center the columns horizontally */
    max-width: 100%;
    /* ensure it fits inside .content-wrap */
}

aside,
main {
    padding: 16px;
    border: 0px solid #ccc;
    min-height: 300px;
    box-sizing: border-box;
    background-color: white;
}

.left {
    flex: 0 0 20%;
    background: #eeeeee;
}

.main {
    flex: 0 0 60%;
}

.right {
    flex: 0 0 20%;
    background: #eeeeee;
}

@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }

    .left,
    .main,
    .right {
        flex: 1 1 100%;
    }
}

.frame {
    border:8px solid black;
}