body {
    background-color: rgb(156, 135, 135);
}


/*Styling for the navbar*/
nav {
    background-color: #36295c;

}

nav a,
.nav-item {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
}

#HeadName { /*Increases the size of the brand in the nav bar*/
font-size: 25pt;
}

.formButton {
    background-color: blueviolet;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}

.formButton:hover {
    background-color: rgb(161, 106, 212);
    font-size: 13px;
    border-radius: 10px;
}

.navbar-brand { /*Moving this margin to the #HeadName section makes it not work. I do not know why*/
    margin: 2px;
}

#rowrow { /*Puts the quickInfo and carousel sections side-by-side*/
    margin: 10px;
padding:10px;
display:flex;
flex-direction: column;
align-items: center;
}


/*Styling for homepage*/

#quickInfo {
    /*Styles the quick info section*/
    width: 70%;
    background-color: #f2f0f6;
    left: 100px;
    font-size: 20px;
margin:10px;
padding:10px;
}

#PadThisCard,#PadThisCard2,#PadThisCard3 /*Styles the carousel cards so the text and arrows don't overlap*/{
    padding:60px;
}

#carouselExampleCaptions {
    align-items: center;
}

.SloganAndFooter {
    background-color: #A9A1C3;
padding:5px;
}

#card {
    width: 70%;
}

footer {
font-size: 8pt;
}

/*Styles the Team page*/

.aboutLynette {
    padding: 10px;
    margin: 15px;
    background-color: #f3f3f6;
    border: 2px solid rgb(214, 214, 214);
    border-radius: 3px;

}

.floatLeft {
    /*Lynette's picture*/
    float: left;
}

.cohorts { /*the div surrounding the cohorts section*/
    padding: 20px;
    margin: 20px;
}

.vidSection /*styles the videos so they don't overlap*/ {
margin:5px;
padding:5px;
align-items: center;
}

.caption /*the captions under the videos*/ {
font-size: 12pt;
text-align: center;
}

#FlexVideos
{
    flex-direction: column;
}

/*Forensic and Tax page stylings*/


/*info and info2 apply the same stylings to both pages. they are different due to styles in the media query*/
.info { 
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    margin: 15px;
    align-items: center;
background-color: #44366e;
}

.info2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    margin: 15px;
    align-items: center;
background-color: #44366e;
}

/*Title and Paragraph stylings. they are shared across pages*/

.tAndfTitle {
    background-color: #ffffff;
    color: #44366e;
    font-weight: bold;
    align-items: center;
    width: 50%;
margin: 5px; 
padding:70px;
}

.tAndfParagraph {
    width: 50%;
margin: 10px;
border:2px solid grey;
padding:25px;
color:white;
}

@media screen and (min-width: 880px) {

#rowrow {
flex-direction: row;
}
#FlexVideos
{
    flex-direction: row;

}

iframe {
width: 560;
height: 315;
}

    .info {
        flex-direction: row;
margin-top: 150px;
    }

    .info2 {
        flex-direction: row-reverse;
margin-top: 150px;
    }
}