.header {
    grid-area: h;
    background-color: #bbf1bb;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed; */
}

.menu {
    grid-area: m;
    background-color: #fde886;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    grid-area: c;
    background-color: #8afcf9;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;  /*Раскоммичено временно ибо может сломать построение элементов */
    font-style: Arial;
}

.footer {
   grid-area: f;
   background-color: #dfb8f8;
   border-radius: 10px;
   display: flex;
   justify-content: center;
   align-items: center;

}

/* Не трогай это, логику адаптива сломаешь */
.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 4% 28% 4%;
    grid-template-areas:
        "h h h h h h h h h h h h h h h h"
        /* "h h h h h h h h h h h h h h h h" */
        "m m m c c c c c c c c c c c c c"
        /* "m m m c c c c c c c c c c c c c" */
        "f f f f f f f f f f f f f f f f";
}
@media screen and (max-width: 50%) {
    .container {
        grid-template-areas:
            "m m m m m m m m h h h h h h h h"
            "c c c c c c c c c c c c c c c c"
            "f f f f f f f f f f f f f f f f";
    }
}

.a1 {
  color: #ffffff;
}
.a2 {
  color: #ffffff;
}
.a3 {
  /* position: fixed; */
  color: #ffffff;
  overflow: auto;
}
.a4 {
  color: #ffffff;
}

#btn1
{
    width: 100px;
    height: 80px;
    background-color: rgb(32, 33, 36);
    border-radius: 6px;
}
