:root {
    /* Color Scheme */
    --c-Horizon: #5588a4;
    --c-Pigeon-Post: #aac6dc;
    --c-Nile-Blue: #17555c;
    --c-Athens-Grey: #f0f1f3;
    --c-Cod-Grey: #0f0b0b;
    /* Dimension Scheme*/
    --top-bar-height: 48px;
    --leftPanel-width: 400px;
    --rightPanel-width: 400px;
    --status-bar-height: 24px;
    --resize-bar-thickness: 4px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
}
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
#topBar {
    width: 100%;
    height: var(--top-bar-height);
    margin: 0;
    padding: 0;
    background-color: var(--c-Nile-Blue);
    align-content: center;
    text-align: center;
    color: var(--c-Athens-Grey);
}
#appTray {
    position: absolute;
    left: 0;
    top: var(--top-bar-height);
    width: var(--leftPanel-width);
    height: calc(100% - var(--top-bar-height) - var(--status-bar-height));
    background-color: var(--c-Athens-Grey);
    border-right: 2px solid var(--c-Pigeon-Post);
    text-align: center;
}
#mainContent {
    height: calc(100% - var(--top-bar-height));
    margin-left: var(--leftPanel-width);
    margin-right: var(--rightPanel-width);
    align-content: center;
    text-align: center;
    overflow: hidden;
}
#informationPanel {
    position: absolute;
    right: 0;
    top: var(--top-bar-height);
    min-width: none;
    width: var(--rightPanel-width);
    max-width: 100%;
    height: calc(100% - var(--top-bar-height) - var(--status-bar-height));
    background-color: var(--c-Athens-Grey);
    border-left: 2px solid var(--c-Pigeon-Post);
    text-align: center;
}
#statusBar {
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: var(--status-bar-height);
    background-color: var(--c-Horizon);
    align-content: center;
    text-align: center;
    color: var(--c-Athens-Grey);
}
.appTile {
    border: 1px solid calc(--c-Pigeon-Post);
}
.appIcon {
    width: 100px;
    height: 100px;
}
.appTitle { 
    width: 300px;
    height: 100px;
}