:root {
  /* text settings */

  /* background settings */
  --background-image: url("../images/UI/backgrounds/deltarune-bg-wide.png");
  --foreground-image: url("../images/assets/deltarune/foreground.png");
  --border-image: url("../images/UI/frames/deltarune-text-box.png");
  --primary-background-color: black;
  --secondary-background-color: white;
  --font-color: white;
  --padding: 15px;
  --margin: 20px;
  --small-padding: 7px;
  --small-margin: 10px;
  --small-font: 0.8em;
  --cursor-image: url("../images/assets/deltarune/soul-cursor.png");
}

@font-face {
    font-family: "8bitoperator";
    src: url("../fonts/8bitoperator_jve.ttf");
}

html {
    image-rendering: pixelated;
    cursor: var(--cursor-image), auto;
}

body {
    position: relative;
    background-color: var(--primary-background-color);
    background-image: var(--background-image);
    background-size: auto 100vh;
    background-repeat: no-repeat;
    font-family: "8bitoperator", sans-serif;
    color: var(--font-color);
    margin: 0;
}



.box {
    background: var(--primary-background-color);
    border: 30px solid;
    border-image: var(--border-image) 27 round;
    width: 700px;
    height: 100px;
    margin: auto;
    font-size: 30px;
    

}

.foreground {
    /* background-image: var(--foreground-image);
    background-size: auto 100vh; */
    width: 100vw;
    position: fixed;
    bottom: 0;
    padding: 0;

}

.char-box {
    display: grid;
    grid-template: "char txt" / 1fr 6fr;
    gap: 10px;
    padding: 5px;
    
}

#susie-in-progress {
    height: 100px;
}

#foreground-image {
    display: block;
    width: 100vw;
}

#susie {
    position: fixed;
    bottom: 100px;
    width: 73px;
}