/*  Style for the learn page */

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

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



/*  card width compared to screen width  */
.learnMain .card{
    width: 70%;
}

/*  center top card within own 100% wide div  */
#learnTopCard{
    display: flex;
    width: 100%;
    justify-content: center;
    /*  spacing between the cards  */
    padding-bottom: 5%;
}

/*  center bottom card within own 100% wide div  */
#learnBottomCard{
    display: flex;
    width: 100%;
    justify-content: center;
}

/*  space out bottom card buttons on bottom card  */
#learnBottomCardButtons{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

/*  Github logo alignment on button  */
#githubButtonLearn{
    position: relative;
	height: 1.4em;
	margin-right: 5px;
	top: -2px;
}