/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;600&family=Roboto+Slab:wght@700&display=swap');

:root {
	--color-lines: hsl(30 30% 60% / 1);
}

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.menu > * {
	pointer-events: none;
}
.frame {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 320px 64px 320px;
	grid-template-columns: 320px 320px;
	-ms-grid-rows: 144px 16px 1fr 16px 32px;
	grid-template-rows: 144px 1fr 32px;
	grid-column-gap: 64px;
	grid-row-gap: 16px;
}
.frame > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}
.frame > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}
.frame > *:nth-child(3) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}
.frame > *:nth-child(4) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}
.frame > *:nth-child(5) {
	-ms-grid-row: 5;
	-ms-grid-column: 1;
}
.frame > *:nth-child(6) {
	-ms-grid-row: 5;
	-ms-grid-column: 3;
}

header	{ -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1 / 1 / 2 / 2; }
nav		{ -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 2 / 1 / 3 / 2; }
main	{ -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1 / 2 / 3 / 3; }
footer	{ -ms-grid-row: 3; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 3 / 1 / 4 / 3; }

body {
	font-family: "Mali", cursive;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 64px 0 0 0;
	background-color: hsl(30 50% 95% / 1);
	border-top: 8px solid var(--color-lines);
}
strong {
	font-family: "Mali", cursive;
    font-weight: 600;
    font-style: normal;
}
a {
	color: #0066FF;
    text-decoration: none;
}
h1 {
	display: none;
}
h2,
nav a {
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-size: 36px;
	margin: 0;
}
nav a {
	display: block;
	color: #000000;
	text-decoration: none;
	border-radius: 4px;
    padding: 0 8px;
}

nav {
	text-align: right;
	margin-bottom: 32px;
}
main {
	margin-top: 16px;
}
footer {
	border-top: 1px solid var(--color-lines);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*///////////////////////////////////////////////////////////////////////////*/

article {
	display: none;
}

body[data-page="index"] article.about,
body[data-page="about"] article.about,
body[data-page="showcase"] article.showcase,
body[data-page="contact"] article.contact {
	display: block;
}

body[data-page="index"] nav a[href="about"],
body[data-page="about"] nav a[href="about"],
body[data-page="showcase"] nav a[href="showcase"],
body[data-page="contact"] nav a[href="contact"] {
	background-color: hsl(30 30% 85% / 1);
}

@media only screen and (max-width: 770px) {
	body {
		padding: 32px;
	}
	main {
		margin-top: 16px;
    	border-top: 1px solid var(--color-lines);
    	padding-top: 16px;
	}
	nav {
		text-align: center;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	    -webkit-box-pack: space-evenly;
	        -ms-flex-pack: space-evenly;
	            justify-content: space-evenly;
	    -webkit-column-gap: 16px;
	       -moz-column-gap: 16px;
	            column-gap: 16px;
	    margin-bottom: 0;
	}
	.frame {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	    -ms-flex-direction: column;
    	        flex-direction: column;
		width: 100%;
		padding-bottom: 128px;
	}
}