@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
	background-color:rgb(253, 253, 253);
	padding:0;
	margin:0;
	font-family:"Inter", serif;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
}

* {
	box-sizing: border-box;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/**
NAVIGATION
**/

#navigation {
	position: fixed;
    width: 14em;
	height: 100%;
	padding: 1em;
	background-color: #cfd8dc;
}

#navigation #logo {
	background-color: #607d8b;
	padding:2em;
	border-radius:2em;
	margin-bottom:1em;
}

#navigation #logo h1 {
	margin:0;
	margin-bottom:5px;
	padding:0;
	font-size:1.5em;
	line-height:1;
	font-weight:800;
	color:#fff;
    font-style: italic;
    text-transform: uppercase;
}

#navigation #logo p.tagline {
	color:#fff;
	font-size:14px;
	margin:0;
	padding:0;
	font-weight:300;
    text-transform: uppercase;
}

/**/

#navigation #menu {
	border-radius:5px;
	list-style-type:none;
	margin:0;
	padding:0;
}

#navigation #menu a {
	text-decoration:none;
}

#navigation #menu li {
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:0.5em;
	color:rgb(88, 88, 96);
	transition: background-color 0.25s linear;
	cursor:pointer;
	border-radius:1em;
}

#navigation #menu li:hover {
	/*background-color:#f3d3ff;*/
	background-color:hsl(172deg 66.13% 84.67%);
}

#navigation #menu a.active li {
	background-color:rgb(240, 240, 245);
}

#navigation #menu li .material-symbols-outlined {
	display:block;
	text-align:center;
	font-size:32px;
}

#navigation #menu li .link {
	display:block;
	line-height:25px;
	vertical-align:middle;
	font-size:15px;
	font-weight:300;
	text-align:center;
}


/**
GENERIC MAIN CLASSES
**/

main {
	max-width:1000px; /* TODO: Temporary - make design center-aligned */
	margin-left:14em;
	margin-right:1em;
	padding-left:1em;
	padding-right:1em;
	padding-top:1em;
}

main section {
	margin-bottom:4em;
}

main section h2 {
	font-style:italic;
	text-transform:uppercase;
	font-size:3em;
	margin-top:0;
	margin-bottom:0.5em;
}

main section p {
	font-size:1.25em;
}

/**
SPECIFIC MAIN CLASSES
**/

main section#about {
	display:grid;
	grid-template-columns: 75% 25%;
	grid-template-rows: 50% 50%;
	gap: 1em;
	color:#fff;
}

main section#about .about-left-box {
	background-color:#4d575e;
	color:#fff;
	border-radius:1em;
	grid-row: 1 / 3;
	padding:1em 2em;
}

main section#about .about-top-right-box {
	border-radius:1em;
	background-image:url('images/portrait.jpg');
	background-size:cover;
	background-position:center;
}

main section#about .about-bottom-right-box {
	border-radius:1em;
	background-image:url('images/wellington.jpg');
	background-position:top;
	background-size:cover;
}

main section#about h2 {
	margin-bottom:0;
}

main section#about .pink-highlight {
	background-color:#fabdda;
	color:#000;
	padding-left:0.33rem;
	padding-right:0.33rem;
}

main section#about .purple-highlight {
	background-color:#f3d3ff; 
	color:#000;
	padding-left:0.33rem;
	padding-right:0.33rem;
}

/* */

main section#portfolio .portfolio-container {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:1em;
}

main section#portfolio .portfolio-box {
	aspect-ratio: 1;
	border-radius:1em; 
	background-position:center;
	background-repeat:no-repeat; 
}

/* */

main section#contact {
	margin-bottom:8em;
}

main section#contact .contact-container {
	display:grid;
	grid-template-columns:1fr;
	gap:1em; 
}

main section#contact .contact-box {
	background-color:#4d575e;
	border-radius:1em;
	color:#000;
	padding:2em;
}

main section#contact h3 {
	margin-top:0;
	margin-bottom:0.5em;
	color:#fff;
	font-size:1.25em;
}

main section#contact p {
	margin-top:0.5em;
	margin-bottom:0;
	color:#fff;
}

main section#contact p a {
	color:#fff;
}


#end {
	font-style: italic;
    text-transform: uppercase;
    background-color: hsl(172deg 66.13% 84.67%);
    border-radius:5px;
    padding:1em; 
    margin-bottom:1em;
}

#end p {
	margin:0;
	padding:0;
}





/* */

@media all and (max-width: 900px) {
	#navigation {
	    width: 100%;
		height: auto;
		position: relative;
	}

	#navigation #logo {
		display: inline-block;
		width:152px;
		padding: 1em;
		margin-bottom:0; 
		margin-right: 1em;
	}

	#navigation #menu {
		display: inline-block;
		vertical-align: top;
	}

	#navigation #menu li {
        display: inline-grid;
        align-items: center;
        padding: 1em;
		height: 102px;
		margin-bottom: 0;
	}

	main {
		margin-left:1em;
	}
}



@media all and (max-width: 767px) {
	main section#about {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
	}

	main section#about .about-left-box {
        grid-row: auto;
        grid-column: span 2;
        order: 3;
	}

	main section#about .about-top-right-box {
		height: 300px;
	}

	main section#about h2 {
		font-size:2.5em;
	}

	main section h2 {
		font-size:2.5em;
	}
}

@media all and (max-width:637px) {
	main section#portfolio .portfolio-container {
		grid-template-columns:1fr 1fr;
	}
}

@media all and (max-width:470px) {
	#navigation #logo {
		width:100%;
		padding-left: 2em;
	}

	#navigation #menu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
		width: 100%;
		margin-top: 0.5em;
	}

	#navigation #menu li {
		width: 100%;
		height: auto;
	}

	main section#about .about-left-box {
		padding:1em;
	}

	main section#contact .contact-box {
		padding:1em;
	}
}