.success-box {
    justify-self: center;
    position: fixed;
    display: none;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: white;
    border-radius: 8px;
    color: #384955;
    align-content: end;
    justify-items: center;
    overflow: hidden;
    z-index: 12;

    animation: fade-in 0.5s ease-out;
}

.success-text-container {
    text-align: center;
}

.success-text-container>img {
    margin-bottom: 20px;
    animation: pan-in 1s ease-out;
    width: 200px;
}

.success-title {
    margin: 10px;
    animation: pan-in-right 1s ease-out;
}

.success-message {
    margin-bottom: 20px;

    animation: pan-in-left 1s ease-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pan-in {
    from {
        transform: translateY(-50px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes pan-in-left {
    from {
        transform: translateX(-50px);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes pan-in-right {
    from {
        transform: translateX(50px);
    }

    to {
        transform: translateX(0);
    }
}