#main{
    text-align: center;
    
    
}

#title{
width: 100%;
font-size: 4rem;
}
h3{
    width: 100%;

    
}

#img-div{
    background-color: #bcbab88e;
    width: 85%; 
    margin: 0 auto;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc; 
    -moz-box-shadow:  3px 3px 5px 6px #ccc;  
    box-shadow:  3px 3px 5px 6px #ccc; 

}

#image{
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

#img-caption{
    font-size: 1.5rem;
}

#tribute-info{

}
/* timeline */
#timeline{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(19rem, 2fr));
    row-gap: 2rem;
    
}

/* Cards */
.card{
    width: 15rem;
    height: auto;
    background-color: rgba(153, 216, 224, 0.513);
    margin: 0 auto;
    border-radius:10% ;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc; 
    -moz-box-shadow:  3px 3px 5px 6px #ccc;  
    box-shadow:  3px 3px 5px 6px #ccc; 
}


.card-img{
   width: 100%;
   height: 140px; 
   border-radius: 10%;
}

#tribute-link{

}

#footer{
    font-size:1.5rem ;
    text-align: center;
    margin-top: 7rem;
}



@media all and (max-width: 800px) {
    #img-div{
        width: 100%; 
        margin: 0 auto;
        background-color: white;
    }
    
    #image{
        width: 100%;
        height: auto;
    }

    #timeline{
        display: grid;

        
    }
    
    .card-img{
        width: 100%;
        height: 246px; 
        border-radius: 0;
     }
   
    .card{
        width: 23rem;
        height: auto;
        background-color: rgb(153, 216, 224);
        margin: 0 auto;
        border-radius: 0;
    }
}