@charset "UTF-8";
/* CSS Document */

body {
	overflow-x:hidden;
}

header {
	width:407px;
	height:190px;
	margin:auto;
	margin-top:22px;
}

#logo {
	width:180px;
	height:180px;
	text-align:center;
	float:left;
	border:5px #831773 solid;
}
#logo img {
	width:180px;
	margin-top:-10px;
	margin-bottom:-40px;
}
#logo h1 {
	font-family:signika;
	font-weight:300;
	font-size:14pt;
	color:#831773;
}

#title {
	float:right;
	width:217px;
	height:77px;
	text-align:center;
	background-image:url("../images/border.png");
	background-size:14px 14px;
	background-position:top center;
}
#title h2 {
	font-family:fantasque;
	font-weight:200;
	font-size:18pt;
	line-height:1.5;
	background-color:white;
	padding:7px;
	margin:14px;
	color:#444444;
}

nav {
	width:214px;
	height:108px;
	float:right;
	border:#831773 solid;
	border-width:2px 3px 3px 0px;
}

nav #links {
	width:184px;
	height:62px;
	text-align:center;
	line-height:1.4;
	margin:auto;
	margin-top:14px;
	padding-top:16px;
	padding-right:2px;
	border:2px #831773 dashed;
}
nav #links a {
	color:#831773;
	font-family:fantasque;
	font-weight:200;
	font-size:12pt;
	text-decoration:none;
	background-image: linear-gradient(white 50%, #831773 50%);
	background-size: 0% 0.18em;
    background-position-y: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in;
}
nav #links a:hover {
	background-size: 100% 0.18em;
}

nav #or {
	font-family:fantasque;
	font-weight:100;
	color:#444444;
	font-size:12pt;
	padding-right:4px;
}

#container {
	width:65vw;
	margin:auto;
	margin-top:60px;
	margin-bottom:120px;
}

#flex-container {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	width:65vw;
	margin:auto;
	margin-top:70px;
	margin-bottom:70px;
}

#flex-container div {
	width:270px;
	height:270px;
	margin-bottom:16px;
}
#flex-container div img {
	width:270px;
	margin-bottom:4px;
}
#flex-container div p {
	margin-left:7px;
	color:#831773;
	font-family:fantasque;
	font-weight:200;
	font-size:16.8pt;
	line-height:21.2pt;
	margin-top:0px;
}

.a-w-bg {
	margin-left:7px;
	color:#831773;
	font-family:fantasque;
	font-weight:200;
	font-size:16.8pt;
	text-decoration:none;
	background-image: linear-gradient(white 50%, #831773 50%);
    background-size: 0% 0.2em;
    background-position-y: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in;
}
.a-w-bg:hover {
	background-size: 100% 0.2em;
}

#resume {
	width:22vw;
	float:left;
	text-align:center;
	padding-top:58px;
	padding-bottom:2vw;
	border-right:2px #831773 dashed;
}
#resume img {
	width:14vw;
	padding-left:20px;
	margin:auto;
	margin-bottom:4px;
}
#resume a {
	color:#831773;
	font-family:fantasque;
	font-weight:200;
	font-size:18pt;
	text-decoration:none;
	background-image: linear-gradient(white 50%, #831773 50%);
    background-size: 0% 0.2em;
    background-position-y: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in;
}
#resume a:hover {
	background-size: 100% 0.2em;
}

#bio {
	width:36vw;
	min-height:14vw;
	float:right;
	margin-right:4vw;
}
#bio p {
	color:#444444;
	font-family:fantasque;
	font-weight:200;
	font-size:12pt;
	line-height:15pt;
}
#bio p #eloise {
	color:#831773;
	font-family:signika;
	font-size:15.8pt;
	margin-right:-2px;
	line-height:12pt;
}

#skills {
	width:27vw;
	background-color:#831773;
	color:white;
	float:left;
	margin-left:-2px;
	margin-top:2.4vw;
	margin-right:-17vw;
}
#skills p {
	font-family:signika;
	font-weight:300;
	font-size:15pt;
	padding-left:50px;
	padding-top:18px;
	margin-bottom:-12px;
}
#skills ul {
	font-family:fantasque;
	font-weight:200;
	font-size:14pt;
	padding-left:50px;
	padding-bottom:12px;
}

#contact {
	width:21vw;
	min-width:200px;
	float:right;
	margin-top:2px;
	border:2px #831773 solid;
	text-align:right;
	background-color:white;
}
#contact p {
	color:#831773;
	font-family:signika;
	font-weight:100;
	font-size:17pt;
	padding:0px 27px 0px 7px;
}
#contact a {
	color:#831773;
	font-weight:300;
	text-decoration:none;
	background-image: linear-gradient(white 50%, #831773 50%);
    background-size: 0% 0.2em;
    background-position-y: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in;
	font-size:1.6vw;
}
#contact a:hover {
	background-size: 100% 0.2em;
}

#clear-div {
	clear:both;
}

footer {
	width:407px;
	height:190px;
	margin:auto;
	margin-bottom:20px;
}
footer #image {
	width:407px;
	height:150px;
	background-image:url("../images/bg.png");
	background-size:128px 101px;
	background-position:bottom center;
	background-attachment:fixed;
	margin-bottom:-20px;
}

footer #description {
	width:407px;
	height:40px;
	background-color:#831773;
	text-align:center;
	line-height:40px;
}
footer #description p {
	color:white;
	font-family:signika;
	font-weight:200;
	font-size:12pt;
}