html{
    background-color: var(--back-color-footer-header);
}
.layout {        
    width: 100%;
    max-height: fit-content;
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-areas:
        "menu menu menu menu menu"
        " mitte mitte mitte mitte mitte "
        "footer footer footer footer footer"
}
#heading {
    width: 97%;
    display: flex;
    grid-area: menu;
    background-color: var(--back-color-footer-header);
justify-content: end ;
    align-items: center; 
}
#side{
background-color: #141b3f;
    grid-area: side;
}
#middle {
    display: block;
   height: auto;
    background-color: #141b3f;
    grid-area: mitte;
    justify-content: center;
    font-size: calc(12px + (16 - 10) * ((100vw - 320px) / (1600 - 320)));
}
footer {
    margin-bottom: 20px;
    display: flex;
    height: auto;
    grid-area: footer;
    background-color: var(--back-color-footer-header);
    justify-content: space-evenly;
    font-size: calc(12px + (16 - 10) * ((100vw - 320px) / (1600 - 320)));
}
#copyright {
    font-size: 10px;
    align-items: center;
    background-color: var(--back-color-footer-header);
    color: rgb(206, 206, 206);
}
@media (max-width: 1104px) {

    main {
        width: 100%;
        height: 100%;
        display: inline;
        padding: 0;
    }
        #heading {
            display: flex;
            grid-area: menu;
            background-color: var(--back-color-footer-header);
            justify-content: end;
            align-items: center;
            margin-right: 20px;
        }

}