:root {
    --WindowFull : 100%;
    --TopHeight: 160px;
    --FooterHeight: 160px;
    --ContentVerticalMargin: 5px;
}
input, select ,button{
    color: white;
    background: #2d2f34;
    border: black;
    border-width: 1px;
    padding: 0;
    margin: 0;
    position: relative;
}
body, html {
    background-color: black;
    margin: 0px;
    height: 100lvh;
}

header {
    width: 100%;
    align-content: center;
    position: relative;
    height: var(--TopHeight);
    background-image: url("../blog/post/images/42cc3207-42a4-4ceb-8a2f-f5f7a89496fc.jpg");
    background-repeat: revert;
    background-size: contain;
    background-origin: revert;
}

#content {
    margin-left: 2.5%;
    margin-right: 2.5%;
    position: relative;
    overflow-y: auto;
    overflow-x: clip;
    background: black;
    min-height: calc((var(--TopHeight) + var(--FooterHeight)) * 2);
    height: calc(var(--WindowFull) - calc(var(--FooterHeight) + var(--TopHeight)));
    background-image: url("../blog/post/images/bb109b5a-f907-4da1-9c4f-55533395ed6e.jpg");
    background-repeat: revert;
    background-size: contain;
    background-origin: revert;
}

#content > * {
    margin-top: var(--ContentVerticalMargin);
    margin-bottom: var(--ContentVerticalMargin);
}

footer {
    width: 100%;
    align-content: center;
    position: relative;
    height: var(--FooterHeight);
    background-image: url("../blog/post/images/42cc3207-42a4-4ceb-8a2f-f5f7a89496fc.jpg");
    background-repeat: revert;
    background-size: contain;
    transform: scaleY(-1);
}