html, body {
    height: 100%;
}

body {
    background: pink;
    font-family: 'Indie Flower', sans-serif;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* My Tamagotchi title */
h1 {
    display: flex;
    justify-content: center;
}

/* Name your tamagotchi */
.name {
    display: flex;
    justify-content: center;
}
.name button {
    margin-left: 3%;
}


/*  ---Outer block---  */
.tama-device {
    background: #b2d8d8;
    width: 70%;
    margin: 0 auto;
    border-radius: 30px
}
/* Where pet's name appears  */
.name-position {
    display: flex;
    justify-content: center;
    margin: 10px;
    padding: 10px;
    /* margin-bottom: 10px; */
    /* height: 60px; */
}
/* Name:  */
#name {
    text-decoration: underline;
}
/* Where entered name appears  */
#name-appear {
    padding-left: 5%;
}
/* Feed, Time For Bed, and Play buttons  */
.function-buttons {
    display: inline-block;
    display: flex;
    justify-content: center;
    margin: 15px 0px 20px;
}
.function-buttons button {
    margin-left: 2%;
    margin-right: 2%;
}
/* Bounce animation when Play button is clicked */
#bounce-house {
    width: 100%;
    margin: 20px auto;
    animation: bounce 1s infinite alternate; 
    -webkit-animation: bounce 1s alternate;
}
@keyframes bounce {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-15px);
    }
}
@-webkit-keyframes bounce {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-15px);
    }
}

#no-bounce {
    width: 100%;
    margin: 20px auto;
    position: relative;
    z-index: 3;
}


/* ---Middle block---  */
.metrics-section {
    border-radius: 30px;
    background: #fffda7;
    width: 80%;
    margin: 0 auto;
}
/* Where age of pet is displayed  */
#age-section{
    display: flex;
    justify-content: center;
    padding-top: 15px;
    height: 40px;
}
#age {
    display: flex;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 30px;
}
/* Where current age is displayed */
#age-count {
    display: flex;
    justify-content: center;
    margin: auto 10px;
}

/* Where current metric numbers appear */
.metrics-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-left: auto;
    margin-right: auto;
    padding: auto 10px;
    width: 70%
}
@media only screen and (max-width: 745px) {
    .met-count {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width: 600px) {
    .metrics-container {
        display: flex;
        flex-direction: column;
    }
    .met-count {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .met-count span {
        padding-left: 5%;
    }
}


/* ---Inner block---  */
.character-section {
    border-radius: 30px;
    background-image: url("./images/2040.jpg");
    background-repeat: no-repeat;
    /* background-position: 100% 100%; */
    background-size: 150%;
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
}
.character-design {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 50%;
}
/* Starting egg  */
.nest {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 3;
}
/* Egg shake animation  */
/* https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
@keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }
/* Egg image  */
#shaking-character {
    width: 90%;
    margin: 20px auto;
    animation-iteration-count: infinite;
}
/* Animation upon hover  */
/* https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
#shaking-character:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
/* Different lifecycles of pet  */
#character, .character-two, .character-three {
    width: 100%;
    margin: 20px auto;
    position: relative;
    z-index: 3;
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
}

/* Begin Life With Your New Best Friend button  */
.begin-game {
    /* margin: auto; */
    padding: 15px;
    display: flex;
    justify-content: center;
}

/* Video that plays at end  */
#hide {
   display: none;
   position: absolute;
}
#video {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

button {
    font-family: 'Indie Flower', sans-serif;
    font-weight: bold;
}

footer {
    flex-shrink: 0;
    padding-bottom: 10px;
    margin-top: 15px;
    margin-left: 2%;
}

#error {
    color: red;
    text-align: center;
}
.er {
    color: pink;
    margin: 3px;
}