lunBackServer/src/main/resources/static/css/common.css

:root {
    --WindowFull : 99vw;
    --TopHeight: 160px;
    --FooterHeight: 160px;
    --ContentVerticalMargin: 5px;
    /*background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='45' height='51.96' patternTransform='scale(2) rotate(20)'><rect x='0' y='0' width='100%' height='100%' fill='%23202025ff'/><path d='M52.48 44.47a15 15 0 01-14.96 0 15 15 0 00-7.48 12.96M7.48 44.42a15 15 0 01-14.96 0M15 57.44c0-5.35-2.9-10.35-7.52-13.02a15 15 0 017.48-12.97M7.48 18.5a14.97 14.97 0 01-14.98-.03m15.02-.03A15 15 0 0115 5.47a15 15 0 00-4.4-10.62m23.8.05A15 15 0 0030 5.53a15 15 0 017.48 12.96 14.9 14.9 0 0015.02-.03m-22.5 13a15.13 15.13 0 017.52 13.01m-7.56-39a15 15 0 01-14.96 0M7.48 18.5a15 15 0 017.48 12.96 15 15 0 0015.04 0 15 15 0 017.48-12.96'  stroke-width='3' stroke='%23ec914b8f' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-38,-21.84)' fill='url(%23a)'/></svg>")*/
}

html {
    margin: 1vh 1vw;
    background: #202025ee;
}
body {
    align-content: center;
    padding: 1vh 1vw;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='45' height='51.96' patternTransform='scale(2) rotate(20)'><rect x='0' y='0' width='100%' height='100%' fill='%23202025ff'/><path d='M52.48 44.47a15 15 0 01-14.96 0 15 15 0 00-7.48 12.96M7.48 44.42a15 15 0 01-14.96 0M15 57.44c0-5.35-2.9-10.35-7.52-13.02a15 15 0 017.48-12.97M7.48 18.5a14.97 14.97 0 01-14.98-.03m15.02-.03A15 15 0 0115 5.47a15 15 0 00-4.4-10.62m23.8.05A15 15 0 0030 5.53a15 15 0 017.48 12.96 14.9 14.9 0 0015.02-.03m-22.5 13a15.13 15.13 0 017.52 13.01m-7.56-39a15 15 0 01-14.96 0M7.48 18.5a15 15 0 017.48 12.96 15 15 0 0015.04 0 15 15 0 017.48-12.96'  stroke-width='3' stroke='%23ec914b8f' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-38,-21.84)' fill='url(%23a)'/></svg>")
}

body > *{
    align-content: center;
    color: white;
    padding: 1vh 1vw;
}

/*#main_layer {*/
/*    width: 100%;*/
/*    margin: 0 auto;*/
/*    position: relative;*/
/*    background: #F0F0F524;*/
/*    border-radius: 10px;*/
/*}*/

input, select ,button {
    align-content: center;
    top: 0;
    bottom: 0;
    color: white;
    background: #40404564;
    position: relative;
    outline-width: thin;
    outline-color: #ec914b8f;
    border-color: #ec914b8f;
    border-style: groove;
    border-width: 1px;
}

header {
    top: 0;
    background: #F0F0F524;
    border-top: #ec914b8f;
    border-radius: 10px 30px;
    border-width: 1px;
    height: 8vh;
    min-height: 8vh;
    display: flex;
    position: relative;
}

#main_layer {
    margin: 1vw 1vh;
    position: relative;
    overflow-y: auto;
    overflow-x: clip;
    height: 70vh;
    min-height: 8vh;
}

#main_layer > div {
    position: relative;
}


#content > * {

}

footer {
    display: flex;
    bottom: 0;
    border-top: #ec914b8f;
    background: #F0F0F524;
    border-radius: 30px 10px;
    border-width: 1px;
    height: 8vh;
    min-height: 8vh;
    position: relative;
}