*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: monospace;
  --animation-duration-fast: 250ms;
  --animation-duration-slow: 400ms;
}

#introduction           { grid-area: introduction; }
#experiments-list       { grid-area: experiments-list; }
#experiment             { grid-area: experiment; }
#experiment-description { grid-area: experiment-description; }
#inspiration               { grid-area: inspiration; }

main {
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "introduction"
    "experiments-list"
    "experiment"
    "experiment-description"
    "inspiration";
  width: 100dvw;
  padding: 1rem;
  transition: opacity var(--animation-duration-slow) var(--animation-duration-fast);
}

@media screen and (min-width: 576px) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "introduction            experiments-list"
      "experiment              experiment"
      "experiment-description  inspiration";
  }
}

@media screen and (min-width: 992px) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "introduction            experiment"
      "experiments-list        experiment"
      "experiment-description  inspiration";
  }
}

@media screen and (min-width: 1200px) {
  main {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "introduction      experiment  experiment-description"
      "experiments-list  experiment  inspiration";
    height: 100dvh;
    overflow: hidden;
  }
}

h1 {
  margin-top: 0;
}

.error {
  color: red;
}

section {
  min-width: 0;
  padding: 0 .25rem .375rem;
  cursor: grab;
  transition: opacity 0.2s, outline-color 0.2s;

  &:hover {
    background-color: antiquewhite;
  }
}

section.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

section.drag-over {
  outline: 2px solid black;
  outline-offset: -2px;
}

fieldset {
  border: 1px dashed black;
  height: 100%;
  min-inline-size: 0;
  cursor: initial;
}

#experiments-list {
  button {
    appearance: none;
    margin-bottom: .25rem;
    border: none;
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;

    &:disabled {
      cursor: not-allowed;
    }
  }
}

#experiment-frame {
  border: none;
  height: 100%;
  width: 100%;
  transition: opacity var(--animation-duration-fast);
}

#experiment-description {
  transition: opacity var(--animation-duration-fast);
}

.hidden {
  opacity: 0 !important;
}

#spinner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;
  background-color: white;
  transition: opacity var(--animation-duration-fast);

  div {
    border: 1px dashed black;
    border-radius: 1rem;
    height: 2rem;
    width: 2rem;
    animation: spin 2s linear infinite;
    transform-origin: center;
    animation-fill-mode: none;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}