.modal-container {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    animation-name: fate;
    animation-duration: 0.6s;
}

.modal-content {
    position: relative;
    display: flex;
    justify-content: center;
    height: 90%;
    width: 90%;
}

.modal-img-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: zoom;
    animation-duration: 0.4s;
}

.modal-img {
    max-height: 100%;
    max-width: 100%;
}

.modal-download {
    position: absolute;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
}

.loader {
    border: 8px solid #f3f3f3; 
    border-top: 8px solid #727272;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
     
@keyframes fate {
    from {opacity: 0}
    to {opacity: 1}
}

@media (max-width:500px) { 
    .modal-download {
        width: 112px;
    }
 }