body, html {
    margin: 0;
    padding: 0;
    background-color: rgb(21, 14, 21);
    font-family: almaq-rough, sans-serif;
}

/* Main page Styling*/
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

h1 {
    color:rgb(239, 69, 69)
}

.title-screen {
    display: flex;
    max-width: 680px;
    height: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-top:100px;
    padding:30px;

    /*Title Screen Art goes here*/
    background-image: url('../images/TitleScreen.jpg');
    background-position: center;
    background-size: cover;
}

/* (Re)Start buttons Styling and Hover States */
.title-button {
    margin-left: 70%;
    margin-top: 25%;
}

.startButton{ 
    margin-left:25%
}

.Buttonstart {
    background-color: #f6944f;
    outline: solid 5px #fece6e;
    border-radius:3px;
    border: none;
    box-shadow: 0px 0px 20px #ffe3b2;
    color: rgb(255, 255, 255);
    padding: 5px 10px;
    font-family: salvation, sans-serif;
    font-size: 20px;
}

.Buttonstart:hover {
    transform: scale(1.2);
    transition: all 1s ease;
  }
  
/* Got this code from Papa */
.button:active {
    transform: translateY(6%);
    
    filter: brightness(0.6) saturate(2.0) hue-rotate(-20deg);

    box-shadow: 6px 6px rgba(0, 0, 0, 0);
}

/* Name Screen Styling*/

/* Name title screen background layout */
.name-screen {
    max-width: 480px;
    max-height: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-top:100px;
    padding:30px;
    background-color: rgb(255, 255, 255);
}

/* Aligning Items to be centered and spaced properly */
.nameTitle {
    font-size: 50px;
    margin-top: -10px;
    margin-bottom:20px;
}

.bbname { 
    border:none;
}

.name-button {
    text-align: center;
}

.buttonName {
    margin-top: 20px;
}

/* Game Screen */
.game-display {
    max-width: 680px;
    height: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-top:100px;
    padding:30px;

/*Game Screen Art goes here*/
    background-image: url('../images/GameScreen.jpg');
    background-position: center;
    background-size: cover;
    overflow:hidden;
}

/* Inputted name styling/positioning */
.chosenName {
    font-size: 50px;
    margin-top: -30px;
    color: #ecf0f3;
}

/* Baby Positioning and Animation */
.baby {
    display: block;
    margin-top: 100px;
    margin-bottom: -40px;
    margin-left: auto;
    margin-right: auto;
    animation: babyMove 2s 1;
}

@keyframes babyMove{
    0%  {transform: translateY(-100%);content: url(../images/babyNeutral.png);}
    50% {transform: translateY(2%);content: url(../images/babyNeutral.png);}
    70% {transform: translateY(0%);content: url(../images/babyNeutral.png);}
    100% {transform: translateY(0%);content: url(../images/babyNeutral.png);}
}

/* Gameplay Buttons Styling and Hover States */
.gameBtn {
    display:flex;
    justify-content: space-between;
    margin-top: 100px;
}

/* hover state to transition button image to gif */
.static:hover {
    opacity:0;
    transition: all .15s ease;
}

/* Pause and Resume button styling/positioning */
.onOff {
    float:right;
    margin-left:-250px;
    margin-right: auto;
    margin-top: -60px;
}

.resume {
    margin-top: 100px;
}

/* Medicine Button */
.medBtn {
    background-color: #ecf0f3;
    outline: solid 7px rgb(138, 138, 135);
    border-radius:3px;
    border: none;
    position: fixed;
}

.evoBtn {
    background-color:#fece6e;
    outline: solid 7px gold;
    border-radius:3px;
    border: none;
    position: fixed;
}

/* Feed Button */
.feedBtn {
    background-color: #008000;
    outline: solid 7px greenyellow;
    border-radius:3px;
    border: none;
}

.feedBtn:hover {
    background-image: url('../images/FeedAnimation.gif');
	background-position: center;
    background-size: cover;
}

/* Play Button */
.playBtn {
    background-color: #fcf882;
    outline: solid 7px rgb(208, 141, 17);
    border-radius:3px;
    border: none;
}

.playBtn:hover {
    background-image: url('../images/PlayAnimation.gif');
	background-position: center;
    background-size: cover;
}

/* Bathe Button */
.batheBtn {
    background-color: #60afe3;
    outline: solid 7px rgb(36, 60, 148);
    border-radius:3px;
    border: none;
}

.batheBtn:hover {
    background-image: url('../images/BatheAnimation.gif');
	background-position: center;
    background-size: cover;
}

/* updates */
.hide{
    display: none;
}

/* Speech/Alert popups Styling */
.speech-bubble {
    background-color: rgb(233, 233, 233);
    outline: solid 7px rgb(54, 54, 54);
    padding:15px;
    border-radius:100px;
    position: fixed;
    margin-left: 700px;
    margin-top: 100px;
}


/* Death Screen Styling */
.gameOver {
    max-width: 480px;
    max-height: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-top:100px;
    padding:30px;
    background-color: rgb(255, 255, 255);
    text-align: center;
}

h2 {
    font-size: 60px;
    margin-bottom: -20px;
    margin-top: -20px;
}

/* Win Screen */
.gameWin {
    max-width: 480px;
    max-height: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-top:100px;
    padding:30px;
    background-color: rgb(255, 255, 255);
    text-align: center;
}