@font-face {
    font-family: B04;
    src: url("assets/04B.ttf");
    }

    body{ 
        background:linear-gradient(to right, #b0b9a0 15%, #0d3719 100%);
        background-image: url(https://images.unsplash.com/photo-1589254065909-b7086229d08c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cm9ib3R8ZW58MHx8MHx8&w=1000&q=80);
    background-size:cover;
    background-position: center center;
background-attachment: fixed;
 color: white; 
    }
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 1500px;
        position: fixed;
    }

    .game{
        width: 640px;
        height: 480px;
        font-family: B04;
        color:#eb3a0d;
        position: relative;
    }

    .trashBins{
        display: flex;
        justify-content: center;
        gap: 24px;
        height:150px;
    }


    h4{
        
        font-family: 'Protest Riot', sans-serif;
        font-size:20px;
    }
    h3{
        text-align: center;
    }
    .trash{
        display: flex;
        justify-content: center;
        margin-bottom: 18%;
    }
    .trash img{
        padding: 5px;
        border: 1px solid #6c0056;
        height:80px;
        
    }

    .gameOver{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #333;
        height: 50%;
        width: 50%;
        text-align: center;
        border-radius:10px;
    }
    .gameOver h1{
        margin-top: 5%;
        font-family: B04;
        color:#eb3a0d;
    }
    .gameOver p{
        color: aliceblue;
        
        cursor: pointer;
    }
    .container{
        scale: 1.5;
    }
    .gameOver p:hover{
        
        color:black;
        border-radius:10px;
        
    }
.over{
    height:100px;
}
@keyframes morph {
    0% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      background-size: 100% 100%;
    }
  
    50% {
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
      background-size: 300% 150%;
    }
  
    100% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      background-size: 100% 100%;
    }
  }
  .star-b{
    display:none;
  }


#bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #0E1428, #222E50, #E0A890);
	top: 0;
	left: 0;
	z-index: -1;
}

#bg::before {
	content: " ";
	z-index: 2;
	background-color: #222E50;
	width: 100%;
	position: absolute;
	bottom: 0;
}


#stars {
width:5px;
	height: 5px;
	border-radius: 50%;
	background-color: white;
	position: absolute;
	animation-iteration-count: infinite;
	animation-name: twinkle;
}

.star-a {
	top: 50px;
	left: 50px;
	animation-duration: 1s;
}

.star-b {
	top: 100px;
	left: 400px;
	animation-duration: 0.8s;
}

.star-c {
	top: 80px;
	right: 700px;
	animation-duration: 0.75s;
}

.star-d {
	top: 50px;
	right: 400px;
	animation-duration: 1.1s;
}

.star-e {
	top: 60px;
	right: 100px;
	animation-duration: 0.6s;
}

@keyframes twinkle {
	50% { 
		transform: scale(0.5); 
		opacity: 0.5;
	}
}