@font-face {
    font-family: 'Manrope';
    src: url("/Manrope-Regular.woff2") format("woff2");
}

@font-face {
    font-family: 'Manrope';
    src: url("/Manrope-Bold.woff2") format("woff2");
    font-weight: 800;
}

/* normalise section */
* {
	margin: 0;
	padding: 0;
}

/* core/elements section */
:root {
	--white: #ffffff;
	--text: #2c2c2c;
	--faded-text: #5c5c5c;
	--light-fade: #eeeeee;
	--accent: hsl(195, 40%, 45%);
}

html, body {
    font-family: 'Manrope', sans-serif;
	font-size: 18px;
    scroll-behavior: smooth;
    transition: .5s;
	color: var(--text);
	line-height: 1.7;
	background: linear-gradient(to top, rgb(240, 240, 240) 0%, rgb(255, 255, 255) 65%, rgb(255, 255, 255) 100%);
}

@media only screen and (max-width: 1024px) {
	html, body {
		font-size: 16px;
	}
}

body {
	border-top: 6px solid var(--accent);
	/* linear-gradient(to bottom right, var(--accent-highlight), var(--accent)); */
	/*
	 * --accent-highlight: hsl(200, 86%, 80%);
     * --accent: hsl(204, 86%, 60%);
	 */
}

section {
	margin: 48px 0;
}

h1, h3, h4 {
	line-height: 1.1;
	margin: 24px 0;
}

h3, h4 {
	line-height: 1.4;
}

ul header {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 12px 0;
}

p {
	max-width: 40em;
	margin-bottom: 12px;
}

li {
	max-width: 16em;
}

.btn {
	font-weight: 800;
	display: inline-block;
	border: 2px solid var(--faded-text);
	border-radius: 8px;
	padding: 12px 24px;
	margin: 24px 0;
	color: var(--text);
	text-decoration: none;
	transition: .5s;
}

.btn:hover {
	background-color: var(--light-fade);
}

main {
	margin: 0 auto;
	max-width: 1440px;
	padding: 96px;
	ul { /* cards */
		display: flex;
		gap: 24px;
	}
}

@media only screen and (max-width: 1024px) {
	main {
		padding: 24px;
		ul {
			flex-direction: column;
		}
	}
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	a {
		color: var(--text);
		text-decoration: none;
		transition: .3s;
	}
	a:hover {
		color: var(--faded-text);
	}

}

h1 {
	font-size: 48px;
	max-width: 15em;
	font-weight: 800;
}

h3 {
	font-size: 32px;
	max-width: 15em;
	font-weight: 800;
}

h4 {
	font-size: 20px;
	font-weight: 400;
	max-width: 30em;
	color: var(--faded-text);
}

h5 {
	font-size: 18px;
}

@media only screen and (max-width: 1024px) {
	h1 {
		font-size: 40px;
	}

	h3 {
		font-size: 28px;
	}

	h4 {
		font-size: 20px;
	}
}

ul {
	list-style: none;
}

svg.icon {
	color: var(--accent);
	width: 32px;
	height: 32px;
}

.projects ul {
	flex-direction: column;
	img {
		max-width: 100%;
	}
	li {
		max-width: 48em;
	}
}

.start {
	display: flex;
	align-items: center;
	gap: 48px;
	
	header {
		max-width: 30em;
	}
}

@media only screen and (max-width: 1024px) {
	.start {
		flex-direction: column;
		align-items: start;
		gap: 24px;
	}
}

form {
	display: flex;
	flex-direction: column;

	input, select {
		margin-bottom: 24px;
		background: var(--white); 
		border: 1px solid var(--light-text);
		border-radius: 8px;
		padding: 8px 16px;
		font-size: 16px;
	}
}

@media only screen and (max-width: 1024px) {
	form {
		width: 100%;
		select, input[type=submit] {
			width: 100%;
		}
		input {
			width: calc(100% - 32px);
		}
	}
}

/* utilities section */
.fadeIn {
	/* roll into single line */
	animation: fadeInAnimation ease-in .3s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.fadeSecond {
	animation-delay: .1s;
}

.fadeThird {
	animation-delay: .2s;
}

.fadeFourth {
	animation-delay: .3s;
}

.fadeFifth {
	animation-delay: .4s;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
		transform: translate(0px, 16px);
    }
    100% {
        opacity: 1;
		transform: translate(0px, 0px);
    }
}