* {
    margin: 0; 
    padding: 0; 
    border: 0; 
    box-sizing: border-box;
}

:root {
    font-size: 62.5%;
}

body {
    font-size: 2rem;
    background-color:rgb(114, 194, 241);
    width: 80%; 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#header-container {
    width: 1000px; height: 50px;
    margin: left; /* centering a block element */
    position: relative; /* position the children based on the parent */
}

header {
    background-color: rgb(18, 18, 49);
    height: 100px;
    position: cover;
    width: 125%;
    margin-top: 5px;
    color:rgb(245, 243, 243);
}

#header-container nav a {
    background-color: rgb(18, 18, 49);
    height: 100px;
    margin-left: 185%;
    width: 150%;
    
    color:rgb(245, 243, 243);
}

#footer {
    position: cover;
    width: 125%;
    height: 200px;   /* Height of the footer */
    margin-bottom: 5px;

    background-image:url(../images/yarn-footer.jpg);
    background-size:cover;
    background-position: 90% 25%;
    text-align: center;
    padding: 24px 0px;
    color:rgb(245, 243, 243);
 }

#footer { 
    height: 200px;
    Font-size: 110%;
    color:aliceblue;
}




/* consistent styles for all articles */
article {
    margin: 24px 8px;
    padding: 8px;
}


article section {
    margin: 80px;
    min-height: 250px;
}

#main_navigation nav {
    border: 2px solid transparent;
    list-style-type: none;
    display: flex; 
}

#main_navigation nav a {
    
    border: 2px solid rgb(76, 152, 196);
    background-color: rgb(76, 152, 196);
    display: inline-block;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight:normal;
    text-align: center;
    line-height: 0px;
    font-size: 175%;


    margin: 80px;
    padding: 150px;
    width: 350px; height: 100px;
    margin-top: 0px;
    margin-left: 175px;
    margin-bottom: 20px;
    text-decoration: none;
    
    
    
    transition: all 300ms ease-out;
    outline: 4px solid rgb(21, 197, 15);
    outline-offset: -16px;
    position: flex;
    
}

#main_navigation nav a:hover {
    background-color:rgba(21, 197, 15, 0.4);
    color: whitesmoke;
}


 #article1 {

    background-image:url(../images/yarn-header.jpg);
    background-size: cover;
    background-position: center;
    text-align: center;
    height: 250px;
    width: 400px;
    margin-left:177px;
    margin-top: 14px;
    
}




 #article2 section {
    background-image:url(../images/yarn1.jpg);
    background-size: cover;
    background-position: 60% 25%;
    text-align: center;
    height: 200px;
    margin-top: 25px;
 }

 #article2 {
    position: absolute;
    right: 0px; top: 6px;
    margin: 80px;
    width: 50%;
}

 #article2 div {
    display: flex;
 }

 #article2 section div {
    background-color: rgb(18, 18, 49, 0.6);
    text-align: center;
    color:aliceblue;
    font-size: 200%;
}