* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html {
    margin: 0;
    padding: 0;
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; 
  background-color: black;
  color: wheat;
}

/*

Key: 

/// layer

// layer traits
- relational: typical flex/block/inline based layout.
- floating: independent absolute positioning.

// layer levels
- below: z-5.
- gl: ground level, set at z0.
- agc: above ground level, z5.
- top: top, z10.
*/

/* layer gl */

.layer_relational_gl { /*gl = ground level*/
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid purple;
}

.content {
    height: 100%;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid purple;
}

/* layer top */

.layer_floating_top {
    position: absolute;
    top: 0; left: 0;  
    z-index: 10;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid purple;
    pointer-events: none;
}

.headerBar {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 20%;
    padding: 0 20%;
    flex-direction: row;
}

#name {
    position: absolute;
    text-align: left;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: fit-content;
}

.heading {
    width: 100%;
    height: 100%;
    min-height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid purple;
}

.element {
    border: 1px dotted green;
}

.elementColumn {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.elementExpanded {
    flex: 1;
    overflow: hidden;
}

.elementCollapsed {
    flex-shrink: 0;
    cursor: pointer;
}

.elementCollapsed .element__wasm {
    display: none;
}

.element__wasm canvas {
    width: 100%;
    height: auto;
    display: block;
}


@media (orientation: portrait) {
}


@media (orientation: landscape) {
}