:root {
  font-size: calc(var(--cell-size) / 8.7);
  --gap: calc(var(--cell-size) / 10);
  --border: 0.7rem;
  --shadow: calc(var(--gap) * 0.5);
  --gutter: calc(50vw - var(--cell-size) * 2.3);
  --width: calc(var(--cell-size) * 4.3);
}

html {
  overflow: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
html::-webkit-scrollbar { /* WebKit */
  width: 0;
  height: 0;
}

body {
  display: flex;
  justify-content: left;
  margin: 0;
  font-family: sans-serif;
  background-color: black; /*#202020;*/
}

p {
  margin: 0;
  margin-bottom: var(--shadow);
}
                
a {
  font-weight: bold;
  text-decoration: none;
  color: #202020;
}

iframe.page {
  border: 0;
  width: 100vw;
  height: var(--height);
  filter: opacity(0.5);
  pointer-events: all;
}

iframe.video {
  border-radius: var(--border);
}

div.grid {
  display: grid;
  column-gap: var(--gap);
  row-gap: var(--gap);
  grid-auto-flow: row dense;
  grid-template-columns: repeat(4, var(--cell-size));
  width: var(--width);
  align-content: top;
  align-items: top;
  font-size: 1rem;
  margin: var(--gap) 0 var(--gap) 0;
}

div.grid-alt {
  width: 100vw;
  height: 100vh;
  display: grid;
  column-gap: var(--gap);
  row-gap: var(--gap);
  grid-auto-flow: row dense;
  margin: var(--gap);
  grid-template-rows: repeat(6, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  grid-template-columns: repeat(11, var(--cell-size));
  grid-auto-columns: var(--cell-size);  
  justify-content: center;
}

div.grid-left {
  display: grid;
  column-gap: var(--gap);
  row-gap: var(--gap);
  grid-auto-flow: row dense;
  margin: var(--gap);
  grid-template-columns: repeat(auto-fill, var(--cell-size));
  grid-auto-columns: var(--cell-size);
  grid-template-rows: repeat(auto-fill, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  width: 100vw;
  height: 100vh;
  justify-content: right;
}

div.grid-right {
  width: 100vw;
  height: 100vh;
  display: grid;
  column-gap: var(--gap);
  row-gap: var(--gap);
  grid-auto-flow: row dense;
  margin: var(--gap);
  grid-template-rows: repeat(auto-fill, var(--cell-size));
  grid-auto-rows: var(--cell-size);
  grid-template-columns: repeat(auto-fill, var(--cell-size));
  grid-auto-columns: var(--cell-size);  
  justify-content: left;
}

div.gutter, div.left, div.right {
  width: 100vw;
}

div.cell, div.button, div.music, div.logo, div.video, div.etude {
  text-align: center;
  vertical-align: top;
  border-radius: var(--border);
  color: grey;
  width: var(--cell-size);
  height: var(--cell-size);
  position: relative;
  box-shadow: var(--shadow) var(--shadow) var(--shadow) rgba(0,0,0,0.5);
  background-color: #303030;
  display: flex;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

div.etude {
  background-color: #888888;
  background-position: 50% 0%; background-size:101%;
  font-weight: bold;
  box-shadow: var(--border) var(--border) var(--border) rgba(0,0,0,0.5);
  font-size: 0.8rem;
}

div.disabled {
  opacity: 0.5;
}

img.audio {
  margin-top: 1.5rem;
  width: 2rem;
}

div.cell {
  font-weight: bold;
  vertical-align: middle;
}

div.steam:hover {
  filter: invert();
  cursor: pointer;
}
  
div.button, div.logo {
  font-weight: bold;
}

div.border {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: solid 0.1rem white;
}
  
div.wide, div.large {
  width: calc(calc(var(--cell-size) * 2) + 1 * var(--gap));
  grid-column-end: span 2;
}

div.wide3 {
  width: calc(calc(var(--cell-size) * 3) + 2 * var(--gap));
  grid-column-end: span 3;
}

div.wide4 {
  width: calc(calc(var(--cell-size) * 4) + 3 * var(--gap));
  grid-column-end: span 4;
}

div.short {
  height: calc(calc((var(--cell-size) - var(--gap))) / 2);
  margin-bottom: var(--gap);
}

div.video {
  width: calc(calc(var(--cell-size) * 4) + 3 * var(--gap));
  height: calc(calc(var(--cell-size) * 2) + var(--gap));
  grid-column-end: span 4;
  grid-row-end: span 2;
}

div.tall, div.large {
  height: calc(calc(var(--cell-size) * 2) + var(--gap));
  grid-row-end: span 2;
}

div.fade {
  filter: brightness(100%);
}

div.fade:hover {
  opacity: 100%;
  filter: brightness(50%);
  cursor: pointer;
}
  
div.button:hover {
  filter: brightness(200%);
  cursor: pointer;
}
  
div.music {
  background-color: rgb(122, 153, 184);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: black;
}
div.music-caption {
  position: relative;
  font-size: 0.85rem;
  color: black;
  top: 50%;
  transform: translateY(-30%);
  margin: 0 auto;
}
  
div.music:hover {
  filter: brightness(100%);
  cursor: pointer;
}

.footer {
  border-radius: 0 0 var(--border) var(--border);
}
    
div.caption {
  background:white;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border: solid -1 white;
  border-radius: 0 0 var(--border) var(--border);
  padding: var(--shadow) 0 var(--shadow) 0;
  color:grey;
}

div.caption-inv {
  width: 100%;
  height: fit-content; 
  background: white;
  border: solid 1 white;
  border-radius: var(--border) var(--border) 0 0;
  box-shadow: 0 var(--shadow) var(--shadow) rgba(0,0,0,0.5);
  float:inherit;
  position:relative;
  padding: var(--shadow);
  color:grey;
}

span.tagline {
  font-weight:normal;
  font-size: calc(0.666rem);
}

ul {
  font-weight: normal;
  font-size: 0.75rem;
  text-align: left;
  width: 100%;
  padding: 0; 
  margin: 0;
  color: #B0B0B0;
}

li {
  /* padding-left: -1rem; */
  word-wrap: none;
  margin-bottom: 0.3em;
}

b { color: white; }
b2 { font-weight: normal; color: #e0e0e0;}