@property --sidebar-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 20vw;
}

@property --topbar-height {
    syntax: "<length>";
    inherits: false;
    initial-value: 16vh;
}

@property --content-height {
    syntax: "<length>";
    inherits: false;
    initial-value: 86vh;
}

/* Reset */
* {
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* =========================
   MAIN GRID LAYOUT
   ========================= */

body {
    --top-bar-icons-spacing: 3rem;
    --sidebar-width: 20vw;
    display: grid;

    /* 1/5 width left column */
    grid-template-columns: var(--sidebar-width) 1fr;

    /* 1/8 height top row */
    grid-template-rows: minmax(80px, var(--topbar-height)) var(--content-height);

    height: 100vh;
    transition: grid-template-columns 0.5s ease;
    transition: grid-template-rows 0.5s ease;
    transition: --sidebar-width 0.5s ease;
    transition: --topbar-height 0.5s ease;
}

body[data-mode="thumbnail"] {
    /* hide second row */
    --topbar-height: 100vh;
    --content-height: 0vh;
    --sidebar-width: 30vw;
    --top-bar-icons-spacing: 0rem;
}

/* Assign areas */
.icon-corner {
    grid-column: 1;
    grid-row: 1;
    /* background: #222; */
}

.top-bar {
    grid-column: 2;
    grid-row: 1;
    /* background: #444; */
}

.side-bar {
    grid-column: 1;
    grid-row: 2;
    /* background: #666; */
}

.document {
    grid-column: 2;
    grid-row: 2;
    /* background: #ddd; */
}

.document {
    /* document contains a one-cell grid */
    display: grid;
}

/* document's children overlap each other */
.document>* {
    grid-area: 1 / 1;
}

/* =========================
   TOP BAR LAYOUT
   ========================= */


.top-bar {

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 var(--top-bar-icons-spacing) 0 0;
    color: white;
    min-height: 90px;
}


/* Left text container */
.top-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Right images */
.top-images {
    display: flex;
    align-items: center;
    gap: var(--top-bar-icons-spacing);
    height: 100%;
}

.img-wrapper {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.img-wrapper img {
    height: 70%;
    /* fill top bar height */
    width: auto;
    object-fit: contain;
}

.side-bar {
    width: 100%;
    height: 100%;
}

.icon-corner img {
    width: 100%;
    height: 100%;
    padding: 6%;
    object-fit: contain;
}

/* =========================
   RESPONSIVE RULE
   Hide left column if
   width < height / 3
   => width/height < 1/3
   ========================= */

@media (max-aspect-ratio: 4/5) {

    body {
        --sidebar-width: 0vw;
    }

    .image-wrapper,
    .top-images,
    {
    display: none;
}

}

html[data-mode="thumbnail"] .image-wrapper,
.top-images {
    display: none;
}

/*hide images with no source*/
img[src=""] {
    visibility: hidden;
}