style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;

}

body{
    height: 100vh;
    display: inline-block;
   
}
.text
{
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;

}
canvas{
    border: 2px solid black;
    width: 100vw;
    height: 100vh;
}
.buttons{
    color: black;
    background: #529cdd;
    font-weight: bold;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
	transition: 1sn;
    


}
.buttons:hover{
    border:2px solid white;
    box-shadow:0 0 2px white;
	transform: scale(1.5);
	
}
.buttons:focus{
    border:2px solid white;
    box-shadow:0 0 2px white;
}

.butto{
    color: black;
    background: #529cdd;
    font-weight: bold;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
}
.butto:hover{
    border:2px solid white;
    box-shadow:0 0 2px white;
	transform: scale(1.2);
    
}
.butto:focus{
    border:2px solid red;
    box-shadow:0 0 2px white;
    
}
button.color{
  
    position:initial;
    width:1rem;
    height:1rem;
    top:initial;
    bottom:1rem;
    border-radius:0.25rem;
    border:solid 2px black;
    cursor: pointer;
    padding: 10px;
	
    
  }
  
  button.color:hover{
    border:solid 2px white;
    box-shadow:0 0 2px white;
	transform: scale(1.5);
	border: 2px solid red;
    
  }
  
  button.color:focus{
    border:solid 2px white;
    box-shadow:0 0 2px white;
    
  }

  
  button[data-color=red] {background-color:red !important}
  button[data-color=orange] {background-color:orange !important}
  button[data-color=green] {background-color:green !important}
  button[data-color=blue] {background-color:blue !important}
  button[data-color=white] {background-color:white !important}


  .icons{
    font-size: 35px;
    display: flex;
    flex-direction: row;
    list-style: none;
    align-self: center;
    padding: 10px;
    
}
.icons li a{
color:#405DE6;
margin: 5px;
margin-left: 250px;

}
.icons li:hover{
    opacity: 0.6;
}

  ::-webkit-scrollbar{
      display: none;
  }

.delete-button {
    position: relative;
    padding: 10px;
    width: 200px;
    height: 60px;
    display: flex;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background-color: #4834d4;
    outline: none;
    cursor: pointer;
    color: #fff;
    display: none;
    transition: .3s ease-in-out;
}
.delete-button:hover {
	background-color: #35269b;
}
.delete-button .icon {
	position: absolute;
	display: block;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	transform: translate(-50%,-50%);
}
.delete-button .icon .lid {
	position: absolute;
	z-index:0;
	left: 50%;
	top: 23%;
	width: 70%;
	height: 10%;
	background-color: #fff; 
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	transform: translateX(-50%);
	transform-origin: left bottom;
	transition: transform .2s ease-in-out;
}
.delete-button.focus .icon .lid {
	transform: translateX(-50%) rotate(0deg);
}
.delete-button.clicked .icon .lid {
	transition-delay: .2s;
	transform: translateX(-50%) rotate(-35deg);
}
.delete-button .icon .lid::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 30%;
	height: 70%;
	border: 2px solid #fff;
	transform: translateX(-50%) translateY(2px);
}

.delete-button .icon .can {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 0%;
	width: 60%;
	height: 60%;
	background-color: #fff;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	transform: translateX(-50%);
}
.delete-button .icon .can::before,
.delete-button .icon .can::after {
	content: '';
	position: absolute;
	top: 20%;
	bottom: 20%;
	width: 20%;
	background-color: #4834d4;
}
.delete-button .icon .can::before {
	left: 20%;
}
.delete-button .icon .can::after {
	left: 60%;
}

.delete-button .icon .trash {
	position: absolute;
	z-index: 1;
	left: 100%;
	top: 0;
	width: 20%;
	height: 20%;
	border-radius: 25%;
	background-color: #fff;
	opacity: 0;
}
.delete-button.clicked .icon .trash {
	animation: trash .5s forwards linear;
}
@keyframes trash {
	0% {
		left: 100%;
		top: 0;
		transform: rotate(0);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	50% {
		left: 40%;
		top: 10%;
	}
	100% {
		left: 40%;
		top: 50%;
		transform: rotate(-180deg);
		opacity: 1;
	}
}
.delete-button .icon .text {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	font-family: 'Poppins', sans-serif;
	font-size: 1.3em;
	font-weight: 700;
	color: #4834d4;
	transform: translate(-50%, -50%);
	opacity: 0;
}
.delete-button.clicked .icon .text {
	animation: text 2s ease-in-out forwards;
}
@keyframes text {
	0%, 25% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}
	60%, 85% {
		transform: translate(-50%, -250%) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -450%) scale(1.5);
		opacity: 0;
	}
}

.trash-wrapper {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 60px;
}