/* Import Fonts */
@import url(http://fonts.googleapis.com/css?family=Coustard|Open+Sans);

* {
    box-sizing:     border-box;
}
:root {
    --DN-Teal:      #094466;
    --DN-Orange:    #F0A620;
    --DN-Red:       #80111A;

    --DN-font-size:     49px;
    --DN-line-height:   100px;
}
body {
    display:            flex;
    flex-direction:     column;
    justify-content:    left;
    align-content:      space-between;
    align-items:        left;
    background:         black;
    background-size:    cover;
}
@media only screen and (max-width: 600px) {
    body {
        align-items:        center;
    }
    :root {
        --DN-font-size:     39px;
        --DN-line-height:   80px;
    }
}
a {
	text-decoration:    none;
	font-weight:        normal;
	color:              inherit;
}
a:hover {
    text-decoration:    underline;
}

/* ************************************************************************************************************************************************************************************************************************************************ */

/*
    <div class="DN-menu-block">
        <nav class="DN-main-menu">
            <h1 class="DN-menu-logo">*</h1>
            <h1>Dark Nova</h1>
            <ul>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Store</a></li>
                <li><a href="#">Universes</a></li>
            </ul>
        </nav>
        <nav class="DN-follow-menu">
            <h2 ><a href="#">Follow</a></h2>
            <ul>
                <li class="X"><a href="#"><img src="images/icon-facebook.png" /></a></li>
                <li class="X"><a href="#"><img src="images/icon-twitter.png" /></a></li>
                <li class="X"><a href="#"><img src="images/icon-google.png" /></a></li>
                <li class="X"><a href="#"><img src="images/icon-linkedin.png" /></a></li>
                <li class="X"><a href="#"><img src="images/icon-pinterest.png" /></a></li>
            </ul>
        </nav>
    </div>
*/

.DN-menu-block          {
    width:              306px;
    background:         var(--DN-Teal);
    line-height:        var(--DN-line-height);
    font-family:        'Coustard', serif;
}
.DN-menu-block a:hover  {
    text-decoration:none;
}
.DN-menu-block h1       {
    font-size:          var(--DN-font-size);
    background:         var(--DN-Orange);
    color:              white;
    text-align:         center;
    margin:             35px 0 35px 0;
}
.DN-menu-block h2       {
    font-size:          var(--DN-font-size);
    background:         var(--DN-Orange);
    text-align:         center;
    color:              white;
}
.DN-menu-block ul       {
    padding:            0;
    margin:             0;
}
.DN-menu-block li:hover {
    background:         var(--DN-Red);
    color:              var(--DN-Orange);
}
.DN-menu-block ul li    {
    list-style:         none;
    list-style-type:    none;
    font-size:          var(--DN-font-size);
    background:         var(--DN-Orange);
    color:              var(--DN-Teal);
}
.DN-follow-menu ul li   {
    display:            inline;
    padding:            10px 19px 10px 19px;
}
.DN-main-menu ul li    {
    text-align:         center;
    border-bottom:      5px solid var(--DN-Teal);
}