body{
    display:grid;
    grid-template-columns: auto;
    font-family: Arial, sans-serif;
    padding: 0;
    align-items: center;
}
#card{
    background-color: gray;
}
#clear{
    background-color: lightblue;
}
.profitability{
    background-color: lightgray;
}
h2{
    color:green;
    text-align: center;
}
h3{
    color:skyblue;
}
header{
    display:grid;
    grid-template-columns: 24px auto 44px;
    gap:10px;
    align-items:center;
    background-color: lightgrey;
    text-align: center;
}
header img{
    width:100%;
}
h1{
    color: blue;
    text-align: center;
}
.hamburger{
    border:none;
    cursor:pointer;
    font-size: 32px;
}
.hamburger::before{
    content: "\2630";
    font-size: 32px;
}
.hamburger.show::before{
    content: "\2715";
}
.navigate{
    display:none;
}
.navigate.show{
    display:block;
}
nav ul{
    list-style-type: none;
    display:block;
}
nav a:hover{
    color: purple;
}
.dove{
    color: red;
}
.jump{
    color: green;
}
main{
    padding: 20px;
}
#directory-entries section{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "image"
    "name"
    "description"
    ;
    border: 2px solid blue;
    padding: 30px;
    margin-top: 10px;
}
#directory-entries img{
    grid-area: image;
    width: 350px;
    height: 250px;
}
#directory-entries h2{
    grid-area: name;
}
#directory-entries p{
    grid-area: description;
}
.profitability,th, td {
    border: 2px  solid black;
    padding: 10px;
}
.nutrient{
    border-collapse: collapse;
}
.profitability{
    border-collapse: collapse;
}
#register{
    padding: 10px;
    display:grid;
    background-color: gray;
}
label input{
    display:flex;
    padding: 5px;
}
button:hover{
    background-color: green;
}
#notification{
    padding: 5px;;
    width: 80px;
    margin-top: 5px;
}
#address{
    color: green;
}
footer{
    border-top: 1px solid black;
    padding-top: 5px;
    text-align: center;
    background-color: lightgrey;
}

.media img{
    width:44px;
    height:44px;
}