@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
/* DO NOT EDIT THESE IMPORTS
In order to keep our CSS as manageable as possible, we're starting with multiple separate stylesheets. They are all imported into style.css.

    Do not edit reset.css at all.
    You can minimally edit layout.css to match your specific column/row grid rules. Try to keep all basic structural rules here.
    Optionally, you can set colour variables in variables.css.
    Use typography.css stylesheet to set your general text styles.
    Use style.css for all general UI styles, or anything that you want to overwrite from other stylesheets, because it's loaded last. */

/* Use this stylesheet to add your UI details, and to overwrite layout details for specific instances. */

body {
	margin: 0;
}

/* ------------------Style the header---------------- */

header {
	padding: 35px 56px;
	background-color: var(--pale-blue);
	border-bottom: 8px solid var(--black);
}

/* ----------Style the navigation----------- */
nav ul {
	list-style-type: none;
	padding: 0;
}

nav li {
	display: inline-block;
	padding: 0.5em 0.75em 0.75em 0em;
	/*Makes bigger tap space- good for accessibility*/
}

nav a {
	text-decoration: none;
	display: inline-block;
}

/* .divider-nav {
	border-bottom: 5px solid;
	padding-bottom: 0.2em;
	overflow: hidden;
} */

/* ------------------Sections and pages------------------ */
/* Style any specific sections or pages here */
.flowers {
	max-width: 100px;
	height: auto;
}
.about-margin {
	margin-bottom: auto;
}
.blue {
	background-color: var(--pale-blue);
	margin: auto;
	padding: 60px 30px 0px 30px;
}
.skills {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	text-align: center;
	align-items: center;
}
.project-header {
	background-color: var(--pale-blue);
	margin: auto;
	padding: 40px 30px;
}
.logo {
	width: 190px;
	display: inline-block;
}
.contact-icon {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 10px;
	max-width: 30px;
	height: auto;
}

.icons {
	display: inline-block;
	width: 45px;
	margin: 22px 5px 0px 5px;
}
.headshot {
	padding: 0;
	margin: 0;
	width: 614px;
}
.hero {
	padding: 180px 30px;
}
.img-border-radius {
	border-radius: 26px;
	min-width: 300px;
}

.img-stacked {
	margin: auto;
}

/* .img-frame {
	object-fit: cover;
	border-radius: 26px;
} */

.padding-default {
	padding: 35px 30px;
}

.padding-next {
	padding: 0px 30px 35px 30px;
}
.pale-blue-section {
	background-color: var(--pale-blue);
	margin: auto;
	padding: 120px 30px;
}
footer {
	background-color: var(--pale-blue);
	padding: 45px 30px;
	border-top: 8px solid var(--black);
}
.footer-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
}
.footer-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.right-scroll {
	margin-left: auto;
	margin-right: 0;
}
.center-h {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
/* .footer-text {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
} */

#projects {
	scroll-behavior: smooth;
}
#contact-me {
	scroll-behavior: smooth;
}

/* Normal Resolution CSS */

.hero-img {
	width: 100%;
	height: 70vh;
	background-size: 120%;
	background: url(images/floral_background_test.png);
	background-repeat: no-repeat;
}
/* HD/Retina CSS */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 144dpi) {
	.hero-img {
		background: url(images/floral_background_test@2x.png) no-repeat 0 0;
		background-size: cover; /* Equal to normal logo width */
	}
}

/*----------------------Dropdown menu------------------------------*/

.close-button {
	width: 45px;
	height: auto;
	position: absolute;
	right: 40px;
	top: 20px;
	z-index: 200;
	cursor: pointer;
	margin: 20px;
	display: inline-block;
}

.close-button:focus,
.closebutton:hover {
	filter: brightness(50%);
	transform: translateY(-5px);
	cursor: pointer;
}

/*-------------------dropdown close---------------------------*/

/* //////////////----Responsive layout - Media queries--------//////////// */

/* You can edit the rules inside of these media queries, but you can also edit the breakpoints to work for your own content and design. */
/* Normal Resolution CSS */
@media (max-width: 320px) {
	.hero {
		padding: 80px 30px;
	}
}

@media (max-width: 450px) {
	nav li {
		/* display: block; */
		padding: 0.5em 0.75em 0.75em 0em;
	}
	.hero {
		padding: 100px 30px;
	}
}

@media (max-width: 600px) {
	/* anything you only want applied at mobile sizes can go here */
	nav a {
		text-decoration: underline;
		text-decoration-thickness: 3px;
	}
}
@media (max-width: 768px) {
	header {
		padding: 35px 30px;
	}
	.right {
		position: absolute;
		right: 0px;
		padding-right: 30px;
	}
	.hero {
		padding: 150px 30px;
	}
}
@media (max-width: 1150px) {
	.footer-row {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.right-scroll {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
	.flex-item.fifteen {
		flex-grow: unset;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		width: 30%;
	}
	/* .footer-text {
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	} */
}

/* @media (max-width: 1275px) {
	.img-frame {
		object-fit: cover;
		width: 200;
		height: 500;
	}
} */

@media (min-width: 768px) {
	/* anything you want to kick in at small tablet and above can go here */

	.logo {
		max-width: 215px;
		align-items: center;
	}
	.pale-blue-section {
		background-color: var(--pale-blue);
		margin: 0;
		padding: 120px 56px;
	}
	.blue {
		background-color: var(--pale-blue);
		margin: auto;
		padding: 50px 56px 0px 56px;
	}
	.project-header {
		background-color: var(--pale-blue);
		margin: auto;
		padding: 50px 56px;
	}
	.padding-default {
		padding: 35px 56px;
	}
	.padding-next {
		padding: 35px 56px;
	}
	.hero {
		padding: 180px 56px;
	}
	footer {
		padding: 45px 56px;
	}

	.right {
		position: absolute;
		right: 0px;
		padding-right: 56px;
	}
}

@media (max-width: 1295px) {
	.img-stacked {
		margin-top: -40px;
	}
	.about-margin {
		margin-bottom: 120px;
	}
}

/* @media (min-width: 1295px) {
	.project-header {
		background-color: var(--pale-blue);
		margin: auto;
		padding: 120px 100px;
	}
} */

/* @media (min-width: 1295px) {
	header {
		padding: 35px 100px;
	}
} */
@media (min-width: 1080px) {
	/* anything you want to kick in at large tablet and above can go here */
	header {
		padding: 35px 100px;
	}
	.logo {
		width: 215px;
		align-items: center;
	}
	.pale-blue-section {
		background-color: var(--pale-blue);
		margin: 0;
		padding: 120px 100px;
	}
	.blue {
		background-color: var(--pale-blue);
		margin: auto;
		padding: 80px 100px 0px 100px;
	}
	.project-header {
		background-color: var(--pale-blue);
		margin: auto;
		padding: 80px 100px;
	}

	.padding-default {
		padding: 35px 100px;
	}
	.padding-next {
		padding: 35px 100px;
	}
	.hero {
		padding: 180px 100px;
	}
	footer {
		padding: 45px 100px;
	}
	.right {
		position: absolute;
		right: 0px;
		padding-right: 100px;
	}
}

@media (min-width: 1300px) {
	/* anything you want to kick in at desktop and above can go here */
}