 body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
        } 

        header { 
            background-color: #ffffff; 
            color: #000000; 
            text-align: center; 
        } 

        nav { 
            background-color: #242424; 
            padding: 10px; 
        } 

        nav a { 
            color: #fff; 
            text-decoration: none; 
            padding: 10px; 
            margin-right: 10px; 
            display: inline-block; 
        } 

        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between; 
            max-width: 95%; 
            margin: 0 auto; 
            padding: 20px; 
        } 

        article p { 
            text-align: justify; 
        } 

        main { 
            flex: 4; 
        } 

        article { 
            margin-bottom: 20px; 
            padding: 10px 20px; 
            border: 1px solid rgb(145, 145, 145); 
            margin-right: 10px; 
        } 

        aside { 
            flex: 1; 
            background-color: #f3f3f3; 
            padding: 10px; 
        } 

        footer { 
            background-color: #242424; 
            color: #fff; 
            text-align: center; 
            position: fixed; 
            bottom: 0; 
            width: 100%;
        } 
.responsive {
  width: 100%;
  height: auto;
}
.responsivecustom {
  width: 80%;
  height:80% ;
}
.rightalign{
text-align: right;
margin: auto;
}
.author {
display:flex;
justify-content:space-evenly;
}
.codeheader {
display:flex;
justify-content:space-evenly;
height:25px;
}
@media screen and (max-width: 1200px) {
            aside {
                display:none;
            }
            .container {
            display: flex;
            flex-direction: column;
            justify-content: space-between; 
            max-width: 95%; 
            margin: 0 auto; 
            padding: 10px; 
        } 
        }
@media screen and (max-width: 800px) {
.responsiveimg {
  width: 100%;
  height: auto;
}
.author {
display:flex;
flex-direction: row;
}
.codeheader {
display:flex;
flex-direction: row;
height:25px;
}
}

@media screen and (max-width: 600px) {
.codeheader {
display:flex;
flex-direction: row;
height:40px;
}
}

