* {
    box-sizing: border-box;
}

html { 
	scroll-behavior: smooth;    
}

body {
    font-family: "Alumni Sans Pinstripe", sans-serif; 
    font-size: var(--text-size-default);    
    background-color: var(--background-page);
	color: var(--text-color-default);
	letter-spacing: calc(0.12 * var(--text-size-default));	
    font-style: normal;

    min-width: 22.5rem;
}

aside {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.separator-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
	padding: .5rem;
}

.logo { width: 1rem; }
.pinterest { filter: grayscale(1); }
.instagram { opacity: 0.75; }

hr.separator {
    width: 10%;
    border-color: transparent;
    background-color: var(--text-color-default);
    height: 1px;
    margin-left: 0;
    margin-right: 0;

}

header {    
    display: flex;        
    flex-direction: column;
    align-items: center;
}

header > h2, h1 { 
    text-align: center; 
    margin-top: 0;
}

/*
main { }
*/

a.iconlink:link, a.iconlink:active, a.iconlink.visited {
		color: var(--text-color-default);
}

nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*gap: 1rem;*/
    padding: 0.5rem;
}

nav > .navbutton {
    background-color: var(--button-background);
    color: var(--button-text);
    border: none;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-size: var(--text-size-button);
    font-weight: bold;
    border-radius: 4px;
    padding: 2px 10px;
    letter-spacing: calc(0.35 * var(--text-size-button));	
}

nav > .navbutton:hover, .navbutton.active {
    background-color: var(--button-background-hover);
    color: var(--button-text-hover);
}

nav > .navbutton.active {
    color: var(--button-text-active);
}

.flex-container {
    /*border: 2px solid blue;*/
    /* margin: 2rem; */
    width: var(--thumbnail-container-width);
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0; /* 0.25rem; */
}

.thumbnail {
    width: var(--thumbnail-size);
    height: var(--thumbnail-size);
    background-color: var(--thumbnail-background);
    color: white;
    text-align: center;
    border: var(--thumbnail-border) solid transparent; 
    /* border: none; */
    object-fit: cover; 
    padding: var(--thumbnail-padding);
    border-radius: var(--thumbnail-border-radius);
	-webkit-filter: brightness(90%);
}

.thumbnail:hover {
    /* animation: highlightThumbnail 400ms ease-in-out 0s 1 normal forwards; */
	/* border: var(--thumbnail-border)  dotted white; */
	-webkit-filter: brightness(120%);
}

.thumbnail:not(:hover) {
    /* animation: highlightThumbnail 400ms ease-in-out 0s 1 normal forwards; */
	/* border: var(--thumbnail-border) solid red;  */
}

#photodialog {    
    /* margin:auto;*/
    /* max-width: 80vh; */
    /* max-height: 100vh; */
    width: 80vmin;
    background-color: var(--photo-background);
    padding: 0; /* 1rem;     */
    overflow: hidden;
    /* do not add margin left or right; it breaks centering the image*/
    /* border-radius: var(--photodialog-border-radius); */
}

#photodialog:focus-visible {
  outline:none;
}

#photodialog::backdrop {
    background: var(--photo-dialog-background);
}

.photocontainer {
        border: var(--photodialog-border-size) solid var(--photodialog-border-color);
        border-radius: var(--photodialog-border-radius);
}

.photo {
    object-fit: contain;
    width: 100%;
    height: 100%;
    pointer-events: none;    
}

.hassy_frame {
    clip-path: polygon(1% 1%, 99% 1%, 98% 2%, 98% 98%, 99% 99%, 1% 99%, 2% 98%, 
  		2% 54%, 1% 53%, 2% 52%, 
        2% 48%, 1% 47%, 2% 46%,
        2% 2%); /* hasselblad 6x6 frame */
}


.copyright {
    color: white;    
    position: absolute;
    top: 88%;
    right: 3%;
    opacity: 0.95;
    font-size: 1dvi;
    font-weight: bolder;
}

.photodata {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem;
}

.title { 
    font-size: var(--text-size-large);
    padding-bottom: 1rem;
}

.date, .camera, .tags { font-size: var(--text-size-small);}

.title, .date, .camera, .tags {
    color: var(--text-color-default);
    margin: 0;
    font-weight: bolder;
}

.date, .camera, .tags {
    display: inline;
}

.footer {
    /*border: 2px solid cyan;*/
    padding-top: 2rem;
    width: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    font-size: var(--text-size-small);
    color: var(--text-color-default);
    font-weight: bolder;
}