/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ==== END OF MEYER RESET ==== */

/* + + + + + + CONTENTS + + + + + + 
1. General Layout & Shared Styling 
2. Header
3. Footer
4. Typography
5. Links
6. Individual Sections
7. 404 Error
8. Media Queries
*/


/* ==== 1. GENERAL LAYOUT & SHARED STYLING ==== */

/* CUSTOM CSS COLOURS FOR DEFAULT LIGHT THEME */
:root {
	--default: #5f5b59;
    --links: #0a7083;
    --main-bg: #fef6f0;
    --headings: #d5490b;
}

body {	
	box-sizing: border-box;
	font-family: 'Outfit', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 1.3em;
	line-height: 1.4;
	color: var(--default);
	background-color: var(--main-bg)
}

/* container div */
div {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

/* section margins */
section {
	margin: 2.5em 0 0;
	padding-bottom: 2.5em;
}

/* section background gradients */
section:first-of-type, section:nth-of-type(2) {
	background-image: linear-gradient(#bff7ed, #fddbc7);
}

/* para alignment */
header > p, section > p, section div div p, .error p {
	width: 80%;
	max-width: 900px;
	margin: 1.5em auto 0;
}

/* section & Work section rounded corners */
section, section:first-of-type ul li {
	border-radius: 25px;
}

/* ==== 2. HEADER ==== */

/* THEME SWITCHERS */
#themeselect {
	display: flex;
	justify-content: flex-end;
	padding: 0.2em 0 0.5em;
	font-size: 1.1em;
	margin: 0 auto;
}

/* hide radio button input */
#themeselect fieldset input {
	display: none;
}
/* style label */
#themeselect fieldset input + label {
	display: inline-block;
	margin: 12px 1em 0 0;
	/* position: relative; */
	text-decoration: none;
	padding: .3em .6em;
	text-align: center;
	color: var(--main-bg);
	font-size: 0.8em;
	background-color: var(--default);
	border-radius: 25px;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#themeselect fieldset input:hover + label {
	background-color: var(--links);
}

/* show currently active switch */
#themeselect fieldset input:checked + label {
	background-color: var(--headings);
}

/* PRIMARY NAVIGATION */

nav[aria-label="Primary"] {
    background-color: var(--headings);
	border-radius: 25px;
}

nav[aria-label="Primary"] ul {
    display: flex;
    justify-content: space-around;
	flex-wrap: wrap;
    width: 80%;
	padding: 0.5em 0;
    margin: 1em auto 0;
}

nav[aria-label="Primary"] ul li a:link, nav[aria-label="Primary"] ul li a:visited {
	color: var(--main-bg);
	font-size: 1.4em;
	padding: 1em;
}

/* Header contact links */
header address a:link, header address a:visited {
	display: block;
	text-align: center;
	padding-top: 1em;
}

/* Header social links icons */
header > ul {
	display: flex;
	width: 80%;
	margin: 0 auto;
	justify-content: center;
}

header > ul li {
	margin: 1.5em;
}
 
i {
	font-size: 2em;
	color: var(--links);
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

i:hover {
	color: var(--headings);
}

/* ==== 3. FOOTER ==== */

footer {
	margin-top: 1.5em;
}

/* footer nav */
footer nav[aria-label="Secondary"] ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.2em;
}

footer nav[aria-label="Secondary"] ul li {
	margin: 1em 1em 0;
}

/* copyright */
footer p {
	font-size: 0.8em;
	margin: 1.5em 0;
	text-align: center;
}

/* ==== 4. TYPOGRAPHY ==== */

h1, h2, h3, h4 {
	font-family: 'Arvo', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-weight: 600;
}

h1, h2, h3 {
	color: var(--headings);
}

h1 {
	font-size: clamp(2.3em, 80vw, 3.5em);
	text-align: center;
}

h2 {
	font-size: clamp(1.8em, 6vw, 2.5em);
	text-align: center;
	padding-top: 1em;
}
	
h3 {
	font-size: clamp(1.5em, 6vw, 2em);
	margin-top: 1.4em;
}

h4 {
	font-size: clamp(1.2em, 6vw, 1.5em);
	margin-top: 1em;
}

/* ==== 5. LINKS ==== */

a:link, a:visited {
	color: var(--links);
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

a:hover, a:focus, a:active {
	color: var(--headings);
}

/* ==== 6. INDIVIDUAL SECTIONS ==== */

/* WORK SECTION */

section:first-of-type ul {
	margin: 1.5em auto 0;
}

/* individual Work cards */
section:first-of-type ul li {
	background-color: var(--main-bg);
	margin: 2em auto 0;
	width: 65%;
	max-width: 400px;
	padding: 1.5em;
	box-shadow: 0px 12px 24px 3px rgba(0, 0, 0, 0.45);
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/* Work card hover transform */
section:first-of-type ul li:hover {
	transform: scale(1.1);
}

/* remove link styling on Work cards */
section:first-of-type ul li a:link, section:first-of-type ul li a:visited {
	display: block;
	text-decoration: none;
	margin: 0 auto;
}

/* Work cards thumbnails */
section:first-of-type ul li a:link img, section:first-of-type ul li a:visited img {
	display: block;
	width: 80%;
	margin: 0 auto;
	height: auto;
}

/* Work cards individual titles */
section:first-of-type ul li a:link h3, section:first-of-type ul li a:visited h3 {
	font-size: 1.2em;
	text-align: center;
	margin-top: 1em;
}

/* Work card descriptions */
section:first-of-type ul li p:first-of-type, section:first-of-type ul li p:first-of-type {
	color: var(--default);
	margin-top: 0.8em;
}

/* Work cards tech used */
section:first-of-type ul li p:nth-of-type(2), section:first-of-type ul li p:nth-of-type(2) {
	color: var(--headings);
	font-style: italic;
	font-size: 0.8em;
	margin-top: 0.5em
}

/* MA COURSEWORK SECTION */

/*checkbox label */
section:nth-of-type(3) label {
	display: block;
	color: var(--main-bg);
	background-color: var(--links);
	border-radius: 25px;
	width: 80%;
	font-size: 1.2em;
	text-align: center;
	margin: 1em auto 0;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

section:nth-of-type(3) label:hover {
	background-color: var(--headings);
}

/* hide checkbox & coursework */
#coursework-toggle, .coursework-list {
	display: none;
}

/* display coursework when toggled */
#coursework-toggle:checked ~ .coursework-list {
	display: block;
	width: 80%;
	margin: 1.5em auto 0;
}

section:nth-of-type(3) div {
	width: 80%;
	margin: 1.5em auto 0;
}

section:nth-of-type(3) div ul {
	margin-top: 0.5em;
}

section:nth-of-type(3) div ul li {
	margin-top: 0.3em;
}

/* recolour coursework links */
section:nth-of-type(3) ul li a:link, section:nth-of-type(3) ul li a:visited  {
	color: var(--default);
}

/* ABOUT SECTION */

/* About image */
section:nth-of-type(2) div figure img {
	display: block;
	width: 80%;
	max-width: 400px;
	height: auto;
	border-radius: 50%;
	margin: 1.5em auto 0;
}

section:nth-of-type(2) div figure figcaption {
	font-style: italic;
	font-size: 0.8em;
	width: 80%;
	max-width: 400px;
	margin: 1em auto 0;
}

/* positioning the CV object */
section:nth-of-type(2) object {
	display: block;
	margin: 2em auto 0;
	max-width: 850px;
}

section:nth-of-type(2) > a:link, section:nth-of-type(2) > a:visited {
	display: block;
	text-align: center;
	margin-top: 1em;
}

/* ==== 7. 404 ERROR PAGE ==== */
.error footer {
	position: absolute;
	bottom: 0;
	width: 80%;
	margin: 1em auto;
}

.error p {
	margin: 1em auto;
}

/* ==== 8. MEDIA QUERIES ==== */

@media (min-width: 750px) {
	/* 2-column grid for Work section */
	section:first-of-type ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	/* placing Header social links in a row */
	header > ul {
		display: flex;
		justify-content: center;
		width: 80%;
		margin: 0 auto;
	}

    /* 3-column grid for Work section */
    section:first-of-type ul {
        grid-template-columns: repeat(3, 1fr);
    }

	/* placing About section img & p div side by side  */
	section:nth-of-type(2) > div {
		display: flex;
		align-items: center;
	}

	section:nth-of-type(2) div img {
		width: auto;
		height: 300px;
	}

	/* resizing CV */
	section:nth-of-type(2) object {
		width: 850px;
	}
}