/* TODO: Pretty styles! */

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;

    /* Flexbox guide: https://www.w3schools.com/css/css3_flexbox_container.asp */
    display: flex;
    flex-direction: column;
    align-content: stretch;
}

#banner {
    display: flex;
    padding: 10px;

    background-color: lightcoral;
    outline: 4px solid lightgrey;
}

#content {
    flex: 1;

    display: grid;
    grid-template-columns: 1fr 200px;
    overflow: hidden;

    padding: 10px;
    gap: 10px;
    
    background-color: lightblue;
    outline: 5px solid black;
}

/* wider than tall
@media screen and (min-aspect-ratio: 1/1) {
  #content {
    grid-auto-flow: row;
    grid-template-columns: 1fr 200px;
    overflow: hidden;
    background-color:red;
  }
}

taller than wide
@media screen and (max-aspect-ratio: 1/1) {
  #content {
    grid-auto-flow: column;
    grid-template-columns: 1fr 200px;
    overflow: hidden;
    background-color:green;
  }
} */

#display-frame-container {
    background-color: lightpink;
    padding: 10px;
}

#display-frame {
    width: 100%;
    height: 100%;
}

#page-box {
    background-color: lightseagreen;
    overflow-y:scroll;

    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 10px;

    justify-content: space-around;
}

.preview-button {
    justify-self: center;
    width: 100%;
    aspect-ratio: 1;
    background-color: lightgoldenrodyellow;
}