@font-face {
    font-family: DreamLife;
    src: url(/pages/tomodachilife/DreamLife-V1.0.0_by_MaxiGamer.ttf);
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: url("/pages/tomodachilife/PLACEHOLDER.webp");
    background-size: cover;
    margin: 0;
    margin-bottom: 25vh;
}

h1 {
    font-family: DreamLife;
    text-align: center;
}
.font-dreamlife {
    font-family: DreamLife;
}

.bottom-bar {
    font-family: DreamLife;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    background: #ffec01;
    bottom: 0;
    bottom: 0;
    height: 120px;
    width: 100vw;
    border-top: 32px solid #fcf341;
    padding-top: 18px;
    padding-bottom: 18px;
}

.button-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    background: #b4b4b4;
    font-size: 2em;
    font: black;
    text-shadow: 0px 0px 4px black;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 6vh;
    border: 8px solid white;
    box-shadow: inset #b4b4b4 4px 4px 8px, inset white 8px 8px 16px, inset #b4b4b4 -4px -4px 8px, inset #dedede -8px -8px 16px;
    border-radius: 32px;
    margin-bottom: 12px;
    margin-left: 4px;
    margin-right: 4px;
    padding: 6px;
    animation: buttonmovement 8s ease-in-out infinite;
}

.button:hover {
    filter: drop-shadow(0px 8px 8px white);
    translate: 0px -8px;
}

.icon {
    display: block;
    margin: auto;
    width: 20%;
}

@keyframes buttonmovement {
    0%, 100% {margin-bottom: 12px;}
    50% {margin-bottom: 18px;}
}

.tomobox {
    border-radius: 64px;
    font-size: 1.5em;
    width: 60%;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #ffec01;
    border-top: 8px solid #fcf341;
    border-bottom: 8px solid #f7b323;
    padding: 32px;
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
}

.imagegrid {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.imagegrid div {
  padding: 10px;
}

.imagegrid img {
    width: 100%;
}

.displaybox {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    display: flex;
    align-items: row;
    justify-content: center;
    gap: 2.5vw;
}

.box {
    border: 8px solid red;
    width: 25vw;
    height: 256px;
}

.mainbox {
    border: 8px solid red;
    width: 80vw
}

.characterbox {
    width: 20vw;
    width: 25vw;
}

.charname {
    font-family: DreamLife;
}

.charimage {
    border: 8px solid #ffec01;
    border-top: 8px solid #fcf341;
    border-bottom: 8px solid #f7b323;
    width: 256px;
    height: 256px;
    border-radius: 256px;
    box-shadow: 0px 0px 8px rgb(0, 0, 0);
}

.charimage:hover {
    box-shadow: 0px 0px 16px rgb(0, 0, 0);
}

.miiimage {
    width: 80%;
    border-radius: 18px;
    
}

.stats {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.personality-main {
    display: flex;
    align-items: start;
    flex-direction: row;
    filter: drop-shadow(0px 2px 8px black);
}

.personality-1 {
    font-size: 1em;
    border-width: 1px;
    border-style: solid;
}

.personality-2 {
    font-size: 1.5em;
    border: 2px solid #000000;
    height: fit-content;
}

.reserved {
    background-color: #a7b6c6;
    border-color: #585f67;
}

.observer {
    background-color: #3f9392;
}

.thinker {
    background-color: #26ad60;
}

.strategist {
    background-color: #9ddb5b;
}

.perfectionist {
    background-color: #01cda3;
}

.ambitious {
    background-color: #f08d63;
    border-color: #543223;
}

.rogue {
    background-color: #6c7af4;
}

.maverick {
    background-color: #a281f6;
}

.achiever {
    background-color: #79ddf4;
}

.visionary {
    background-color: #40a3f5;
}

.considerate {
    background-color: #9cc5a2;
    border-color: #354337;
}

.buddy {
    background-color: #fed74c;
}

.daydreamer {
    background-color: #ffc271;
}

.sweetie {
    background-color: #ffe0a3;
}

.cheerleader {
    background-color: #fff042;
}

.outgoing {
    background-color: #ffc647;
    border-color: #5a4517;
}

.merrymaker {
    background-color: #ff8c79;
}

.dynamo {
    background-color: #f97841;
}

.charmer {
    background-color: #ff9dbf;
}

.gogetter {
    background-color: #f85660;
}

.stat {
    font-weight: bolder;
}

.quirkbox {
    border: 1px solid black;
}

.quirkitem {
    background: #fff5cd;
    border: 32px;
}

.charitem {
    width: fit-content;
    align-items: center;  padding: 20px;
}

.charcontainer {
  display: grid;
  grid-template-columns: auto auto auto;

  align-items: center;
  justify-content: center;
}