body{
    background-color: #F0F0FF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='156' viewBox='0 0 90 90'%3E%3Ccircle fill-opacity='0.81' fill='%232CABFF' cx='45' cy='45' r='70'/%3E%3Cg fill='%23E7E240' fill-opacity='0.81'%3E%3Ccircle cx='0' cy='90' r='6'/%3E%3Ccircle cx='90' cy='90' r='6'/%3E%3Ccircle cx='90' cy='0' r='6'/%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

.container{
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 2fr auto;
}

#search{
    width: 150px;
}

input{
    width: 50px;
}

img{
    border-radius: 25px 25px 0 0 !important;
    /* max-width: 100%; */
    object-fit: contain;
    max-height: 25vh;
}

.card-img-top{
    height: 25vh;
}

.card{
    height: 75vh;
    
    border-radius: 25px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    object-fit: contain;
}

.card-body{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    text-overflow: ellipsis;
}

.card-text{
    max-height: 10.5vh;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card-title{
    height: 9vh;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media(min-width: 600px){
    .card-title{
        height: 11vh;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    

    
}

@media(min-width: 700px){
    .card-text{
        max-height: 12vh;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .card-title{
        height: 12vh;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media(min-width: 900px){
    .card-text{
        max-height: 10.5vh;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .card-title{
        height: 11vh;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}