* MAIN */
:root {
  --background: #b3ad95;
  --foreground: #faf8df;
  --bottomshadow: #e5dac6;
  --maintxt: #533e0f;
  --alttxt: #9c8d70;

  /* 
    COLOR NOTE
    -------------
    all of the colors below are associated with a star sign in-game.
    each sign is listed next to its associated color variable. feel 
    free to copy how it is in the game or use whatever color you want!
    */
  --gray: #adac8f; /* aries */
  --green: #6fbe65; /* taurus */
  --skyblue: #858fde; /* gemini */
  --red: #f49387; /* cancer */
  --yellowgreen: #b2cf3d; /* leo */
  --lavender: #ac99e4; /* virgo */
  --teal: #7dc49c; /* libra */
  --dandelion: #d5a81d; /* scorpio */
  --cyan: #6abace; /* sagittarius */
  --brickred: #e38570; /* capricorn */
  --pink: #cb82d0; /* aquarius */
  --ocean: #6aaac7; /* pisces */
}

@font-face {
  font-family: dialogue;
  src: url(/layouts/acnhpassport/FOT-RodinBokutoh\ Pro\ EB.otf);
}

@font-face {
  font-family: system;
  src: url(/layouts/acnhpassport/FOT-Seurat\ Pro\ B.otf);
}

body {
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  font-family: system;
  background-color: var(--background);
}

/* GRID */
.grid-container {
  display: grid;
  grid-template-areas:
    "title title title title"
    "photo content content content"
    "footer footer footer footer";
  background-color: var(--foreground);
  border-radius: 25px;
}

.grid-container > div {
  border: 1px black;
}

.g1 {
  grid-area: title;
  text-align: center;
  color: var(--dandelion);
}

.g2 {
  grid-area: photo;
  text-align: center;
  padding: 20px;
  padding-top: 70px;
  background-color: var(--dandelion);

}

.g3 {
  grid-area: content;
  padding: 20px;
  background-color: var(--dandelion);
}

.g2, .g3 {
  background-image: url("leafbg.png");
  background-size: 50px;
}

.g4 {
  grid-area: footer;
  padding-top: 15px;
  padding-left: 40px;
}

/* DESIGN */

/* passport photo */
#photo {
  border-radius: 10%;
  margin-top: 10px;
}

#photoborder {
  border-radius: 10%;
  background-color: var(--foreground);
  margin-left: auto;
  margin-right: auto;
}

/* EXTRA */
.icon {
  width: 50px;
  vertical-align: middle;
}

.speech {
  width: 300px;
  /* make the width bigger/smaller to accomodate your text */
  background: var(--foreground);
  padding: 10px;
  text-align: center;
  position: relative;
  border-radius: 30px;
}

hr {
  height: 3px;
  border-width: 0px;
  background-color: var(--foreground);
}

.maintxt {
  color: var(--maintxt);
}

.alttxt {
  color: var(--alttxt);
}