.notification {
    padding: 3rem 4rem;
    max-width: 40rem;
    min-width: 25rem;
    box-sizing: border-box;
    z-index: var(--layer-sky);
}

    .notification.fixed {
        left: 2rem;
        bottom: 2rem;
        position: fixed;
        z-index: 100000;
        background: hsl(var(--text-black-dm, var(--text-black)));
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;   
    }

    .notification.hidden {
        display: none;
    }

    .notification .notification--items .notification--content {
            display: block;
    
        }

    .notification .notification--items .notification--content h2 {
                    color: hsl(var(--text-white-dm, var(--text-white)));
                    font-family: var(--clocktower-sans-serif);
                    font-size: var(--step-1);
                }

    .notification .notification--items .notification--content p {
                    font-family: var(--clocktower-sans-serif);
                    color: hsl(var(--text-white-dm, var(--text-white)));
                    font-size: var(--step-0);
                }

    .notification .notification--items .notification--content p.status {
                        font-size: var(--step--2);
                    }

    .notification .notification--items .notification--content a {
                    color: hsl(var(--text-white-dm, var(--text-white)));
                }

    .notification .notification--actions {
        display: block;
    }

    .notification .notification--actions button {
            cursor: pointer;
            border: none;
        }