@charset "UTF-8";

/* Atkinson Hyperlegible Next Font Definitions */
@font-face {
  font-family: 'AtkinsonHyperlegibleNextVF';
  src: url(fonts/AtkinsonHyperlegibleNextVF-Variable.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
    --bgColour: light-dark(#F5F5F5, #1f1f1f);
    --textMainColour: light-dark(#1f1f1f, #F5F5F5);
    --buttonColour: #ff8263;
    color-scheme: light dark;
}

body {
    font-family: 'AtkinsonHyperlegibleNextVF', sans-serif;
    margin: 0;
    line-height: 1.3;
    background-color: var(--bgColour);
    color: var(--textMainColour);
}

button {
    font-weight: bold;
    color: #1f1f1f;
    background-color: #ff8263;
}

div#textboxes {
    margin: auto;
    display: flex;
    max-width: 70em;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    height: 90dvh;
    justify-content: space-between;
}

#inputBox, #outputBox {
    padding: 10px;
    box-sizing: border-box; /* Include padding in height calculation */
    width: 100%;
}

#wrapper {
  overflow: auto;
  height: 50dvh;
  /* border: 1px solid CanvasText; */

}

#inputBox {
    height: 20dvh;
    resize: none;
    border: 1px solid CanvasText;
    font-size: 120%;
}

#outputBox {
    transform: rotate(180deg);
    display: inline-block; /* Ensures the transform applies correctly */
    font-size: 160%;
}