*{padding: 0px; margin: 0px; box-sizing: border-box; border: 0px; font-size: 0px;}
a{text-decoration: none; color: white;}

@media (orientation: Portrait), not (min-width: 720px){
    :root{
        --screen-min-height:        max(100vw, 100vh);
        --inner-min-height:         max(100vw, 100vh);

        --Logo-height:              10vw;
        --Logo-margin:              0 3vw 0 0;
        --Ava-height:               var(--Logo-height);

        --Hat-height:               calc(15vw - var(--border-size));
        --Hat-padding:              calc((var(--Hat-height) - var(--Logo-height)) / 2);

        --top-height:               15vw;
        --left-width:               10vw;
        --right-width:              10vw;
        --bottom-height:            0px;

        --content-padding:          calc(var(--SearchPanel-top) - var(--top-height)) 0 0 0;
          
        --btn-height:               8vw;
        --btn-border-radius:        1vw;
        --btn-margin:               0 0 1vw 0 ;

        --SearchPanel-top:          25vw;
        --SearchPanel-height:       calc((var(--screen-min-height) - var(--SearchPanel-top)) - 10vw);
        --SearchPanel-width:        var(--right-width);
        --SearchPanel-padding:      1vw;
        --SearchPanel-border-radius:1vw;

        --ToolPanel-top:            25vw;
        --ToolPanel-height:         calc((var(--screen-min-height) - var(--SearchPanel-top)) - 10vw);
        --ToolPanel-width:          var(--right-width);
        --ToolPanel-padding:        1vw;
        --ToolPanel-border-radius:  1vw;

        --border-size:              min(1.25vh, 1.25vw);
    }
}

@media (min-width: 720px) and (orientation: Landscape){
    :root{
        --screen-min-height:        100vh;
        --inner-min-height:         100vh;

        --Logo-height:              min(calc(5vw + 5px), 10vh);
        --Logo-margin:              0 min(calc(1vw + 10px), 10vh) 0 0;
        --Ava-height:               var(--Logo-height);

        --Hat-height:               calc(15vh - var(--border-size));
        --Hat-padding:              calc((var(--Hat-height) - var(--Logo-height)) / 2);

        --top-height:               15vh;
        --left-width:               min(10vw, 10vh);
        --right-width:              min(10vw, 10vh);
        --bottom-height:            0px;

        --content-padding:          calc(var(--SearchPanel-top) - var(--top-height)) 0 0 0;
        
        --btn-height:               calc(var(--left-width) / 10 * 8);
        --btn-border-radius:        calc(var(--btn-height) / 4);
        --btn-margin:               0 0 calc(var(--btn-height) / 10) 0;

        --SearchPanel-top:          calc((100vh + var(--top-height) - var(--SearchPanel-height)) / 2);
        --SearchPanel-height:       65vh;
        --SearchPanel-width:        var(--right-width);
        --SearchPanel-padding:      calc(var(--btn-height) / 10);
        --SearchPanel-border-radius:calc(var(--btn-height) / 4);

        --ToolPanel-top:            calc((100vh + var(--top-height) - var(--SearchPanel-height)) / 2);
        --ToolPanel-height:         65vh;
        --ToolPanel-width:          var(--right-width);
        --ToolPanel-padding:        calc(var(--btn-height) / 10);
        --ToolPanel-border-radius:  calc(var(--btn-height) / 4);

        --border-size:              min(1.5vh, 1.5vw);
    }
}

#screen {
    min-height: var(--screen-min-height);  
    width: 100%;
    background-color: #90b5b9;
}

#Hat {
    position: fixed;
	width: 100%;
    height: var(--Hat-height);
    background-color: white;
    padding: var(--Hat-padding);
    outline: solid #577986 var(--border-size);
    z-index: 1;
}

#Hat a.left {
    float: left;
}

#Hat a.right {
    float: right;
}

#Logo {
    height: var(--Logo-height);
    margin: var(--Logo-margin);
}

#Ava{
    height: var(--Logo-height);
    width: var(--Logo-height);
    border-radius: calc(var(--Logo-height) / 2);
    float: right;
}

#inner {
    display: table;
    min-height: var(--inner-min-height); 
    width: 100%;
}

#top {
    display: table-row;
    height: var(--top-height);
    width: 100%;
}

#left {
    display: table-cell;
    position: relative;
    height: 100%;
    width: var(--left-width);
}

#right {
    display: table-cell;
    position: relative;
    height: 100%;
    width: var(--right-width);
}

#bottom {
    display: table-row;
    height: var(--bottom-height);
    width: 100%;
}

#content {
    display: table-cell;
    width: auto;
    height: auto;
    padding: var(--content-padding);
}

#ToolPanel {
    left: 0px;
    top: var(--ToolPanel-top);
    height: var(--ToolPanel-height);
    position: fixed;
    background-color: white;
    padding: var(--ToolPanel-padding);
    border-bottom-right-radius: var(--ToolPanel-border-radius);
    border-top-right-radius: var(--ToolPanel-border-radius);
    width: var(--ToolPanel-width);
}

#SearchPanel {
    right: 0px;
    top: var(--SearchPanel-top);
    height: var(--SearchPanel-height);
    position: fixed;
    background-color: white;
    padding: var(--SearchPanel-padding);
    border-bottom-left-radius: var(--SearchPanel-border-radius);
    border-top-left-radius: var(--SearchPanel-border-radius);
    width: var(--SearchPanel-width);
}

#ToolPanel .btn {
    border-radius: var(--btn-border-radius);
    overflow: hidden;
    background-color: #d3e4f7;
    margin: var(--btn-margin);
    height: var(--btn-height);
}

#SearchPanel .btn {
    border-radius: var(--btn-border-radius);
    overflow: hidden;
    background-color: #d3e4f7;
    height: 100%;
}

#SearchPanel div {
    height: var(--btn-height);
    background-color: #d3e4f7;
}

.btn img {
    height: inherit;
}