/* CSS for David's Website */

/* Font import 
@font-face {
    font-family: 'funiko';
    src: url('fonts/funiko.woff') format('woff');
}

/* Body default params 
body {
    font-family: 'funiko', sans-serif;
	text-align: center;
}

/* Font assignment 
.custom-font-element {
    font-family: 'funiko', sans-serif;
}

/* Header default params */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	text-align: center;
}

/* Logo default params */
.logo {
    position: fixed;
    top: 0;
    left: 0;
	margin: 4px;
	padding: 4px;
    z-index: 1000;
	width: 100px;
    cursor: pointer;
}

/* Title default params */
.title {
    max-width: 50%;
    display: block;
    margin: auto; /* Center horizontally */
}

/* Grid container default params */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
	max-width: 1440px;
	margin: 0 auto;
    /* gap: 40px; */ /* Shifting to a system where the gap is determined by grid items rather than containers */
    /* padding: 40px; */ /* Shifting to a system where the padding is determined by grid items rather than containers */
}

/* Grid item default params */
.grid-item {
    margin: 2.5%;
	padding: 2.5%;
	z-index: 20;
    position: relative;
}

/* Image or video default params */
.grid-item img, .grid-item video {
    width: 100%;
	max-width: 1600px;
    height: auto;
    transition: transform 0.1s ease, opacity 0.1s ease;
	cursor: pointer;
	opacity: 1;
    transform: translateY(0);
	overflow: hidden;
	visibility: visible;
    /* filter: grayscale(25%); */
}

/* Image or video params when hovering */
.grid-item img:hover, .grid-item video:hover {
    transform: scale(1.1);
	/* filter: grayscale(0%); */
}

/* Hidden grid item params */
.grid-item-hidden {
	margin: 0;
	padding: 0;
    max-height: 0;
	max-width: 0;
	height: 0;
	width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%); /* Start above their final position */
    overflow: hidden;
	z-index: 10;
    position: relative;
}

/* Visible grid item params (for transitioning to a .grid-item equivelant) */
.grid-item-visible {
	z-index: 20;
	max-width: 1600px;
    transition: transform 0.2s ease, opacity 0.4s ease, margin .2s ease, padding .2s ease;
}

/* Footer params */
footer {
    margin-top: 10%;
	font-size: 24px;
}

/* Responsive layout for phones */
@media (max-width: 600px) {
	
	/* Grid container params for phone */
    .grid-container {
        grid-template-columns: 1fr;
    }
	
	/* Grid item params for phone */
	.grid-item img, .grid-item video {
		margin: 0 auto;
		padding: 0;
		width: 100%;
		height: auto;
		transition: transform 0.1s ease, filter 0.1s ease;
		filter: grayscale(0%);
	}
	
	/* Title params for phone */
	.title {
		max-width: 70%;
		align-items: center;
	}
}

/* Visually hidden but accessible (for SEO helper / screen readers) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}