/* general site settings */
body {
	background: rgb(42,42,108);
	background: linear-gradient(135deg, rgba(237,100,204,1) 0%, rgba(42,42,108,1) 100%);
	background: -webkit-linear-gradient(135deg, rgba(237,100,204,1) 0%, rgba(42,42,108,1) 100%);
	background: -moz-linear-gradient(135deg, rgba(237,100,204,1) 0%, rgba(42,42,108,1) 100%);
	background: -ms-linear-gradient(135deg, rgba(237,100,204,1) 0%, rgba(42,42,108,1) 100%);
	background: -o-linear-gradient(135deg, rgba(237,100,204,1) 0%, rgba(42,42,108,1) 100%);
	background-attachment:fixed;
	margin:0;

}

.main-container {
	box-sizing:border-box;
	position:relative;
	background-color:rgba(255,253,247,0.902);
	border: 1px solid #9b21f2;
	margin: 0 auto;
	width:auto;
	padding:0 3.5em;
	max-width: 75%;
	overflow:hidden;
	font-family: 'Encode Sans Expanded', sans-serif;
	font-weight:300;
	font-size:1.2em;
	letter-spacing:0.5rem;
	line-height:1.5em;
	color:#545454;
	  -webkit-animation: fadein 1s ease-in;
       -moz-animation: fadein 1s ease-in; 
        -ms-animation: fadein 1s ease-in; 
         -o-animation: fadein 1s ease-in; 
            animation: fadein 1s ease-in;
}



.tagline{
	color:#614682;
	font-family: 'Work Sans', sans-serif;
	font-size:1em;
	padding:0 3em;
	
}

.data {
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	border-bottom:1px solid white;
}

.flex-container {
 	display:flex;
 	flex-direction:row;
 	flex-wrap:wrap;
 	align-items:center;
 	margin: 1em auto;
 	padding:0 5rem;
}

.portrait {
	width:25%;
}

.portrait img {
	border-radius:35%;
	border:none;
	width:70%;
	margin:auto;
}

.portrait a {
	display:flex;
}

.bio {
	width:75%;
}

.q {
	color:#614682;
	font-family: 'Work Sans', sans-serif;
	font-weight:400;
	font-size:1.1em; 
}



.title {
	flex-wrap:nowrap;
	display:flex;
	flex-diretion:row;
	align-items:center;
	padding:0 2em;
	margin:0 auto;

}

.divider {
	color:#614682;
	font-size:1.3em;
}

.buttons {
	margin:2em;
}
.star1, .star2 {
	width:30%;
	margin:auto;
}

.gdg {
	width:30%;
	margin:Auto;
}

.socials {
	margin:2em;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items: center;
	justify-content: center;
}

.socials a {
	border-radius:100%;
	border:none;
	width:2.5em;
	height:2.5em;
	margin: 0.5em;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items: center;
	justify-content: center;
	background-color:#D5AFED;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;

}

.socials a:hover {
	background-color:#f49ca9;
}

.socials img {
	width:60%;
	box-sizing:border-box;
	position:relative;
	display:block-inline;
}

.test:before {
	background:#614684;
}

.space {
	margin:2em;
}

header {
	text-align:center;

}

footer {
	text-align:center;
}


h1 {
	font-size:3em;
	color:#614682;
	letter-spacing:1rem;
	line-height:1.3em;
	font-weight:500;
	font-family: 'Turret Road', cursive;
	margin:0 auto;
}

h3 {
	color:#614682;
	text-align:center;
	text-decoration:underline;
	font-weight:800;
	font-family: 'Turret Road', cursive;
}
p {
	letter-spacing:0.05rem;
}

a {
	-webkit-transition: color 1s;
	-moz-transition: color 1s;
	-o-transition: color 1s;
	transition: color 1s;
	color:#614684;
	text-decoration:underline;

}

a:hover {
	color:red;
}

b {
	font-weight:bold;
}

button {
	background-color:#D5AFED;
	border:none;
	color:#614684;
	width:9em;
	height:3em;
	border-radius:0.4em;
	font-family: 'Work Sans', sans-serif;
	font-weight:bold;
	font-size:0.9em;
	padding:1em;
	overflow:hidden;
	display:inline-block;
	max-width:100%;
	text-align:center;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

button:hover {
	background-color:#f49ca9;
}

strong {
	font-weight:bold;
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



/* mobile formatting */
@media (max-width: 820px) 
{
    body 
    {
        margin:0;
        padding:0;
        font-size:0.7em;
        width: auto;
    }

    .main-container
    {
        max-width:90%;
    }
    .flex-container
    {
        display: flex;
        flex-direction:column;
    }

     .portrait {
    	width:70%;
    }

    .bio {
    	width:100%;
    }
}

@media (min-width:300px) and (max-width:640px) {
	 body 
    {
        margin:0;
        padding:0;
        font-size:0.5em;
        width: auto;
    }

    .main-container
    {
        max-width:95%;
    }
    .flex-container
    {
        display: flex;
        flex-direction:column;
        padding:2em;
        align-items:center;
    }


    .portrait {
    	width:70%;
    }

    .bio {
    	width:100%;
    }

    .title {
    	margin:auto;
    	padding:0;
    	font-size:0.7em;

    }

    button {
    	margin:0.5em;
    }
}