@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. */

html {
	scroll-behavior: smooth;
	transition: all 3s ease-in-out;

	/* Removes scroll bar */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
	/* Removes scrollbar */
	display: none; /* Safari and Chrome */
}

body {
	margin: 0;
	background-color: var(--offwhite);
}

#wrapper {
	width: 100%;
	height: 100%;
	/* overflow: scroll; */
	/* -webkit-overflow-scrolling: touch; */
}

/* ------------------Style the header---------------- */
header {
	/* vh used to ensure that it will always take up 15% of opening screen */
	height: auto;
	padding: 35px 0 15px;
	background-color: var(--offwhite);
	width: 100%;
	position: fixed;
	z-index: 99;
}

.nav-bar {
	justify-content: space-between;
}

.nav-bg {
	position: absolute;
	width: 100%;
	background-color: var(--offwhite);
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	border-bottom: solid 3px var(--darkpurple);
}

/* ----------Navigation----------- */
nav ul {
	list-style-type: none;
	padding: 0;
}

nav li {
	display: inline;
	padding-left: 50px;
}

nav a {
	text-decoration: none;
	display: inline-block;
	padding: 0.25em 0.5em 0.1em;
}

/* used to align the last element of the nav bar to the margin */
.last-nav {
	padding-right: 0;
}

/* ------------------Hero------------------ */

.hero {
	height: 100vh;
}

/* ------------------Arrows------------------ */

.project-arrow {
	transform: rotate(-90deg);
	width: 6em;
	margin-bottom: 1em;
}

.portfolio-item:hover .project-arrow-link .project-arrow,
.portfolio-item:focus .project-arrow-link .project-arrow {
	animation: pulseRight 5s infinite ease-in-out;
}

.project-arrow-link:hover .right-arrow,
.project-arrow-link:focus .right-arrow {
	animation: pulseRight 5s infinite ease-in-out;
}

@keyframes pulseRight {
	25% {
		transform: translateX(1em) rotate(-90deg);
	}

	55% {
		transform: translateX(-0.2em) rotate(-90deg);
	}

	80% {
		transform: translateX(0) rotate(-90deg);
	}
}

.project-arrow-link:hover .left-arrow,
.project-arrow-link:focus .left-arrow {
	animation: pulseLeft 5s infinite ease-in-out;
}

@keyframes pulseLeft {
	25% {
		transform: translateX(-1em) rotate(90deg);
	}

	55% {
		transform: translateX(0.2em) rotate(90deg);
	}

	80% {
		transform: translateX(0) rotate(90deg);
	}
}

.down-arrow {
	width: 6em;
	padding-bottom: 60px;
}

.lower-arrow-section:hover .down-arrow,
.lower-arrow-section:focus .down-arrow {
	animation: pulseDown 5s infinite ease-in-out;
}

@keyframes pulseDown {
	25% {
		transform: translateY(1em);
	}

	55% {
		transform: translateY(-0.2em);
	}

	80% {
		transform: translateY(0);
	}
}

.lower-arrow-section {
	margin: 0 auto;
}

.left-arrow {
	transform: rotate(90deg);
	width: 3em;
}

.right-arrow {
	transform: rotate(-90deg);
	width: 3em;
}
/* ------------------Portfolio Overview------------------ */

.portfolio-item {
	height: 95vh;
	padding-bottom: 7vh;
	border-bottom: solid 3px var(--offwhite);
	display: block;
}

.portfolio-bgimg {
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.haunted-hotels {
	background-image: url(images/HauntedHotels.jpg);
}

.superflat {
	background-image: url(images/Superflat.jpg);
}

.phobia-magazine {
	background-image: url(images/Dysmorphophobia.jpg);
}

.walrus {
	background-image: url(images/TheWalrus.jpg);
}

.mikes-hard {
	background-image: url(images/MikesHard.jpg);
}

.less-than {
	background-image: url(images/LessThan.jpg);
}

/* ------------------Portfolio Highlight------------------ */

.portfolio-highlight {
	height: 100vh;
	position: relative;
}

.portfolio-display {
	height: 100%;
	width: 60vw;
	position: absolute;
	right: 0;
	overflow-y: auto;
	padding: 18vh 0 0;
	scrollbar-color: var(--darkpurple) var(--offwhite);
}

.portfolio-display img {
	padding-bottom: 3vh;
	width: 100%;
}

/* remove the bottom padding for the last image in the section */
.portfolio-display img:last-child {
	padding-bottom: 0;
}

.portfolio-description {
	padding: 18vh 0 5vh;
	justify-content: space-between;
}

/* ------------------Arrow Navigation------------------ */

.arrows-section {
	border-top: solid 3px var(--darkpurple);
	height: 15vh;
	margin-top: 3em;
}

.arrow-nav {
	justify-content: space-between;
	align-items: center;
}

/* ------------------Contact------------------ */

.contact {
	padding: 125px 0 175px;
}

/* ------------------Footer------------------ */

footer {
	background-color: var(--darkpurple);
	padding: 50px 0;
}

footer i {
	color: var(--offwhite);
	transition: all 300ms;
}

/* top and bottom icon are used to allow for the interaction state where the background colour stays the same and the stroke changes colour */

footer .top-icon {
	color: var(--darkpurple);
}

footer .bottom-icon {
	/* used to make the background square icon larger than the instagram icon */
	font-size: 2.7em;
}

.fa-stack {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

footer .top-icon:hover,
footer .top-icon:focus {
	color: var(--lightpurple);
}

footer .top-icon:active {
	color: var(--blackpurple);
}

fa-stack {
	vertical-align: top;
}

.social-media {
	margin-bottom: 30px;
}

/* //////////////----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. */

@media (max-width: 600px) {
	/* anything you only want applied at mobile sizes can go here */
	.logo {
		width: 2.3em;
	}

	.project-arrow {
		display: none;
	}

	.portfolio-item .row-autowidth {
		display: block;
	}

	.portfolio-item .row {
		flex-wrap: nowrap;
	}

	.portfolio-display {
		overflow-y: visible;
		width: 100vw;
		position: relative;
		padding-top: 0;
	}

	.portfolio-highlight {
		height: auto;
	}

	.portfolio-description {
		height: 90vh;
	}

	.number-outline {
		font-size: 10em;
	}

	/* drop down menu */

	.hamburger {
		/* Adjust these numbers as needed.
	Select your icon font sizes.
	Use enough padding to make your button equal at least 44px by 44px.*/
		border: 0 none;
		background-color: var(--offwhite);
		color: var(--darkpurple);
		/* The rule below helps for user interaction understanding, but still create hover and active states. */
		cursor: pointer;
	}

	.material-icons.menuIcon {
		font-size: 55px;
		padding: 15px 0px 5px;
	}

	.material-icons.closeIcon {
		display: none;
		font-size: 55px;
		padding: 15px 0px 5px;
	}

	.menu {
		position: fixed;
		/* This transform value pulls the menu up out of view. */
		transform: translateY(-75%);
		transition: all 200ms ease-in-out;
		z-index: -2;
		top: 0;
		right: 0;
		/* Adjust all visuals to fit your own design. */
		color: white;
		list-style: none;
		padding-top: 4rem;
		/* removing the top margin */
		margin: 0;
		width: 100%;
	}

	.menu-item {
		padding: 25px 0;
		display: block;
		text-align: center;
		border-bottom: solid 3px var(--darkpurple);
		background-color: var(--offwhite);
	}

	nav li {
		padding: 0;
	}

	.showMenu {
		transform: translateY(55px);
	}

	.down-arrow {
		width: 6em;
		padding-bottom: 80px;
	}

	.portfolio-bgimg {
		background-attachment: scroll;
	}
}

@media (min-width: 601px) {
	.portfolio-bgimg {
		background-attachment: scroll;
	}

	.logo {
		width: 2.2em;
	}

	.hamburger {
		display: none;
	}

	.project-arrow {
		display: none;
	}

	.portfolio-item .row-autowidth {
		display: block;
	}

	.portfolio-item .row {
		flex-wrap: nowrap;
	}

	.portfolio-display {
		overflow-y: visible;
		width: 100vw;
		position: relative;
		padding-top: 0;
	}

	.portfolio-highlight {
		height: auto;
	}

	.portfolio-description {
		height: auto;
	}

	.number-outline {
		font-size: 10em;
	}
}

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

	.portfolio-item .row-autowidth {
		display: flex;
	}

	.portfolio-item .row {
		flex-wrap: wrap;
	}
}

@media (min-width: 1080px) {
	/* anything you want to kick in at large tablet and above can go here */
	.logo {
		width: 2em;
	}
	.project-arrow {
		display: block;
	}
	.down-arrow {
		width: 6em;
		padding-bottom: 60px;
	}

	.portfolio-bgimg {
		background-attachment: fixed;
	}
}

@media (min-width: 1300px) {
	/* anything you want to kick in at desktop and above can go here */
	.portfolio-display {
		overflow-y: scroll;
		width: 60vw;
		position: absolute;
		padding-top: 18vh;
	}

	.portfolio-highlight {
		height: 100vh;
	}

	.portfolio-description {
		height: 100vh;
	}

	.number-outline {
		font-size: 7em;
	}

	.flex-gap-lg .flex-item.one-third {
		width: calc(33.33% - 26.67px);
	}
}

/* HD/Retina CSS - used to display the retina background images when on retina screens*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 144dpi) {
	.haunted-hotels {
		background-image: url(images/HauntedHotels@2x.jpg);
	}

	.superflat {
		background-image: url(images/Superflat@2x.jpg);
	}

	.phobia-magazine {
		background-image: url(images/Dysmorphophobia@2x.jpg);
	}

	.walrus {
		background-image: url(images/TheWalrus@2x.jpg);
	}

	.mikes-hard {
		background-image: url(images/MikesHard@2x.jpg);
	}

	.less-than {
		background-image: url(images/LessThan@2x.jpg);
	}
}