body {
    list-style: none; 
    font-family: "Fredoka", sans-serif;
    margin:0;
    height:100%;
}
header{
    margin:auto;
    width:100%;
}
header img{
    max-height:80px;
}
.box {
    width:100%;
}
@media (min-width:800px) {
    /* desktop */
    .box {
        height: 100%;
    }
    #sectionContainer {
        width:100%;
        margin: auto;
    }
    .contentEntryContainer {
        max-width: 500px;
    }
}
@media only screen and (max-width: 800px) {
    /* Mobile */
    .box {
        display: flex;
        flex-flow: column;
        height: 100%;
        
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    #sectionContainer {
        padding:1em;
    }
    .contentEntryContainer {
        max-width: 100%;
    }
}

.box {
    display: flex;
    flex-flow: column;
    
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

h1 {
    display: flex;
    margin-bottom:0;
    align-content: center;
    justify-content: center;
    align-items: center;
}

ul{
    padding:0;
}

nav {
    width: 100%;
    overflow-x: auto;
}

nav ul{
    display: flex;
    justify-content: center;
}
li {
  padding:1em;
  list-style: none; 
}
nav li {
  float: left;
  padding-top:0.5em;
  padding-bottom:0.5em;
}

nav ul li.selected {
    text-decoration:underline;
    text-underline-offset: 10px;
    text-decoration-color:#939393;
}
a, a:visited, a:hover, a:active {
    color: black;
}

.section {
    height:100%;
    width:100%;
    margin:1 auto;
    display: flex;
    text-align: center;
    flex-wrap: wrap;
}

.section ul {
    width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

#sectionContainer {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    
    background-color: #e7e7e7;

    border:0;

    -webkit-box-shadow: inset 0px 0px 27px 0px rgba(0,0,0,0.27); 
    box-shadow: inset 0px 0px 27px 0px rgba(0,0,0,0.27);
}

.contentEntryContainer {
    
    border-color: #747474;
    background-color:black;
    border-width: 1px;
    border-style: solid;
    padding: 0px;
    border-radius: 10px; 
    list-style: none;
    margin: 2em auto;
    display: block;
    overflow: hidden;
    position: relative;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.41); 
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.41);

}

.contentEntryContainer .content {
    background-position: top;
    background-size:cover;
    background-repeat: no-repeat;
    background-color:rgb(0, 0, 0);

    transition: all .5s;
}
.contentEntryContainer .footer{
    padding:15px;
    
    bottom: 0;
    position: relative;
    background-color: black;
}
a {
    text-decoration:none;
}
.contentEntryContainer p {
    text-decoration:none;
    margin:0;
    color:white;
}
.contentEntryContainer h2 {
    text-decoration:none;
    margin:0;
    color:white;
}

.contentEntryContainer .content:hover{
    transform: scale(1.2);
}

#content {
    flex: 1 1 auto;
    overflow-y: auto;
}
#content ul{
    margin: auto;
    display: flex;
    flex-direction: column;
}
#contact {
    text-align:center;
}

#contact img {
    width:15px;
    vertical-align:middle
}
#contact ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}

#games .content img {
    
}
#assets .content img {
    
}
#music li {
    width:100%;
}
#music iframe {
    width:100%;
    height:350px;
}