:root {
  --spacing: 10px;
  --corner: 3px;
}

body {
  margin: 0;

  font-family: monospace;
}

app {
  height: 100vh;

  display: flex;
  flex-direction: column;
}

intro {
  --size: 250px;
  padding: var(--spacing);

  background: #eee;
  font-size: 85%;
}

@media screen and (min-width: 450px) {

  intro {
    --size: 300px;

    position: fixed;
    top: calc(50% - var(--size) / 2.5);
    right: calc(50% - var(--size) / 2);
    z-index: 1;
    width: var(--size);
    border-radius: var(--corner);
    border: 1px solid #999;
    opacity: 0.95;

    cursor: move;
  }

}

intro ul {
  padding-left: var(--spacing);
}

details {
  display: inline;
}

details summary {
  display: inline list-item;
}

widget-container {
  display: flex;
  justify-content: center;
}

frames {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;

  flex-grow: 1;
}

@media screen and (max-width: 450px) {

  frames {
/*    grid-template-columns: 100%;*/
  }

}

project {
  display: block;
  position: relative;

  display: flex;
}

project .domain {
  display: block;
  border: 1px solid #777;
  border-radius: var(--corner);

  position: absolute;
  top: var(--spacing);
  right: var(--spacing);
  padding: calc(var(--spacing) / 2);

  background: #333;
  color: #eee;
  pointer-events: none;
}

project:first-of-type {
  grid-row: span 2;
}

iframe {
  border: none;
  display: block;
  width: 100%;
}

project:first-of-type iframe {
  border-right: 1px solid #999;
}

project:last-of-type iframe {
  border-top: 1px solid #999;
}