:root {
    --main-body-background-color: #fff;
    
    --main-header-background-color: #132651;
    --main-header-font-color: rgb(172, 191, 236, 0.75);
    
    --main-footer-background-color: #132651;
    --main-footer-font-color: #acbfec;

    --main-content-background-color: #fff;
    --main-content-font-color: #132651;
    --main-content-border-color:#f0f0f0;

    --img-width: 100%;
    --img-translate-x: 0%;
    --img-width-mutiplier: 1.0;
    --img-translate-x-correction: 0%;

}

html {
    background: black;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

@media (min-width: 100px) {
    :root {
        --img-width: 200%;
        --img-translate-x: -25%;
    }
  }
@media (min-width: 200px) {
    :root {
        --img-width: 180%;
        --img-translate-x: -23%;
    }
  }
@media (min-width: 500px) {
    :root {
        --img-width: 150%;
        --img-translate-x: -20%;
    }
}
@media (min-width: 700px) {
    :root {
        --img-width: 120%;
        --img-translate-x: -10%;
    }
}
@media (min-width: 800px) {
    :root {
        --img-width: 110%;
        --img-translate-x: -5%;
    }
}
@media (min-width: 1000px) {
    :root {
        --img-width: 100%;
        --img-translate-x: 0%;
    }
}

@media (min-height: 10px) {
    :root {
        --img-width-mutiplier: 0.1;
        --img-translate-x-correction: 15%;
    }
}
@media (min-height: 100px) {
    :root {
        --img-width-mutiplier: 0.25;
        --img-translate-x-correction: 12%;
    }
}
@media (min-height: 200px) {
    :root {
        --img-width-mutiplier: 0.50;
        --img-translate-x-correction: 10%;
    }
}
@media (min-height: 300px) {
    :root {
        --img-width-mutiplier: 0.65;
        --img-translate-x-correction: 8%;
    }
}
@media (min-height: 350px) {
    :root {
        --img-width-mutiplier: 0.70;
        --img-translate-x-correction: 3%;
    }
}
@media (min-height: 450px) {
    :root {
        --img-width-mutiplier: 0.75;
        --img-translate-x-correction: 0%;
    }
}
@media (min-height: 500px) {
    :root {
        --img-width-mutiplier: 0.8;
        --img-translate-x-correction: 0%;
    }
}
@media (min-height: 550px) {
    :root {
        --img-width-mutiplier: 1.0;
        --img-translate-x-correction: 0%;
    }
}






body {
    font-family: 'Open Sans', 'Lato', sans-serif;
    font-size: 0.9em;
    color: var(--main-content-font-color);
    padding: 0px;
    margin: 0px;
    background: var(--main-body-background-color);
    overflow:hidden;
}


.main-head {
    grid-area: header;
    background-color: var(--main-header-background-color);
    z-index:99;
}
.main-head .header_liseq_logo {
    position:absolute;
    left: 10px;
    top: 2px;
    height: 37px;
}
.main-head .header_nokia_logo {
    position:absolute;
    right: 10px;
    top: 10px;
}



.content-panel {
    grid-area: content;
    background-color: var(--main-content-background-color);
}

.content-panel .content-main{
    min-height: 100px;
    margin: 2px;
    padding: 2px 2px 2px 2px;
}
.content-panel .content-main .centered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
}
.content-panel .content-main img{
    width: calc(var(--img-width) * var(--img-width-mutiplier));
    transform: translate(calc(var(--img-translate-x) + var(--img-translate-x-correction)), 0%);
}
.content-panel .content-main .centered div{
    text-align: center;
    letter-spacing: 2px;
}










.wrapper {
    display: grid;
    width: 100%;
    height: 100vh;
    gap: 1px;
    grid-template-rows: 40px auto 10px; 
    grid-template-columns: 100%; 
}
.wrapper-just-content {
    grid-template-columns: 100%; 
    grid-template-areas:
        "header"
        "content"
}