*{
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
header{
    text-align: center;
    background-color: #05A8AA;
    padding: 10px;
    color: #fffffc;
    width: 100%;
}
/* navbars */
.sidebar {
    list-style-type: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 999;
    background-color: #05A8AA;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
 .horizontal-menu {
    list-style-type: none;
    background-color: #05A8AA;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.navbar a{
    text-decoration: none;
    color: #fffffc;
    padding: 15px;
    display: flex;
    text-align: center;
}
.navbar li{
    float: left;
}
.navbar a:hover{
    background-color: #87d6d7;
}
nav li:first-child{
    margin-right: auto;
}

.sidebar li{
    width: 100%;
}
.sidebar a{
    width: 100%;
} 
.sidebar.show {
    display: flex;
}
/* content */
.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 14px;
    margin: 10px;
    place-items: center;
}
img {
    border-radius: 15px;
    max-width: 100%;
    padding-top: 10px;
}
body {
    min-height: 100vh;
    background-color: #fffffc;
    margin: 0px;
}
footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #05A8AA;
    padding: 10px;
    color: #fffffc;
}
@media screen and (max-width: 600px) {
     .parent{
        grid-template-columns: 1fr;
     }
    .horizontal-menu li:not(.menu-button) {
        display: none;
    }
    .parent {
        width: 100%;
        padding: 5px;
    }

}