styles.css

body{
    background-image: url(./ancelleSunset.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 0;
    font-family: Roboto;
    margin: 0;
}

.top-bar {
    margin: 0;
    font-size: 30px;
    font-size: 2.5vw;
    font-style: italic;
    width: 100%;
    min-height: 80px;
    background: inherit;
    position: fixed;
    left : 0;
    top : 0;
    padding-bottom: 5px;


}

#menu li{
    padding-bottom: 20px;
}

#menu a {
    font-weight: bold;
    color: RoyalBlue;
}


#menu a:hover{
    color: deepskyblue;
}

ul{
    list-style: none;
}

.name{
    margin-left: 30%;
    display: inline-flex;
    left: 35%;
    font-size: 50px;
}

.articles{
    margin-left: 25%;
    margin-top: 85px;
    margin-right: 25%;


}


@media only screen and (max-width: 1000px) {
    .articles{
        margin-right: 25px;
        margin-left: 10%;
        margin-top: 120px;
    }

    .container {
        margin-left: 5px;
        margin-top: 5px;
    }

    .description p{
        font-size: 37px;
    }

    .name {
        font-size: 80px;
    }

    .top-bar {
        margin-bottom: 20px;
    }

    #menu li {
        font-size: 50px;

    }

    #menu {
        min-width: 150px;
    }
}

img{
    width: 100%;
    height: 100%;
    /*min-height: 500px;*/
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
     -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.description {
    font-style: normal;
    font-family: Roboto;
    font-size: 25px;

}

.article{
    padding: 15px;
    margin: 30px;
    background: white;
    border-radius: 25px;
    border-style: solid;
    border-color: black;
}

.container {
    display: inline-block;
    cursor: pointer;
    margin : 5px;
    margin-left: 10px;
}

.bar1, .bar2, .bar3 {
    width: 42px;
    height: 7px;
    background-color: black;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-11px, 8px) ;
    transform: rotate(-45deg) translate(-11px, 8px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}


#menu{
    position: fixed;
    font-size: 30px;
    min-width: 300px;
    left: 0;
    top: 0;
    top: 0;
    background-color: AntiqueWhite;
    display: none;
    padding-top: 50px;
    padding-right: 15px;
    width: 15%;
    height: 100%;
    transition: 2s;

}

.change .left-menu{
    opacity: 1;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}