html, body {
    margin: 0;
    padding: 0;
    font-family: Orbitron;
    font-size: 80px;
    text-transform: uppercase;
    font-weight: 100;
    background-color: #222;
    color: #eee;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg,rgba(34,34,34,0.8),rgba(34,34,34,0.1)),url(../../imagens/city4.png);
    background-size: cover;
    background-attachment: fixed;
}

html .content, body .content {
    text-align: center;
    top: 50%;
    position: relative;
    transform: translateX(-50%), translateY(-50%);
}

html .content span, body .content span {
    width: 60px;
    display: inline-block;
}

nav {
     position: fixed;
     width: 100%;
     line-height: 60px;
}

nav ul {
     line-height: 60px;
     list-style: none;
     background: rgba(0, 0, 0, 0);
     overflow: hidden;
     color: #fff;
     padding: 0;
     text-align: center;
     margin: 0;
     padding-right: 40px;
     transition: 1s;
}

nav.black ul {
     background: #222;
}

nav ul li {
     display: inline-block;
     padding: 16px 40px;;
}

nav ul li a {
     text-decoration: none;
     color: #fff;
     font-size: 16px;
}

.menu-icon {
     line-height: 50px;
     width: 100%;
     background: #222;
     text-align: right;
     box-sizing: border-box;
     padding: 15px 24px;
     cursor: pointer;
     color: #fff;
     display: none;
}

@media(max-width: 1072px) {

     nav ul {
           max-height: 0px;
     }
     
     .showing {
           max-height: 34em;
           position: absolute;
     }

     nav ul li {
           box-sizing: border-box;
           padding: 5px;
           text-align: right;
     } 

     .menu-icon {
           display: block;
           background: transparent;
     }
     
     html .content span, body .content span {
           width: 20px;
           display: inline-block;
     }
     
     html, body {
           font-size: 35px;
     }

}