:root {
    /* Font stack */
    --font-futura: "futura-pt", sans-serif;
    --font-poppins: "Poppins", sans-serif;
    
    /* Font sizes */
    --font-size-small: 16px;
    --font-size-medium: 24px;
    --font-size-large: 32px;
    --font-size-xlarge: 40px;

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* SPACING + SIZING */
    --size-xxxsmall: 4px;
    --size-xxsmall: 8px;
    --size-xsmall: 16px;
    --size-small: 24px;
    --size-medium: 32px;
    --size-large: 40px;
    --size-xlarge: 48px;
    --size-xxlarge: 64px;
    --size-xxxlarge: 80px;
    
    /* COLORS */
	--color-text: black;
	--color-link: rgb(168, 166, 161);
	--color-background: white;
	--color-on-image: white;
	
	/* OTHER */
	--debug-border: 1px solid red;
	--month-width: 256px;
	--photo-size: 128px;

	--image-base: var(--size-medium);
	--bird-size: calc(var(--image-base)*3);
	--fox-size: calc(var(--image-base)*8);

	--grid-width: calc(
		(var(--month-width)*3)
		+ 
		(var(--size-small)*2)
		);
		
	/* calculate the negative top margin to make photos overlap based on the photos
	   size and the size of the top and bottom padding on the photo frame */
	--photo-overlap: calc(-1*(
		(var(--photo-size))
		+ 
		(var(--size-small))
		+
		(var(--size-large))
		)); 
  }

* {
    box-sizing: border-box;
	font-family: var(--font-futura);
    font-variation-settings: "slnt" 0; /* part of Google Fonts */
    /*: var(--debug-border); */
}

body {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    background: var(--color-background);
    color: var(--color-text);
    margin: 0 0 var(--size-xxxlarge) 0;
    padding: 0;
}
  
h1 {
  	font-size: var(--font-size-xlarge);
  	font-weight: var(--font-weight-medium);
  	text-align: center;
  	margin-top: var(--size-xxxlarge);
}

.header, .title, .subtitle, .year, .work, .documentation {
	display: flex;  /* flexbox all the things! */
}

.header {
	background:
		radial-gradient(at 50% 0, #B864E7, transparent 80%), /*purple*/
		radial-gradient(at 0 100%, #EF8A4B, transparent 80%), /*orange*/
		radial-gradient(at 100% 100%, #1AE963, transparent 80%), /*green*/
		url("/images/fox.png"), 
		url("/images/bird.png"); 

	background-size: auto, auto, auto, var(--fox-size) auto, var(--bird-size) auto;
	background-position: top right, top right, top right, bottom left, top var(--size-small) right var(--size-small);
	background-repeat: no-repeat;

	height:256px; 
	width: 100%;
	padding: var(--size-xlarge);
	color: var(--color-on-image);
	flex-direction: column;
	justify-content: space-between;
}

.title {
	flex-direction: row;
	justify-content: space-between;
	font-size: var( --font-size-large);
	font-weight: var(--font-weight-large);
	align-items: baseline;
}

.subtitle {
	flex-direction: row;
	font-family: var(--font-poppins);
	font-weight: var(--font-weight-light);
	font-size: var( --font-size-medium);
}

.home {
	font-family: var(--font-poppins);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-small);
}

.home a {
	color: var(--color-on-image);
	text-decoration: none; 
}

.month {
	font-family: var(--font-futura);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-medium);
	text-align: center;
	width: var(--month-width);
}

.month a {
	color: var(--color-link);
}

/* these are the main sections of the page */
.year, .work, .documentation{
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--size-large) var(--size-small);
	width: var(--grid-width);
	margin: auto;
}

/* parent element for photo stacks */
.stack {
	margin-top: var(--size-small);
	margin-bottom: var(--size-medium);
	display:inline-block; /* this makes it hug child elements */
}

/* put the photo frame on all divs in the photo stacks */
.stack > div {
	display:inline-block; /* this makes it hug child elements */
	background: var(--color-background);
	padding: var(--size-xsmall) var(--size-xsmall) var(--size-large) var(--size-xsmall);
	border: solid 1px var(--color-link);
	width: calc(
		(var(--size-xsmall)*2)
		+
		(var(--photo-size))
	);
}

/* make the images that are in the stack square*/
.stack > div > img {
	width: var(--photo-size);
	height: var(--photo-size);
	object-fit: cover;
}

/* rotate the odd month pictures one way */
.month:nth-child(odd) .stack > div:nth-child(3) {
	transform: rotate(10deg);
	margin-top: var(--photo-overlap); 
}

.month:nth-child(odd) .stack > div:nth-child(2) {
	transform: rotate(-10deg);
	margin-top: var(--photo-overlap);
}

.month:nth-child(odd) .stack > div:nth-child(1) {
	transform: rotate(20deg);
}

/* rotate the even month pictures another way */
.month:nth-child(even) .stack > div:nth-child(3) {
	transform: rotate(-5deg);
	margin-top: var(--photo-overlap);
}

.month:nth-child(even) .stack > div:nth-child(2) {
	transform: rotate(25deg);
	margin-top: var(--photo-overlap);
}

.month:nth-child(even) .stack > div:nth-child(1) {
	transform: rotate(15deg);
}

/* media query for mobile device */
@media only screen and (max-width: 600px) {
	:root {
		--grid-width: var(--month-width);
		--image-base: var(--size-xsmall);
		--photo-size: 192px;
	}
  
	.header {
		padding: var( --size-medium);
		height:128px;
	}
  
	.subtitle {
		font-size: var( --font-size-small);
	}

	.title {
		font-size: var( --font-size-medium);
	}
	
	h1 {
  		font-size: var(--font-size-large);
  	}
}

/* photo gallery styles */

.photos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: var(--size-small);
  margin: 0 var(--size-medium) var(--size-xxxlarge) var(--size-medium);
}

.photos img {
	width: var(--photo-size);
	height:auto;
}