/* Home Page Styling */

/*  Controls main page and layout in flex to make columns */
.indexMain{
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
}

/*  center and pad the main title */
.indexMain h2{
    display: flex;
    justify-content: center;
    padding: 2%;
    width: 100%;
}

/*  center the youtube video player */
#front-iframe{
    display: flex;
    width: 100%;
    justify-content: center;
}

/*  pad and space the cards within the row */
.cardRowIndex{
    padding-top: 5%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

/*  card width compared to screen width  */
.cardRowIndex .card{
    width: 30%;
}

/*  center parts of card-body */
.cardRowIndex .card-body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

/*  center img in class card-top within div holding img */
.cardRowIndex .card .card-top{
    width: 100%;
    display: flex;
    justify-content: center;
}

/* set img width comparted to card width  */
.cardRowIndex .card .card-top img{
    width: 60%;
}