@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&display=swap');

*{padding: 0; margin: 0; font-family: roboto; }

header {color: #ffffff; padding: 1rem; }

img{width: 100%;}

nav ul li {display: inline-block; }
nav ul li a {color: #00f5ff; padding: 1rem; text-decoration: none; display: block; font-family: 'IBM Plex Mono'; margin: auto; flex-direction: row; }
nav ul li a:hover{
    color: #e8e8e8;
}

h1 {color: #ffffff; background: #3b3b3b; padding: 1rem; }
h1 {font-family: 'IBM Plex Mono'; font-weight: 700; }

h2 { color: #fff; background: #3b3b3b; font-size: 14px; padding: 1rem; }
h2 {font-family: 'IBM Plex Mono'; font-weight: 500; }

section article p { font-size: 12px; color: #777777; background: #e8e8e8; padding: 0.8rem; }

footer { font-size: 11px; color: #fff; background: #747474; padding: 1rem; text-align: center;}

section{
    width: 100%;
    margin: 0px;
    text-align: center;
    
}

.box2{
    height: 200px;
    background-color: #e8e8e8;
}



@media screen and (min-width: 900px){
        section{
            width: 100%;
            margin: 0px;
            display: flex;
            text-align: left;
             
        }
        article{
            width: 50%;
        }
        .box1, .box2{
            height: 350px;
            background-color: #e8e8e8;
        }

}