/* Main Styles */
* {
    box-sizing: border-box;
}

body{
    margin:0;
    padding:20px;
    font-family: 'Helvetica', sans-serif;   
    font-size: 1em;
    max-width: 100%;
    overflow-x: hidden;
}

.container{
    border:2px solid black;
    padding:20px;
    width:100%;
    max-width:100%;
    display:flex;
    margin-top: 20px;
    clear: both;
}

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

a:hover{
    color:#a1a1a1;
}

#top{
    display:flex;
    flex-direction: column;    /* stack name and nav vertically */
    width:100%;
    margin-bottom: 20px;
}

#top h1 {
    margin: 0 0 10px 0;        /* space below name */
}

#nav{
    list-style:none;
    display:flex;
    flex-wrap: wrap;
    padding-left:0;
    margin: 0;
}

#nav li{
    margin-right: 20px;
    margin-left:0;
    font-size:1.5em;
}

#nav li:first-child {
    margin-left: 0;
}

#right{
    width:100%;
    clear: both;
}

/* Music Styles */
.container{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
}

.item{
    flex:0 10%;
    padding-bottom:20px;
    visibility:visible;
}

#websites{
    text-align: right;
    margin-right:20px;
    margin-top:20px;
    width:100%;
}

/* make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* optional: adjust for very small screens */
@media (max-width: 500px) {
    body { padding: 10px; }
    #nav li { font-size: 1.2em; margin-right: 10px; }
}