body{
    background-color: rgb(233, 228, 228);
}

.card{
    margin-left: 5rem;
    margin-right: 4rem;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    background-color: white;
    
}

.card p{
    font-size: 13px;
    margin-left: 1rem;
    text-align: justify;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.card h1{
    margin-top: 5rem;
    color: #1b0b5e;
    margin-left: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.card h2{
    margin-left: 2rem;
}
.card .picture img{
    width: 300px;
    height: 400px;
    margin-top: 8rem;
    margin-left: 1rem;
}
#close {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}
@media screen and (min-width: 200px)and (max-width:500px) {
    
    .card{
        margin-left: 2rem;
        margin-right: 2rem;
        margin-top: 1rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        background-color: white;
        
    }
    .footer-container{
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    .footer-1 p{
        margin: 1rem auto;
    }
  }