.achievement-popup {
width: fit-content;
height: 80px;
background: #4800AD;
background: linear-gradient(180deg, rgba(72, 0, 173, 1) 0%, rgba(50, 0, 120, 1) 100%);
box-shadow: 2px 2px 0px 0px #6600f6 inset, -1px -1px 0px 0px #290065 inset;
border: 1px solid black;
border-radius: 3px;
padding: 13px;
display: flex;
position: fixed;
bottom: 20px;
left: 20px;
align-items: center;
transition: opacity 0.5s ease-in-out;
}

.achievement-obtained {
font-size:20px;
color: #fcee00;
text-shadow: -1px -1px 0 black, -0px -1px 0 black, -1px -0px 0 black, 1px 0px 0 black, 0px 1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px 0 black, 0px 2px 0 black, 2px 0px 0 black, 1px 2px 0 black, 2px 1px 0 black;
font-weight: bold;
}

.achievement-title {
font-size:15px;
color: #fcee00;
text-shadow: -1px -1px 0 black, -0px -1px 0 black, -1px -0px 0 black, 1px 0px 0 black, 0px 1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px 0 black, 0px 2px 0 black, 2px 0px 0 black, 1px 2px 0 black, 2px 1px 0 black;
font-weight: bold;
}

.achievement-image {
width: 45px;
height: 45px;
border: 1px solid black;
margin-right: 10px;
background-size: cover;
background-position: center;
}

.achievement-popup .achievement-obtained {
font-size: 15px;
}

.achievement-popup .achievement-title {
font-size: 10px;
}

.achievement-popup.fade-out {
  opacity: 0;
}