/* Variables */
:root {
	--white: #fff;
	--black: #000;
	--red: #FF0000;
	--smoke: #eee;
	--charcoal: #333;
	--accent: #0080FF;
}

/* DEFAULTS */

/* Cancel out some differences between browser defaults */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
}
 
* {
    box-sizing: border-box;
}


/* LAYOUT */

/* The default layout (before any media queries take effect) is a single-column
   layout with the principal structural elements as blocks in normal flow. That
   is: the header, main, and aside are allowed to take their normal positions
   one after the other down the window. We don't need a grid or other layout CSS
   for this - it is default behaviour. */
   
body {
	padding-top: 4em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	min-height: 100svh;
}

/* TYPOGRAPHY */

body {
	font-family: sans-serif;
}

#footer ul, #aside ul {
	list-style-type: none;
}

.align-right {
	text-align: right;
}

/* IMAGES */

img {
    /* Images are forced to fit the size of the box (element) they are in. */
    width: 100%;
}

/* OTHER */
header {
	margin-bottom: 2em;
}

.highlight {
	color: var(--accent);
}

.page-title {
	padding-top: 0.5em;
	margin-bottom: 2em;
}

.menu {
	display: flex;
	font-weight: 800;
	font-size: 2rem;
    line-height: 2.25rem;

	& a, & a:link, & a:visited, & a:active {
		text-decoration: none;
		color: var(--black);
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		border: 4px solid transparent;
	}
	& a:hover {
		color: var(--accent);
	}
	
	& #contact {
		margin-left: auto;
		padding-right: 0;
	}
}

.contact {
	cursor: pointer;
}

#logo {
	color: var(--accent);
	border: 4px solid #000;
	border-radius: 0.375rem;
}

.items {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1em;
	margin-bottom: 0.5em;

	& .item {
		flex: 100%;
		background-color: var(--white);
		color: var(--accent);
		max-height: 40em;
		margin-bottom: 2em;
		border: 0.325em solid var(--black);
		border-radius: 0.5rem;
		cursor: pointer;

		& .item-image {
			height: 30em;
			background-size: cover;
			background-repeat: no-repeat;
		}
		& .nzsi-image {
			background-image: url(/img/nzstringedinstruments-kelvinmouat-link-1024x768desktop-a87258.png);
		}
		& .tool-image {
			background-image: url(/img/tool-kelvinmouat-link-1024x768desktop-9383e7.png);
		}
		& .math-image {
			background-image: url(/img/maths-kelvinmouat-link-1024x768desktop-58de34.png);
		}
		& .item-description {
			padding: 1em;
			border-top: 0.0625em solid var(--black);
			
			& .item-caption {
				text-align: left;
				margin-top: 0.25em;
			}
		}
		& .item-link:link,
		& .item-link:visited {
			text-decoration: none;
			color: inherit;
		}
	}
	& .item:hover {
		color: var(--accent);
		box-shadow: 0 0.4rem 1.4rem rgba(0,0,0,0.6);
	}
}

footer {
	margin: 2em 0;
	text-align: right;
	font-size: 0.75em;
	padding: 1em;

	& .contact {
		text-decoration: underline;
	}
}

.block-bots {
	display: none;
}

#contact_me {
	display: none;
	z-index: 1;
	position: fixed;	
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2000;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.7);
	padding-top: 9em;	
	
	& .modal-content {
		width: 94vw;
		height: 90vh;
		max-height: fit-content;
		max-width: fit-content;
		position: relative;
		overflow: hidden;
		border-radius: 8px;
		margin: 0 auto;
		background-color: var(--white);
		box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 1);
		display: flex;
		flex-direction: column;

		-webkit-animation-name: slide_top;
		-webkit-animation-duration: 0.4s;
		animation-name: slide_top;
		animation-duration: 0.4s;

		& .modal-header {
			color: #ffffff;
			background-color: var(--accent);
			display: grid;
			padding-left: 0.75em;
			align-items: center;
			grid-template-columns: auto 1.75em;
			height: 2.5em;
			font-size: 1.25em;
			
			& .modal-close {
				color: var(--white);
				align-items: center;
				justify-content: center;
				font-size: 1.75em;
				font-weight: bold;
				cursor: pointer;
			}

			& .modal-close:hover,
			& .modal-close:active {
				color: var(--red);
			}
		}
		
		& .modal-body {
			padding: 0.5em;
			font-size: 1.75em;
			
			& img {
				width: auto;
				height: 1.2em;
				vertical-align: bottom;
				margin-top: 0.25em;
			}
		}
	}
}

footer {
	color: var(--white);
	background-color: var(--accent);
	padding: 0.5em;
}

@-webkit-keyframes slide_top {
  from {top:-18.75em; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes slide_top {
  from {top:-18.75em; opacity:0}
  to {top:0; opacity:1}
}

@media screen and (min-width: 68em) {
    
    /* Page grid
    
    Create a four-column grid:
    1. The first column allows for white space to the left of the main content.
    2. The second column contains the main content.
    3. The third column contains the two sidebars (#1 above #2).
    4. The fourth column allows for white space to the right of the sidebars.
    
    The header, main menu, and footer are the full width of the window (spanning all 
    four columns). This can be altered by changing their grid-column values.
    
    The height of the fourth row will be flexible, so that sidebar #1 will have its
    content's height and sidebar #2 can increase its height if needed. The need
    for this arises if the main element has more height than the two sidebars
    combined.    */

    body {
        display: grid;
        grid-template-columns: 1fr 64rem 1fr;
        grid-template-rows: min-content min-content min-content 1fr min-content;
        grid-template-areas: ".		header		."
                             ".		menu		."
                             ".		main		."
                             ".		footer		.";
        column-gap: 1rem;
		padding-left: 0;
		padding-right: 0;
    }
    
    header {
        grid-area: header;    
    }
    
    main {
        grid-area: main;
    }
    
    footer {
        grid-area: footer;
    }
	
    main {
        /* Override the max-width set above for single-column layout. */
        max-width: 100%;
    }
    
    /* End of page grid */

	.menu {
		font-size: 1.875rem;
	}

	.items {
		display: flex;
		flex-wrap: wrap;
		row-gap: 1em;
		column-gap: 1em;

		& .item {
			flex: 49%;
			max-width: 49%;
			margin-bottom: 0.25em;
			color: var(--black);

			& .item-image {
				height: 20em;
			}
		}

		& .item:hover {
			color: var(--accent);
			box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
		}
	}
	
	footer {
		font-size: 1em;
		padding: 0.5em;
	}

} /* end - media 68em */