@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');

:root {
    /* CSS HEX */
--vanilla: #D8D3A1ff;
--powder-blue: #A3AFD7ff;
--white: #FEFEFEff;
--periwinkle: #B4BDDEff;
--gray: #837F7Fff;
--flax: #E6D487ff;
--ghost-white: #E4E6F0ff;

    --battleship-gray: hsla(63, 8%, 51%, 1);
    --bone: hsla(46, 17%, 74%, 1);
    --madder: hsla(352, 88%, 35%, 1);
    --fire-engine-red: hsla(353, 94%, 42%, 1);
    --eerie-black: hsla(60, 4%, 11%, 1);
    --ecru: hsla(41, 37%, 64%, 1);
    --hunter-green: hsla(120, 14%, 36%, 1);
    --black-olive: hsla(80, 6%, 28%, 1);
    --jet: #34312d;
    --brunswick-green: hsla(131, 20%, 21%, 1);
}

.text_montserrat {
    font-family: Montserrat;
}

.text_dancing {
    font-family: "Dancing Script";
}

.text_red{
    color: var(--fire-engine-red);
}

body {
    width: 100%;
    height: 100%;
    background-color: var(--eerie-black);
}

.curve_left {
	width: 25%;
	height: auto;
	float: left;
	margin-right:2rem;
	shape-outside:circle();
}

.curve_center {
	width: 25%;
	height: auto;
	float: left;
	margin-right:2rem;
	shape-outside:circle();
}

.navbar {
    background-color: var(--fire-engine-red);
}

#banner-section{
    background-color: var(--ghost-white);
}

#home-section{
    background-color: var(--vanilla);
}

#about-section{
    background-color: var(--white);
}

#social-section{
    background-color: var(--ecru);
}

#mission-section{
    background-color: var(--vanilla);
}

#program-section{
    background-color: var(--ghost-white);
}

.card{
    background-color: var(--eerie-black);
    color: var(--bone);
}

.popup_bg{
    background-color: var(--eerie-black);
    color: var(--bone);
}

.btn-custom {color: var(--plaster);
background-color: rgba(0,0,0,0.5);
border-color: var(--madder);
}

.btn-modal-close {
    color: var(--plaster);
background-color: rgba(0,0,0,0.5);
border-color: var(--bone);
}