* {
	background: #ffffff;
	box-sizing: border-box;
	font-family: 'Courier New', Courier, monospace, sans-serif;
}

a {
	background-color: rgba(255, 255, 255, 0);
	color: #000;	
	font-display: normal;
}
	a:active {
		text-decoration:wavy;
	}

	a:hover {
		color: #327c11;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

article {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	width: 75%;
}

aside {
	align-content: space-around;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    width: 50%;
}

figure {
	align-items: center;
	display: flex;
	justify-content: center;
}

h4 {
	background-color: rgba(255, 255, 255, 0);
	color: #327c11;
}

	h4:hover {
		color:#000;
	}

header {
	align-items: center;
    display: flex;
	justify-content: center;
	height: 100%;
    width: 100%;
	max-height: 100%;
	max-width: 100%;
}

html,
body {
	height: 100%;
	height: 100vh;
	height: -webkit-fill-available;
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

main {
	align-items: center;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	flex-grow: 1;
	grid-area: main;
	height: 100%;
	justify-content: center;
	margin:0;
	max-width: 100%;
	text-align: justify;
}

nav {
	align-content: space-between;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
}

	/*
	nav a {
		align-items: center;
		display: flex;
		justify-content: center;
		width: 100%;
	}
	*/

p {
	font-size: 0.8rem;
	font-weight: normal;
	text-align: justify;
	text-justify: inter-word;
	width: 50%;
}

section {
	margin: 2vmin;
    margin-bottom: 6vmin;
	padding-top: 2vmin;
	text-align: justify;
  	text-justify: inter-word;
	width: 70%;
}


ul {
	list-style: none;
	padding: 0;
	text-align: center;
	text-justify: inter-word;
}

	li {
		font-size: 1rem;
		margin-bottom: 2vmin;
	}

/* || Classes || */

.wrapper {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	grid-template-areas:
		'header'
		'main'
		'footer';
	min-height: 100vh;
	height: -moz-available;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
	width: 100%;
}

.wrapper>* {
	padding: 0;
}

	/* || Images || */

	.img__artist {
		padding-bottom: 2vmin;
		width: 25%;
	}

	.img__artist--landscape {
		width: 40%;
	}

	.img__artist--portrait {
		width: 25%;
	}

		.img__artist--portrait-2 {
			width: 30%;
		}

	.logo {
		max-height: 100%;
		max-width: 40%;
	}

	.nav__logo {
		border: 0;
		display: flex;
		padding: 0;
		width: 80%;
	}

	/* || Tags || */

	.figure__artist {
		width: 100%;
	}

	.h4__opacity {
		color: #fff;
	}

	.h4__opacity:hover {
		opacity: 0;
	}

	.main__artist {
		height: 100%;
		padding-top: 10vmin;
		text-align: left;
	}

	.main__shows {
		align-items: flex-start;
	}

	.ul__shows {
		padding: 5vmin;    
		text-align: left;
		width: 100%;
	}

/* || @media || */

@media only screen and (max-width: 576px) {
	a {
        width: 100%;
    }
	
	article {
		width: 100%;
	}
	
	aside {
		width: 100%;
	}

	p {
		width: 100%;
	}

	nav {
		padding: 0;
	}

	/* || Classes || */

	.main__artist {
		padding: 5vmin;
		padding-top: 10vmin;
	}

	/* || Images || */

	.img__artist {
		width: 80%;
	}

	.img__artist--landscape {
		width: 90%;
	}

	.img__artist--portrait {
		width: 70%;
	}

		.img__artist--portrait-2 {
			width: 70%;
		}

	.logo {
		max-width: 40%;
	}

	.nav__logo {
        width: 70%;
    }
}