:root {
	--primary-bg: rgba(228,228,228);
	--primary-font: firasans;
	--primary-font-color: gray;
	--primary-font-weight: normal;
	--header-height: 64px;
	--cell-size: 128px;
	--cell-size-large: 256px;
	--viewed-image-height: 512px;
}

@font-face{
	font-family: nimbus;
	src: url(../fonts/NimbusMono-Regular.otf) format("opentype");
}

@font-face{
	font-family: firasans;
	src: url(../fonts/FiraSans-Light.ttf);
}

@font-face{
	font-family: firamono;
	src: url(../fonts/FiraMono-Regular.ttf);
}

@font-face{
	font-family: hack;
	src: url(../fonts/Hack-Regular.ttf);
}

@font-face{
	font-family: zector;
	src: url(../fonts/Zector.otf) format("opentype");
}

body {
	background: var(--primary-bg);
	margin: 0px;
}


/* primary canvas */

.container{
	display: grid;
	justify-content: start;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas: 
		"header header"
		"menu menu"
		"main main"
		"footer footer";
	width: 100%;
}

@media (min-width: 529px) {
	.container {
		grid-template-areas: 
		"header header"
		"menu main"
		"footer footer";
	}
}

header{
	grid-area: header;
	width: 100%;
	height: var(--header-height);
	/* background-color: rgba(0, 0, 0, 0.25); */
}


/* side navigation bar elements */

.side_navigation{
	grid-area: menu;
	display: inline-grid;
	grid-template-columns: auto;
	background-color: rgba(255, 255, 255, 0.0);
	margin: 0px;
	padding: 32px;
	padding-right: 0px;
}

.menu_item{
	font-size: 2rem;
	font-family: var(--primary-font);
	font-weight: var(--primary-font-weight);
	text-decoration: none;
	text-transform: capitalize;
	color: var(--primary-font-color);
	padding-bottom: 2rem;
	padding-right: 7px;
	padding-left: 7px;
}

.menu_item:hover{
	background-color: white;
}

#scale_toggle{
	background-color: rgba(0, 0, 0, 0);
	font-size: 2rem;
	font-family: firamono;
	font-weight: var(--primary-font-weight);
	color: var(--primary-font-color);
	border: none;
	height: 80px;
	width: 80px;
}

#scale_toggle:hover{
	background-color: white;
}


/* Gallery icon grid elements */

.grid_container{
	grid-area: main;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	background-color: rgba(255, 255, 255, 0.0);
	margin: 0px;
	padding: 16px;
}

.cell{
	width: var(--cell-size);
	height: round(up, calc(var(--cell-size)* 1.414), 1px);
	margin: 16px;
	transition-duration: 0.3s;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;
	opacity: 1;
}

.thumbnail{
	display: inline-block;
	background-image: none;
	background-color: rgba(0,0,0,0.25);
	background-size: cover;
	background-clip: content-box;
	background-repeat: no-repeat;
	opacity: 1;
	width: 100%;
	height: 100%;
}

/* main item listing elements */

.content{
	grid-area: main;
	display: grid;
	padding: 16px 16px 16px 16px;
}

.image_container{
	background-color: rgba(255,255,255,0.5);
	height: var(--viewed-image-height);
}

.artwork{
	object-fit: contain;
	object-position: 0% 0%;
	max-width: 100%;
	opacity: 1;
	padding-bottom: 32px;
	transition-duration: 0.2s;
	transition-timing-function: linear;
	transition-delay: 0s;
	margin: auto;
}

footer{
	grid-area: footer;
	height: 100px;
}

#t1{
	background-image: url(../images/UglaRef.jpg)
}

#t2{
	background-image: url(../images/400575305_1663881524099104_5261170734796220707_n.jpg);
}

#t3{
	background-image: url(../images/DSC08917.JPG)
}

#t4{
	background-image: url(../images/DSC08938.JPG)
}

#t5{
	background-image: url(../images/DSC08945.jpg)
}

#t6{
	background-image: url(../images/DSC08976.jpg)
}

#t7{
	background-image: url(../images/DSC09204.jpg)
}

#t8{
	background-image: url(../images/DSC09242.jpg)
}

#t9{
	background-image: url(../images/DSC09361.jpg)
}

#t10{
	background-image: url(../images/DSC09377.jpg)
}