body {
	margin: 0;
	overflow: hidden;
	
	
}

#app {
	width: 100vw;
	height: 100vh;
	background-color: #FFFBF1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10; 
	box-shadow: inset 0 0 140px rgba(107, 132, 64, 0.063);
}



#container {
	display: grid; 
	grid-template-columns: repeat(2, 1fr); 
	grid-template-rows: repeat(2, 1fr); 
	width: 140px;
	height: 140px;
	background-color: #2F1100;
	position: relative;
	border-radius: 35px;
	box-shadow: 140 0px 0px rgba(0, 0, 0, 0.2);
	transition: background-color 3s ease, transform 0.5s ease; 
	
	outline-color: rgba(255, 0, 0, 0.561); 
	outline-style: dashed; 
	outline-width: 3px; 
	outline-offset: 7px;
}

#container:hover {
	background-color: #FF5C00;
	transition: background-color 0.5s ease, transform 0.5s ease;
	transform: scale(1.014);
	transition: outline 0.5s ease, transform 0.5s ease; 
	
	
	outline: 10px solid rgb(255, 1, 1); 
	outline-color: rgb(255, 0, 0); 
	outline-style: solid; /* Change the style of the outline */
	outline-width: 3px; /* Set the width of the outline */
	outline-offset: 7px; /* Add space between the outline and the element */
}

#draggable {
	grid-column: 2; /* Place in the second column */
	grid-row: 2; /* Place in the second row */
	width: 100%; /* Set the width */
	height: 100%; /* Set the height */
	background-color: #FFFBF1;
	border-radius: 35px; 
	cursor: grab;
	scale: 0.7;
	box-shadow: 140 0px 0px rgba(0, 0, 0, 0.2);
	transition: background-color 0.014s ease, transform 0.5s ease;
}



#draggable:hover {
	cursor: grab;
	animation: bounce 0.5s ease;
	background-color: #FFFB00;
	transition: background-color 0.5s ease, transform 0.5s ease;
	transform: scale(1.014);
	
}

#draggable:active {
	cursor: grabbing;
	background-color: #ffdd00;
	transition: background-color 0.014s ease, transform 0.014s ease;
	transform: scale(0.95); /* Scale down the transform on hover */
}


.logo-image {
	position: fixed;
	top: 7px;
	left: 28px;
	width: 210px; 
	height: auto; 
	display: block; 
	margin: 20px auto;
}