html {
  min-height: 100vh;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1,
h2 {
  margin: 1rem;
}

.frames {
  min-height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;

  font: sans-serif;
}

.frames__header {
  grid-row: 1 / 2;
  grid-column: 1 / -1;

  border-bottom: 1px solid green;
}

.frames__nav {
  grid-row: 2 / 3;
  grid-column: 1 / 2;

  border-right: 1px solid green;

  nav {
    margin-inline: 0 1rem;
  }
}

.frames__preview {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  display: grid;
  grid-template-rows: min-content 1fr;

  h2 {
    margin: 1rem;
  }
}

#target {
  width: 100%;
  height: 100%;
  border: 0;
}

.note {
  position: fixed;
  right: 1rem;
  top: 1rem;
  background-color: #323232;
  color: #fff;
  padding:  1rem;
  max-width:  300px;
  border: 2px solid  #0099ff;

  p {
    margin: 0;
  }
}