:root{
    --background-color: #FCF5EE ;
    --main-text-color: hsl(340, 81%, 29%);
    --bar-color: hsl(340, 81%, 29%);
    --border-colors: #EE6983;
    --button-background: #FFC4C4;
}

body {
    color: var(--main-text-color);
    background-color: var(--background-color);
    font-family: sunny;
    padding: 10px;
}

#game {
    width: 300px;
    height: 330px;
}

#characterstatus{
    position: relative;
    left: 60px;
}

#pet {
    border: solid;
    border-color: var(--border-colors) ;
    border-radius: 15px;
}

.flex {
    display: flex;
}

#stats {
    margin-left: 20px;
}

button {
     background-color: var(--button-background) ;
     color: var(--main-text-color) ;
     border: none;
     border-radius: 20px;
     font-size: 15px;
     padding: 8px 15px;
     font-family: sunny;
}

/* stat bar */
.bar {
    height: 20px;
    width:100px;
    background-color: FCF5EE;
    border: solid;
    border-width: 2px;
    border-radius: 10px;
    overflow: hidden;
}

#hungerstats {
    width: 100%;
    height: 20px;
    background-color: var(--bar-color) ;
}

#funmeterstats {
    width: 100%;
    height: 20px;
    background-color: var(--bar-color);
}

#hygenestats {
    width: 100%;
    height: 20px;
    background-color: var(--bar-color);
}

#energystats {
    width: 100%;
    height: 20px;
    background-color: var(--bar-color);
}

@font-face {
    font-family: sunny;
    src: url(Sunny\ Script.otf);
}