.notif {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.notif .container {
    text-align: center;
    width: 280px;
    background-color: var(--tertiary-main-color);
    padding: 2rem;
    border-radius: 5px;
}

.notif .container h3 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.notif .container p {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--secondary-text-color);
}

.notif .container .graphicbox svg{
    fill: var(--accent-color);
    padding: 3rem;
}

.notif .container .graphicbox-alert svg{
    fill: red;
    padding: 3rem;
}

.notif .container a {
    text-decoration: none;
    background-color: var(--darker-accent-color);
    padding: 8px 20px;
    color: var(--onprimary-color);
    border-radius: 5px;
}

.notif .container a:hover {
    background-color: var(--accent-color);
}

.notif .container .btn-container {
    margin-bottom: 1.2rem;
}

.notif-hidden {
    display: none;
}

/* ===== end of file upload ===== */

.copyright-footer {
    text-align: center;
    background-color: var(--darker-primary-color);
    padding: 15px;
}

.copyright-footer p {
    color: var(--onprimary-color);
}