@charset "utf-8";

/*
Author:   Kevin Viren 
Date:     12/8/2023
Modified: 12/11/2023

Filename: ky_styles.css

Main stylesheet for Ky Viren's art portfolio website.

*/


/* FONT FAMILY STYLES */

@font-face {
	font-family: 'Hedvig Letters Serif';
	src: url( 'fonts/hedvigLettersSerif.ttf' ) format( 'truetype' );
}

@font-face {
	font-family: 'Roboto Slab';
	src: url( 'fonts/robotoSlab.ttf' ) format( 'truetype' );
}

@font-face {
	font-family: 'Hedvig Letter Sans';
	src: url( 'fonts/hedvigLettersSans.ttf' ) format( 'truetype' );
}

h1 {
	font-family: 'Hedvig Letters Serif', serif;
}

h2, h3 {
	font-family: 'Roboto Slab', serif;
}

p {
	font-family: 'Hedvig Letter Sans', sans-serif;
}


/* DIMENSIONS */ 

img#banner {
	width: 100%
}

div.topDiv img {
	width: 200px;
}

div.gallery img {
	height: 275px;
}

img#lHandSpot, img#rHandSpot, img#heartSpot {
	width: 150px;
}

footer img {
	width: 40px;
}

header, footer {
	width: 100%;
}

header {
	height: 15.5em;
}

article {
	padding: 25px;
	margin: 0px auto;
}

nav ul li:nth-of-type(4) {
	padding-right: 15px;
}

div.gallery {
	padding-top: 10px;
}

div {
	margin-bottom: 30px;
}

h1, h2 {
	text-align: center;
}

h1#mapHeader {
	padding-top: 30px;
}

p {
	font-size: 1.1em;
}

div#p1d3 p {
	font-size: 1.35em;
}

div.topDiv img + p {
	font-size: 1.3em;
}

footer li {
	font-size: 0.8em;
}

dl {
	padding-left: 50px;
	font-size: 1.1em;
	line-height: 1.8em;
}

figcaption {
	text-align: center;
}

video {
	width: 100%;
}


/* VISUAL STYLES */

html {
	background: black;
	height: 100%;
}

body {
   background: rgb(191, 195, 201);   
   margin: 0px auto;
   min-height: 100%;
   min-width: 320px;
   max-width: 1024px;
   width: 100%;
}

header {
	background: rgb(30, 30, 30);
}

footer {
	height: 60px;
	background: linear-gradient(rgb(10, 10, 10) 15%, rgb(15, 15, 15) 23%, rgb(30, 30, 30));
	opacity: 0.9;
	padding: 20px 25px;
	border-top: 4px solid black;
}

a {
	color: #042EBA;
}

nav a, footer div a, footer div p {
	color: #EEEEEE;
}

nav ul li {
	list-style: none;
}

div.topDiv {
	box-shadow: rgb(50, 50, 50) 5px 5px 20px, rgb(50, 50, 50) -5px -5px 20px;
}

a {
	text-decoration: none;
}


footer p a, footer a {
	color: rgb(92, 176, 255);
}

a:hover {
	color: rgb(222, 11, 11);
}

ol {
	color: #EEEEEE;
}

audio, video {
	filter: drop-shadow(10px 10px 18px rgb(50, 50, 50));
}


/*Transform/filter styles */

div.gallery img:hover:not(.aboutImg), img#depp:hover {
	transform: scale(1.5, 1.5);
	filter: drop-shadow(10px 10px 5px black);
}

img#lHandSpot, img#rHandSpot, img#heartSpot {
	filter: saturate(.5);
}


/* FLEX STYLES */

body {
	display: flex;
	flex-flow: row wrap;
}

nav ul, div.topDiv, footer div, div#aboutBottom {
	display: flex;
	flex-flow: row wrap;
}

nav ul li {
	flex: 1 1 17%;
}

div.topDiv img {
	flex-grow: 0;
	flex-shrink: 0;
}

div.topDiv p {
	flex: 1 1 0px;
	padding: 20px 15px;
}

footer div a {
	flex: 1 1 15%;
}
	
footer div p {
	flex: 1 1 35%;
}


/* @MEDIA */

@media screen and (max-width: 480px) {
	
	section#imageMap {
		display: none;
	}
}

@media screen {
	
	table {
		display: none;
	}

}