/* structure */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.interface {
    gap: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 0.5fr minmax(28em, 52em) 0.5fr;
    grid-template-rows: 0.1fr auto 1fr auto;
}

/* body */
body {
    margin: 0;
    /* box-shadow: inset 0 0 5rem #00000069; */
    background-color: var(--background-color);

    transition: ease 0.2s;
}

.tools {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    margin: 0.625rem;
    justify-content: right;
    align-content: bottom;
    margin-top: auto;
}

body::before {
    background: var(--background-picture);
    background-size: cover;
    opacity: 0.12;

    content: "";
    inset: 0;
    position: absolute;
    z-index: -2;

    transition: ease 0.2s;
}

body::after {
    background: var(--background-texture);
    backdrop-filter: var(--background-blur);

    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;

    transition: ease 0.2s;
}




.cell-8 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: normal;
  align-content: normal;
}