body {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
}

:rootdev { /* development */
    --outer-n-inner-margin-v: 4px;
    --outer-n-inner-border-v: 4px;
    --outer-n-inner-border-radius-v: 4px;
    --outer-n-inner-padding-v: 4px;

    --box-margin-v: 0px;
    --box-border-width-v: 0px;
    --box-border-radius-v: 0px;

    --box-border-color-v: #888;
    --box-background-color-v: #ccc;

    --grid-gap-v: 4px;

    --header-height: 100px;
    --side-width: 150px;
    --side-height: 100px;
}
:root { /* production */
    --outer-n-inner-margin-v: 0px;
    --outer-n-inner-border-v: 0px;
    --outer-n-inner-border-radius-v: 0px;
    --outer-n-inner-padding-v: 1px;

    --box-margin-v: 0px;
    --box-border-width-v: 2px;
    --box-border-radius-v: 0px;

    --box-border-color-v: lightgray;
    --box-background-color-v: white;

    --grid-gap-v: 1px;

    --header-height: 100px;
    --side-width: 150px;
    --side-height: 100px;
}
body {
    height: 100vh;
    margin: 0;
    display: flex;
}

.outer{
    margin: var(--outer-n-inner-margin-v);
    border: var(--outer-n-inner-border-v) solid pink;
    border-radius: var(--outer-n-inner-border-radius-v);
    padding: var(--outer-n-inner-padding-v);

    display: flex;
    flex-grow: 1;
}
.inner {/* inner is for header + content + side */
    flex-grow: 1;

    margin: var(--outer-n-inner-margin-v);
    border: var(--outer-n-inner-border-v) solid turquoise;
    border-radius: var(--outer-n-inner-border-radius-v);
    padding: var(--outer-n-inner-padding-v);

    display: grid;
    grid-gap: var(--grid-gap-v);
    transition: margin 0.5s ease-in-out;

    grid-template-rows: var(--header-height) 1fr;
    grid-template-columns: 1fr;

    grid-template-areas:
        "header"
        "content";
}

.small_logo { display: flex; }
.big_logo { display: none; }

.big_screen { display: none; }
.small_screen { display: block; }



.box {
    padding: 10px; margin: var(--box-margin-v);
    border: var(--box-border-width-v) solid var(--box-border-color-v);
    border-radius: var(--box-border-radius-v);
    background-color: var(--box-background-color-v);
    color: #000;
    font-size: 150%;
    position: relative;
}
.header      { grid-area: header; background-color: #444; }
.content     { grid-area: content; }

svg {
    display: block; position: absolute;
    top: 5%; left: 5%; width: 90%; height: 90%;
}
.mycircle { fill: white; stroke: black; stroke-width: 1px; }

.center_myicon {
    margin: 0 auto;
    padding: 5px;
    
    height: 70%;
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
}


.left_center { float: left; }
.right_center { float: right; }

.url_style {
    text-decoration: none;
}

.cyan {
    background-color: cyan;
}


@media (min-width: 1200px) {
    .small_logo { display: none; }
    .big_logo { display: flex; }
}