body{
margin: 0px;
padding: 0px;
display: flex;
align-items: center;
background-image: url(../media/menu.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

#title{
position:absolute;
top: 0;
left: 0;
background-image: url(../media/title.png);
background-size: cover;
background-repeat: no-repeat;
width: 125vh;
height: 22vh;
z-index: 3;
}

#add{
background-image: url(../media/dig.jpg);
background-size: cover;
background-repeat: no-repeat;
bottom:5.5vh;
right: 4%;
position: fixed;
height: 25vh;
width: 25vh;
border: 0;
border-radius: 10px;
z-index: 1;
cursor: pointer;
}
#scrollTopBtn {
bottom: 5vh;
left: 23vw;
}
#store{
bottom: 5vh;
left: 5vw;
}
.button {
position: fixed;
height: 9vh;
width: 19vh;
font-weight: bold;
z-index: 10;
background-color: #fff;
border: 0;
border-radius: 10px;
cursor: pointer;
z-index: 1;
background-image: url(../media/count.png);
background-size: cover;
background-repeat: no-repeat;           
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-weight: bold;
}

::-webkit-scrollbar {
width: 0px;
}
#game{
position: relative;
width: 60vw;
margin: 0 auto;
background-color: rgb(115, 220, 255);
height: 100vh;
}
#container{
position: relative;
min-height: 12vw;
width: 100%;
padding-top: 70px;
background-image: url(../media/dirt.jpg);
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 65vh;
}
.ball-in{
width:10vw;
height: 10vw;
border-radius: 50%;
position: relative;
margin: 1vw;
}
#grass{
position: absolute;
width: 60vw;
margin-top: 40vh;
z-index:1;
}
#grass img{
width: 100%;
}
#sign{
position: fixed;
top: 10vh;
left: 2.5vw;
background-image: url(../media/count.png);
z-index: 1;
width: 15%;
height: 15%;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5em;
font-weight: bold;
border-radius: 10px;
}
#count{
position: fixed;
top: 10vh;
right: 2.5vw;
background-image: url(../media/count.png);
z-index: 1;
width: 15%;
height: 15%;
background-size: cover;
background-repeat: no-repeat;           
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-weight: bold;
border-radius: 10px;
}
#meters{
position: fixed;
top: 30vh;
right: 2.5vw;
background-image: url(../media/count.png);
z-index: 1;
width: 15%;
height: 15%;
background-size: cover;
background-repeat: no-repeat;           
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-weight: bold;
border-radius: 10px;
}
#scoreboard{
position: fixed;
top: 50vh;
right: 2.5vw;
background-image: url(../media/count.png);
z-index: 1;
width: 15%;
height: 15%;
background-size: cover;
background-repeat: no-repeat;           
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-weight: bold;
border-radius: 10px;
}
#table {
position: fixed;
top: 27vh;
left: 2.5vw;
background-image: url(../media/table.jpg);
z-index: 1;
width: 15%;
height: 56%;
background-size: cover;
background-repeat: no-repeat;
border-radius: 10px;
}

#fons {
display: none;
position: fixed;
height: 100%;
width: 100%;
background-color: #ffffffa1;
z-index: 3;
top: 0;
left: 0;
}

#window {
display: none;
position: fixed;
overflow: auto;
background-image: url(../media/wallpaper.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 60%;
height: 60%;
border-radius: 30px;
top: 12%;
left: 20%;
z-index: 3;
padding: 60px;
color: #14ba2d;
}

#shoptitle{
position:absolute;
top: 0;
left: 0;
background-image: url(../media/storetitle.png);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 22vh;
z-index: 3;
}

#decolist {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 20px;
justify-content: center;
align-items: center;
list-style-type: none;
padding: 0;
margin: 0 auto;
}

ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
list-style-type: none;
padding: 0;
margin: 0;
}

.decoration{
height: 30vh;
width: 30vh;
margin-top: 20vh;
font-weight: bold;
z-index: 10;
border: 0;
border-radius: 10px;
cursor: pointer;
z-index: 1;
background-image: url(../media/deco.jpg);
background-size: cover;
background-repeat: no-repeat;           
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-weight: bold;
}
.decoration img {
width: 100%;
}
h1 {
text-align: center;
margin: 10px 0 0 0;
}
#divdeco1{
left: 0;
background-image: url(../media/deco1img.png);
width: 80vh;
height: 57vh;
}
#divdeco2{
top: 37%;
left: 2%;
background-image: url(../media/deco2img.png);
width: 25vh;
height: 20vh;
}
#divdeco3{
top: 37%;
left: 45%;
background-image: url(../media/deco3img.png);
width: 25vh;
height: 20vh;
}
#divdeco4{
top: 2%;
left: 47%;
background-image: url(../media/deco4img.png);
width: 67vh;
height: 60vh;
}
.divdeco{
position: absolute;
width: 100%;
top:4%;
z-index: 0;
background-repeat: no-repeat;
background-size: cover;
display: none;
}

#home{
z-index: 2;
position: fixed;
right:2vh;
top: 2vh;
height: 5vh;
width: 5vh;
cursor: pointer;
}

#home img{
width: 100%;
}