/* PREZ frontend */

html, body, div, p, pre, form, p, button, img, a img, figcaption { border: 0 none; margin: 0; padding: 0; }
* { box-sizing: border-box; }
input:focus, textarea:focus, select:focus, a:focus, .textarea_autogrow { outline: none; }


/* color variables */
:root 
	{
	--bg_dark: #000;
	--font_standard: #fff;
	--font_highlight: #3ae73a;
	}

::selection { color: var(--bg_dark); background: var(--font_standard); opacity: 0.9 }

html { font-size: 1.6vw; }
body { 
	font-family: Times New Roman, sans-serif; 
	font-weight: 500; 
	font-variation-settings: "wdth" 90;
	font-optical-sizing: auto;
	background: var(--bg_dark); 
	color: var(--font_standard); 
	line-height: 1.2em; 
}
a { color: var(--font_standard); text-underline-offset: 3px;  }

.menu { font-size: 14px; line-height: 1.5em; margin: 20px; color: var(--font_highlight); font-family: monospace; max-width: 40rem; }
.menu a { transition: opacity 0.12s; color: inherit; }
.menu a:hover { opacity: 0.8; transition: 0; }

.edit_button { position: fixed; top: 0.1rem; left: 50%; transform: translateX(-50%); z-index: 101; font-family: monospace; color: var(--font_highlight); font-size: 14px; }
.edit_button:hover { opacity: 0.8 }

.hidden { display: none; }

h1 { font-size: 14px; font-weight: normal; }

.login { margin-top: 2rem  }
article {  }

.gallery { position: fixed; left: 50%; top: 0; width: 100%; max-width: 100%; height: 85vh; padding: 2rem 2rem 1rem 2rem; transform: translateX(-50%); overflow: hidden; }
.gallery { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gallery img { width: auto;  height: 100%; object-fit: contain; object-position: center; }

.gallery.grid1 img{ max-height: 100%; max-width: 100%; }
.gallery.grid2 img { max-height: 100%; max-width: 48%; }
.gallery.grid3 img { max-height: 100%; max-width: 31%; }
.gallery.grid4 img { max-height: 52%; max-width: 35%; }
.gallery.grid5 img { max-height: 48%; max-width: 31%; }
.gallery.grid6 img { max-height: 48%; max-width: 31%; }
.gallery.grid7 img { max-height: 48%; max-width: 25%; }
.gallery.grid8 img { max-height: 48%; max-width: 22%; }

figcaption { position: fixed; left: 50%; transform: translateX(-50%); padding: 0 2rem 1.5rem 2rem; bottom: 0; width: 100vw; height: 14vh; line-height: 1.3em; display: flex; text-align: left; align-items: flex-end; }

.text_slide { width: 100%; line-height: 1.1em; padding: 1.5rem; letter-spacing: -0.2px }
.text_slide p { margin-bottom: 0.5em; }

.video1 { width: 100%; max-height: 80vh; padding: 2rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -58%, 0); }
.video2 { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; object-fit: cover; object-position: center center;}

.fullscreen_image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; }
.slideshow { width: 80%; max-height: 80vh; max-width: max-content; padding: 30px; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -58%, 0); object-fit: contain; padding: 10px ;}
.pointer { position: fixed; right: 20px; bottom: 20px; font-size: 14px; line-height: 1em; ; color: var(--font_highlight); display: flex; justify-content: center; align-items: center; font-family: monospace;  }

nav.slides { position: absolute; overflow-y: auto; left: 0; top: 0; padding: 1rem 2rem 1rem 1rem; width: auto; height: 100vh; background: #000000e0; z-index: 100; font-family: monospace; color: var(--font_highlight); font-size: 14px; line-height: 1.25em;  }
nav.slides a { color: inherit; text-decoration: none; }
nav.slides a:hover { opacity: 0.8 }

.arrows { line-height: 0.6em; padding: 0 0.1rem; position: fixed; right: 0.5rem; top: 0.25rem; z-index: 102; opacity: 1; transition: opacity 1s; transition-delay: 1s; animation: fade-out; animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 3s; }
.arrows a { text-decoration: none; color: var(--font_highlight); font-family: monospace; display: inline-block; padding: 5px; font-size: 14px; transition: opacity 0.2s; }
.arrows a:hover { opacity: 0.8; }
.arrows:hover { opacity: 1 !important; transition-delay: 1s; }

@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }


#mobile {
font-size: 20px;
.arrows { left: 1rem; top: 1rem; opacity: 1; animation: none; }
.arrows a { font-size: 20px; padding: 0 0.5rem }
.gallery { margin-top: 2rem; position: absolute; overflow: auto; padding-bottom: 20vh; }
.gallery img { width: 100% !important; height: auto !important; max-width: unset; max-height: unset; }
figcaption { background: #00000085; height: auto; padding-top: 1rem; font-size: 0.75em; }
.text_slide { margin-top: 2rem; margin-bottom: 20vh; font-size: 1.25em;}
}