@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');


body {
    margin: 0;
    padding: 0;
    position: relative;
    background-color: peachpuff;
    font-family: 'Caveat Brush', cursive;
    font-style: normal;
}



main {
    width: 90%;
    aspect-ratio: 2/1.1;
    margin: auto 5%;
    position: relative;
}

/* Header */

header {
    width: 100%;
    display: inline-block;
}

#title {
    display: none;
}


#information {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 5%;
}

#information li {
    margin: 1% 30% 1%;
    text-align: center;
    list-style-type: none;
    font-size: clamp(1rem, 10vw, 1.2rem);
    padding: 4px;
    width: 35%;
    aspect-ratio: 2/0.5;
    background-color: black;
    opacity: 0.6;
    box-shadow: 2px 5px #888888;
    border-radius: 35%;
}

#information li {
    text-decoration: none;
    color: blanchedalmond;
}

/* #musicButtons{
    position: absolute;
    top: 10%;
    right: 0%;
} */

#instructions {
    color: blanchedalmond;
    width: 90%;
    height: 90%;
    background-color: black;
    opacity: 0.7;
    margin-top: 0%;
    padding: 5%;
    font-size: 1.2rem;
    border-radius: 10%;

}

/* Assets inside the game*/


#gameAssets {
    width: 100%;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: blanchedalmond;

}

#contAsst1,
#contAsst2,
#contAsst3,
#contAsst4,
#contAsst5,
#contAsst6,
#contAsst7,
#contAsst8 {
    width: 40%;
    display: inline-flex;
    border: solid blanchedalmond 1px;
    border-radius: 20%;
    font-size: 0.7rem;
    padding: 5%;
}

#getPoints {
    grid-column: 1/ -1;
    grid-row: 1;
    margin-top: 0%;
    margin-bottom: 1%;
}

#contAsst1 {
    grid-column: 1 / 2;
    grid-row: 2;
}

#contAsst2 {
    grid-column: 2 / 3;
    grid-row: 2;
}

#contAsst3 {
    grid-column: 3 / 4;
    grid-row: 2;
}

#contAsst4 {
    grid-column: 4 / 5;
    grid-row: 2;
}

#loseLives {
    grid-column: 1 /-1;
    grid-row: 3;
    margin-bottom: 1%;
    margin-top: 1%;
}

#contAsst5 {
    grid-column: 1 / 2;
    grid-row: 4;
}

#contAsst6 {
    grid-column: 2 / 3;
    grid-row: 4;
}

#contAsst7 {
    grid-column: 3 / 4;
    grid-row: 4;
}

#contAsst8 {
    grid-column: 4 / 5;
    grid-row: 4;
}


#asst1,
#asst2,
#asst3,
#asst4,
#asst5,
#asst6,
#asst7,
#asst8 {
    width: 60%;
}

#asst1 {
    aspect-ratio: 0.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Bottle.svg);
}


#asst2 {
    aspect-ratio: 1/0.8;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Pacifier.svg);
}

#asst3 {
    aspect-ratio: 0.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Stroller.svg);
}

#asst4 {
    aspect-ratio: 0.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Tedy_bear.svg);
}

#asst5 {
    aspect-ratio: 0.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Car.svg);
}

#asst6 {
    aspect-ratio: 0.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Ball.svg);
}

#asst7 {
    aspect-ratio: 0.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Rattles.svg);
}

#asst8 {
    aspect-ratio: 0.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Spinning_top.svg);
}





/* Game */

#screen {
    position: relative;
    width: 85%;
    margin: 8%;
    aspect-ratio: 1.9/1.1;
    margin-top: 0%;
    border: 4px #888888 solid;
    border-radius: 15%;
    overflow: hidden;
    background-image: url(../Graphics/Screens/Sleepy_Baby_Background.svg);
}


#game {
    position: relative;
    width: 100%;
    aspect-ratio: 2/1.16;
}

#gameBackground {
    width: 100%;
    aspect-ratio: 2.2/1.16;
    background-image: url(../Graphics/Screens/Sleepy_Baby_Background.svg);


}

/* foreground */

#gameForeground {
    width: 45%;
    height: 40%;
    position: absolute;
    top: 60%;
    left: -8%;
    background-image: url(../Graphics/Screens/Sleepy_Baby_Crib.svg);

}

/* baby state in the  background */

#babyState {
    width: 30%;
    height: 20%;
    position: absolute;
    top: 70%;
    left: 40%;

}

/* Game Sprites */

#gameSprites {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

/* Good Elements */

#goodContainer1,
#goodContainer2,
#goodContainer3,
#goodContainer4,
#badContainer1,
#badContainer2,
#badContainer3,
#badContainer4 {
    position: absolute;
    width: 18%;
    aspect-ratio: 1/0.5;
}

#goodSprites1,
#goodSprites2,
#goodSprites3,
#goodSprites4,
#badSprites1,
#badSprites2,
#badSprites3,
#badSprites4 {
    margin: 0%;
    padding: 0%;
    width: 100%;
    background-size: cover;

}

#goodSprites1 {
    aspect-ratio: 1/0.5;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Bottle.svg);
}

#goodSprites2 {
    aspect-ratio: 1/0.3;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Pacifier.svg);
}

#goodSprites3 {
    aspect-ratio: 1/2;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Stroller.svg);
}

#goodSprites4 {
    aspect-ratio: 1.5/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Tedy_bear.svg);
}

/* Bad sprites */

#badSprites1 {
    aspect-ratio: 1/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Rattles.svg);
}

#badSprites2 {
    aspect-ratio: 1.8/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Ball.svg);
}

#badSprites3 {
    aspect-ratio: 2.5/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Car.svg);
}

#badSprites4 {
    aspect-ratio: 3/1;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Spinning_top.svg);
}

/* UI Elements */


#gameUi {
    width: 100%;
    height: 8%;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;

}

#scoreBoard,
#healthBoard,
#timeBoard {
    width: 18%;
    background-color: black;
    opacity: 0.5;
    border: 2px solid #333;
    border-radius: 20%;
    /* padding: 0.2; */
    color: blanchedalmond;
    font-size: clamp(1rem, 0.5vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-evenly;

}

#livesLeft {
    width: 100%;
    height: 100%;
}

.lives3 {
    background-image: url(../Graphics/Health_Time_Score_Boards/Sleepy_Baby_Health_Board_3_Lives.svg);
}

.lives2 {
    background-image: url(../Graphics/Health_Time_Score_Boards/Sleepy_Baby_Health_Boart_2_Lives.svg);
}

.lives1 {
    background-image: url(../Graphics/Health_Time_Score_Boards/Sleepy_Baby_Heath_Boart_1Live.svg);
}

/* Screens */

#titleScreen,
#lostGame,
#winGame {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
}

/* Start screen */
#titleScreen {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Title_Screen.svg);
}

/* Lost Screen */

#lostGame {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Lose_Screen.svg);
}

/* Win Screen */

#winGame {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Win_Screen.svg);
}


/* Buttons */

#play,
#playIns {
    position: absolute;
    width: 20%;
    aspect-ratio: 1.5/2;
    background-image: url(../Graphics/Buttons/Sleepy_Baby_Play_button.svg);
}

#play {
    top: 40%;
    left: 40%;
}

#playIns {
    top: 15%;
    left: 83%;
}

#closeIns {
    width: 3%;
    aspect-ratio: 1/1;
    font-size: 1.5rem;
    position: absolute;
    left: 91%;
    top: 10%;
    background-image: url(../Graphics/Buttons/Sleepy_Baby_Close.svg);
}

#playAgainW,
#playAgainL {
    position: absolute;
    width: 20%;
    aspect-ratio: 7/3;
    background-image: url(../Graphics/Buttons/Sleepy_Baby_Play_Again_Button.svg);
    top: 87%;
    left: 40%;
}

#instruSc {
    position: absolute;
    width: 20%;
    aspect-ratio: 7/3;
    background-image: url(../Graphics/Buttons/Sleepy_Baby_Instructions_button.svg);
    top: 78%;
    left: 40%;
}

/* #play{}
#stop{} */

/* Background*/

#asst1,
#asst2,
#asst3,
#asst4,
#asst5,
#asst6,
#asst7,
#asst8,
#babyState,
#gameForeground,
#goodSprites1,
#goodSprites2,
#goodSprites3,
#goodSprites4,
#badSprites1,
#badSprites2,
#badSprites3,
#badSprites4,
#play,
#playIns,
#playAgainW,
#playAgainL,
#instruSc {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}

#screen,
#gameBackground,
#livesLeft,
#titleScreen,
#lostGame,
#winGame,
#closeIns {
    background-size: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



















/* Asset List */

#assetsMain {

    margin: auto;
    width: 100%;
}

/* Assets Screens */
#screensAs {
    margin: 5%;
    display: grid;
    column-gap: 5%;
    grid-template-columns: 1fr 1fr;

}
#screens{
    grid-column: 1/-1;
}
#gameBackgroundAs,
#gameForegroundAs,
#titleScreenAs,
#winScreenAs,
#lostScreenAs {
    margin: 3%;
    width: 90%;
    aspect-ratio: 1/0.9;
    border: solid white 1px;
    border-radius: 20%;
    padding: 2%;
    text-align: center;
    background-repeat: no-repeat;
    font-size: 2rem;
    background-position: center;
    background-size: cover;
}

#gameBackgroundAs {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Background.svg);
}

#gameForegroundAs {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Crib.svg);

}

#titleScreenAs {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Title_Screen.svg);

}

#winScreenAs {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Win_Screen.svg);

}

#lostScreenAs {
    background-image: url(../Graphics/Screens/Sleepy_Baby_Lose_Screen.svg);

}

#assetsTitle1,
.assetsTitle2,
.assetsTitle3 {
    text-align: center;
}

#assetsTitle1 {
    margin: 1% auto;
    font-size: 4rem;
    font-style: normal;
    display: block;
}

.assetsTitle2 {
    margin: auto 30% 3%;
    font-size: 2.5rem;
}

.assetsTitle3 {
    font-size: 1.8rem;
    color:black
}

/* Bad Elements */

#badElement1 {
    background-image: url(../Graphics/Assets/Sleepy_Baby_Car.svg);
}

#badElement2 {
    background-image: url(../Graphics/Assets/Sleepy_Baby_Ball.svg);
}

#badElement3 {
    width: 130%;
    background-image: url(../Graphics/Assets/Sleepy_Baby_Rattles.svg);
}

#badElement4 {
    background-image: url(../Graphics/Assets/Sleepy_Baby_Spinning_top.svg);
}

/* UI Elements */

.gameUiAssetsList {
    width: 20%;
    aspect-ratio: 1/1;
    display: inline-block;
}

#scoreBoardAssetsList {
    margin: 2%;
    aspect-ratio: 5/2;
    background-image: url(../Graphics/Sleepy_Baby_Score_board.svg);
}

#healthBoardAssetsList {
    margin: 2%;
    aspect-ratio: 8/4;
    background-image: url(../Graphics/Health_Time_Score_Boards/Sleepy_Baby_Health_Board_3_Lives.svg);
}

#timeBoardAssetsList {
    margin: 2%;
    aspect-ratio: 5/2;
    background-image: url(../Graphics/Sleepy_Baby_Time_board.svg);
}

#buttons {
    margin: 2%;
    aspect-ratio: 4/2;
    background-image: url(../Graphics/Buttons/Sleepy_Baby_Play_button.svg);
}

/* Backgrpunds Assets */

#gameBackgroundAssetsList,
#goodElement1,
#goodElement2,
#goodElement3,
#goodElement4,
#badElement1,
#badElement2,
#badElement3,
#badElement4,
#scoreBoardAssetsList,
#healthBoardAssetsList,
#timeBoardAssetsList,
#buttons,
#titleScreenAs,
#winScreenAs,
#lostScreenAs,
#gameForegroundAs {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#goodElement1,
#goodElement2,
#goodElement3,
#goodElement4,
#badElement1,
#badElement2,
#badElement3,
#badElement4 {
    aspect-ratio: 1/0.5;
}