.notification {
    position: fixed;
    top: 30%; 
    right: -20%; 
    width: 8%; 
    height: 8;
    padding: 5px;
    background-color: #007aff; 
    border: 1px solid #c3e6cb; 
    transition: right 0.5s ease-in-out; 
    z-index: 11;
    font-family: Siffon;
    font-size: 1.1rem;
}
.show {
    right: 0; 
}
#notification-container{
    font-family: siffon;
    color: white; 
    font-size: 2rem;
}

@media (max-width: 576px) {
    .notification {
        width: 40%; 
        font-size: 1rem;
    }

    #notification-container {
        font-size: 1.5rem; 
    }
}

/* For tablets */
@media (min-width: 577px) and (max-width: 768px) {
    .notification {
        width: 30%; 
        font-size: 1rem; 
    }

    #notification-container {
        font-size: 1.8rem;
    }
}

@media (min-width: 769px) {
    .notification {
        width: 20%; 
        font-size: 1.2rem;
    }

    #notification-container {
        font-size: 2rem; 
    }
}