@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&family=Mulish&family=Source+Serif+Pro:wght@400;600;700&display=swap');

body {
    font-family: 'Source Serif Pro', serif;
    background-image: url("/images/HNMicrositeBackground_LailaAmer_Oct27.jpeg");
}


.banner {
    width: 100%;
    height: calc(100vh - 7rem);
    background-image: url('/images/HNCover_microsite.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-page {
    width: 100%;
    display: flex;
    place-items: center;
    place-content: center;
    font-size: 2rem;
    background-color: white;
    text-align: center;
    box-shadow: 0px 6px 21px -4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 6px 21px -4px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 6px 21px -4px rgba(0,0,0,0.55);
}

.card {
    width: 100%;
    color: black;
}

.card a, .card-title {
    color: black;
    font-family: 'Source Serif Pro', serif;
    font-weight: 600 !important;
}

.card:hover .card-title, .card-title:hover {
    color: #3193B0 !important;
}

.credit {
    text-align: center;
    background-color: white;
    -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    padding: 40px;
    font-family: 'Mulish', sans-serif;
}

.credit h3 {
    margin-top: 10px;
}

.credit h3, .credit h5 {
    font-family: 'Source Serif Pro', serif;
    font-weight: 600;
}

.credit img{
    width: 150px;
    height: auto;
    border-radius: 100%;
}

.spacer-d {
    height: 60px
}

.spacer-m {
    height: 50px;
}

.card-content {
    min-height: 120px;
    text-align: center;
    display: flex;
    place-items: center;
    place-content: center;
}

@media only screen and (max-width: 600px) {
    body {
        background-image: url("/images/HNMobileBackground_LailaAmer_Oct27.jpeg");
        background-repeat: repeat;
        background-size: cover;
    }

    .row {
        margin-bottom: 0 !important;
    } 
    .banner {
        height: calc(100vh - 9rem);
        background-image: url('/images/HNCover_MOBILE.jpg');
        background-size: cover;
    }
}