@font-face {
    font-family: dancing;
    src: url(../fonts/DancingScript-Regular.ttf);
}

@font-face {
    font-family: lobster;
    src: url(../fonts/Lobster-Regular.ttf);
}


@font-face {
    font-family: pacifio;
    src: url(../fonts/Pacifico-Regular.ttf);
}

@font-face {
    font-family: Sriracha;
    src: url(../fonts/Sriracha-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', Arial, sans-serif;
}

.body {
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("/images/bg/mat.jpg");
    background-size: contain;
    background-repeat: repeat-y;
    font-size: 1rem;
}

/* .card-body {
    min-height: 15vh !important;
} */

.header {
    min-height: 40vh;
    position: relative;
    background-image: url("/images/cached/banner.jpg");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;

}

.hight-light-item {
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("/images/bg/Untitled-1.jpg") !important;
    background-size: contain;
    background-position: 0 50%;
}

.card {
    border: none !important;
}

.title {
    border-radius: 0% 30px 30px 0%;
    padding: 2vh 5vw;
    left: 0px;
    border: 1px solid transparent;
    position: absolute;
    display: block;
    bottom: 0;
    font-size: 1.8rem;
}

.happy {
    font-family: pacifio;
    background: linear-gradient(to left, #128d8d 0%, #330867 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.name {
    font-family: dancing;
    font-size: 1rem;
    font-weight: bolder;
    background: linear-gradient(to right, #128d8d 0%, #330867 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.quotes {
    text-align: justify;
}

.quotes-title {
    position: relative;
    padding-top: 4vh;
    color: #128d8d;
    font-family: Sriracha;
    font-size: 1.4rem;
}

.quote-body {
    font-family: Sriracha;
    color: #330867
}

.hight-light-title {
    background: linear-gradient(to right, #128d8d 0%, #330867 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: Sriracha;
}

.hight-light-body {
    font-family: Sriracha;
    background: linear-gradient(to left, #128d8d 0%, #330867 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (min-width: 1024px) {
    .header {
        min-height: 70vh;
    }

    .card-body {
        min-height: 13vh !important;
    }

    .title {
        padding: 5vh 8vw;
        font-size: 6vh;
    }

    .happy {
        font-size: 8vh;
    }

    .name {
        font-size: 5vh;
    }

    .quotes-title {
        font-family: Sriracha;
        font-size: 4vh;
    }

    .quote-body {
        font-family: Sriracha;
        font-size: 2.5vh;
    }

    .hight-light-title {
        font-size: 3vh;
    }

    .hight-light-body {
        font-size: 2vh;
    }

}

@media (min-width: 1920px) {
    .title {
        font-size: 15px;
    }

}

.avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    bottom: -75px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid #fff;
}