*
	{
		box-sizing: border-box;
		font-family: Helvetica, Arial, sans-serif;
	}
header, main, nav, footer, section, article, figure, figcaption, aside
	{
		display: block;
	}
/*End of universal and compatible code*/

#wrapper
	{
		width: 90%;
		margin: auto;
	}

/*-----------------------
  Flexbox spacing for nav
-------------------------*/
.navul
	{
		display: flex;
		justify-content: space-around;
		padding: 0;
	}
nav li
	{
		list-style-image: url('images/pawprint.png');
	}
nav a
	{
		text-decoration: none;
		color: #000;
		font-size: 3em;
	}
/*----
FILTER
------*/
nav:hover
	{
		filter: drop-shadow(5px 5px 5px #666);
	}
/*End of Nav*/
h1
	{
		text-align: center;
		font-size: 5em;
	}
/*-------
TRANSFORM
---------*/	
h1:hover
	{
		transform: scale(1.2, 1.2);
	}
/*--------
TRANSITION
----------*/
img
	{
		max-width: 100%;
		width: auto;
		height: auto;
		transition: padding 0.5s ease;
		padding: 0;
	}
img:hover
	{
		padding: 2em;
	}
#svgpaw
	{
		padding: 0;
	}
/*-----------
SVG ANIMATION
-------------*/
@keyframes move {
	0% {
		transform: translate(0, 0);
		}
	25% {
		transform: translate(50px, -50px) rotate(-10deg);
		}
	50% {
		transform: translate(-50px, -75px) rotate(10deg);
		}
	75% {
		transform: translate(75px, -100px) rotate(-20deg)
	}
	100% {
		transform: translate(-50px, -150px) rotate(10deg);
		}
	}
#svgpaw
	{
		animation: move 10s linear infinite;
	}

/*--------
TRANSITION
----------*/
#mainimg
	{
		transition: opacity 1s ease-out;
		opacity: 1;
	}
#mainimg:hover
	{
		opacity: 0.5;
	}
/*-------
TRANSFORM
---------*/
#mainimg:active
	{
		transform: skew(10deg);
	}
aside
	{
		font-size: 1.5em;
		line-height: 3.5em;
		color: #013869;
	}
/*----
FILTER
------*/
aside:hover
	{
		filter: saturate(5);
	}
/*-------------
CSS Grids setup
---------------*/
.grid
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
.one
	{
		grid-column: 1;
		grid-row: 1/2;
	}
.two
	{
		grid-column: 2/4;
		grid-row: 1/2;
	}
/*---------------------
Grids setup for gallery
-----------------------*/
.galgrid
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-rows: minmax(20vw, 20vw);
	}
.gal1
	{
		grid-row: 1;
		grid-column: 1;
	}
.gal2
	{
		grid-row: 1;
		grid-column: 2;
	}
.gal3
	{
		grid-row: 1;
		grid-column: 3;
	}
.gal4
	{
		grid-row: 2;
		grid-column: 1;
	}
.gal5
	{
		grid-row: 2;
		grid-column: 2;
	}
.gal6
	{
		grid-row: 2;
		grid-column: 3;
	}
.gal7
	{
		grid-row: 3;
		grid-column: 1;
	}
.gal8
	{
		grid-row: 3;
		grid-column: 2;
	}
.gal9
	{
		grid-row: 3;
		grid-column: 3;
	}
/*--------------------------
End of CSS grids for gallery
----------------------------*/
#gallery:hover
	{

	}
#gallery img
	{
		object-fit: cover;
		width: 100%;
		height: 20vw;
	}
footer
	{
		margin-top: 1vw;
		text-align: center;
	}
footer a
	{
		color: #000;
	}
footer a:hover
	{
		font-weight: bold;
		text-decoration: none;
	}
@media only screen and (max-width: 64em)
	{
		aside
			{
				font-size: 1em;
				line-height: 2em;
				margin-top: 2em;
			}
		#mainimg
			{
				width: 50vw;
				margin-top: 2em;
			}
	}
@media only screen and (max-width: 37.5em)
	{
		#wrapper
			{
				width: 95%;
			}
		h1
			{
				font-size: 2em;
			}
/*----------------------------------------------
  Flex grid reordering of Nav with media queries		
------------------------------------------------*/
		.navul
			{
				flex-direction: column;
				align-items: center;
			}
		nav a
			{
				font-size: 2em;
			}
		nav li
			{
				list-style-image: url('images/pawprintsmall.png');
			}
		#gallery img
			{
				width: 100%;
				height: auto;
			}
/*--------------------------------
Grid reordering with media queries
----------------------------------*/			
		.one
			{
				grid-column: 1/3;
				grid-row: 1/2;
			}
		.two
			{
				grid-column: 1/3;
				grid-row: 2/3;
			}
		#mainimg
			{
				width: 100%;
				height: 100%;
				margin-top: 0;
			}
/*---------------------------------------------
Gallery reordering with Grids for media queries
-----------------------------------------------*/
		.galgrid
			{
				grid-template-columns: 100%;
				grid-template-rows: repeat(9, auto);
				grid-gap: 0.5em;
			}
		.gal1
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal2
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal3
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal4
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal5
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal6
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal7
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal8
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
		.gal9
			{
				grid-row-start: auto;
				grid-column-start: auto;
			}
	}