:root { --gap: 10px; --shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.15); --slider-height: 16px; --slider-width: 85px; font-size: 18px; --buttonSize: 24px; --info-size: 30px; }

@media screen and (min-width: 800px) { :root { --gap: 20px; --slider-width: 110px; --slider-height: 12px; font-size: 18px; --buttonSize: 24px; } }

@font-face { font-family: Montreal; src: url("../PPNeueMontreal-Book.otf") format("opentype"); font-weight: 400; font-style: normal; }

@font-face { font-family: Montreal; src: url("../PPNeueMontreal-Bold.otf") format("opentype"); font-weight: 600; font-style: normal; }

body { margin: 0; padding: 0; box-sizing: border-box; transition: 200ms; transition: opacity 0.5s ease; /* Smooth transition to visible */ font-family: 'Montreal'; }

body, html { height: 100%; width: 100vw; overflow: hidden; touch-action: manipulation; /* Disables pinch-to-zoom and double-tap to zoom */ }

#stopMotionContainer { background: white; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 200; position: fixed; top: 0px; left: 0px; transition: opacity 0.5s ease; /* Smooth transition to visible */ }

#logoContainer { position: fixed; height: 17vh; width: 22vh; top: var(--gap); left: 50vw; transform: translateX(-50%); z-index: 11; display: flex; flex-direction: column; align-items: center; }

#logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* Keeps aspect ratio within container */ user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; }

#info-icon { mix-blend-mode: multiply; width: var(--info-size); transform: translateY(-5px); }

.info-logo { width: 100%; margin-top: 100px; position: relative; top: 0.3em; display: none; }

.info-logo svg { width: 100%; height: auto; }

#info a { display: none; font-size: 13px; font-weight: 600; text-decoration: none; color: black; line-height: 130%; }

#info.visible .info-logo, #info.visible a { display: block; }

#info.visible a:hover { text-decoration: underline; }

h3 { font-size: 14px; font-weight: 600; }

#info { position: fixed; top: var(--gap); left: var(--gap); z-index: 101; cursor: pointer; font-size: 16px; width: var(--info-size); max-height: 1.4em; }

#info:not(.visible):hover { background: white; border-radius: 100%; }

#info:not(.visible) p, #info:not(.visible) .info-logo { pointer-events: none; }

#info p { opacity: 0; user-select: none; line-height: 130%; width: 230px; margin: .5em 0; font-size: 13px; }

#info p.visible { opacity: 1; }

#info.visible { --padding: 0.5rem; max-height: 80vh; width: 230px; padding: var(--padding); margin-top: calc(var(--padding)* -1); margin-left: calc(var(--padding)* -1); background-color: white; box-shadow: var(--shadow); }

#controls { display: flex; flex-direction: row; position: fixed; top: var(--gap); right: var(--gap); z-index: 90; gap: 8px; justify-content: center; align-items: center; }

@media screen and (min-width: 600px) { #controls { gap: 1em; } }

button { border: none; width: var(--buttonSize); height: var(--buttonSize); cursor: pointer; box-shadow: var(--shadow); }

#buttons { display: flex; align-items: center; gap: .4em; }

#colorMode { border-radius: 1px; background-size: 100% 100%; backdrop-filter: blur(10px); background: url("../georges-color-icon.png"); background-size: cover; }

#colorMode.image { background-image: url("../x.png"); background-size: cover; border: 1px solid black; }

#shuffle { background-image: url("../shuffle.png"); background-color: transparent; background-size: contain; position: fixed; bottom: var(--gap); right: var(--gap); width: var(--info-size); height: var(--info-size); box-shadow: none; }

#scaleSlider { box-shadow: var(--shadow); font-size: 16px; }

/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input.styled-slider[type=range] { height: 1.5em; height: var(--slider-height); width: var(--slider-width); -webkit-appearance: none; border-radius: 100px; margin: 0px; }

/*progress support*/
input.styled-slider.slider-progress[type=range] { --range: calc(var(--max) - var(--min)); --ratio: calc((var(--value) - var(--min)) / var(--range)); --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em)); }

input.styled-slider[type=range]:focus { outline: none; }

/*webkit*/
input.styled-slider[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--slider-height) - 2px); height: calc(var(--slider-height) - 2px); border-radius: 1em; background: #000000; border: none; margin-top: 1px; cursor: pointer; }

input.styled-slider[type=range]::-webkit-slider-runnable-track { height: var(--slider-height); width: var(--slider-width); border: none; border-radius: 3.6em; background: #FFFFFF; box-shadow: none; padding-left: 1px; padding-right: 1px; }

input.styled-slider.slider-progress[type=range]::-webkit-slider-runnable-track { background: linear-gradient(#FFFFFF, #FFFFFF) 0/var(--sx) 100% no-repeat, #FFFFFF; }

/*mozilla*/
input.styled-slider[type=range]::-moz-range-thumb { width: 1.3em; height: 1.3em; width: calc(var(--slider-height) - 2px); height: calc(var(--slider-height) - 2px); border-radius: 1em; background: #000000; border: none; cursor: pointer; }

input.styled-slider[type=range]::-moz-range-track { height: 1.5em; height: var(--slider-height); width: var(--slider-width); border: none; border-radius: 3.6em; background: #FFFFFF; box-shadow: none; }

input.styled-slider.slider-progress[type=range]::-moz-range-track { background: linear-gradient(#FFFFFF, #FFFFFF) 0/var(--sx) 100% no-repeat, #FFFFFF; }

/*ms*/
input.styled-slider[type=range]::-ms-fill-upper { background: transparent; border-color: transparent; }

input.styled-slider[type=range]::-ms-fill-lower { background: transparent; border-color: transparent; }

input.styled-slider[type=range]::-ms-thumb { width: 1.5em; height: 1.5em; height: var(--slider-height); width: var(--slider-height); border-radius: 1em; background: #000000; border: none; margin-top: 0; box-sizing: border-box; cursor: pointer; }

input.styled-slider[type=range]::-ms-track { height: 1.5em; height: var(--slider-height); width: var(--slider-width); border-radius: 3.6em; background: #FFFFFF; border: none; box-shadow: none; box-sizing: border-box; }

input.styled-slider.slider-progress[type=range]::-ms-fill-lower { height: 1.5em; height: var(--slider-height); width: var(--slider-width); border-radius: 3.6em 0 0 3.6em; margin: -undefined 0 -undefined -undefined; background: #FFFFFF; border: none; border-right-width: 0; }

.grid-container { display: flex; gap: var(--gap); flex-direction: row; position: relative; height: 100vh; }

.column { gap: var(--gap); display: flex; flex-direction: column; align-items: center; }

.twoColContainer { display: flex; flex-direction: column; position: fixed; z-index: 1; }

.grid-item { overflow: hidden; user-select: none; position: relative; top: 0px; left: 0px; transition: 300ms transform, 300ms margin; }

.grid-item img { transition: 300ms; opacity: var(--opacity); transform: scale(var(--scale)); position: relative; cursor: pointer; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; }

.grid-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-color); pointer-events: none; transition: var(--colorTransition); opacity: var(--colorOpacity); transform: scale(var(--scale)); }

.column.somethingIsFocused::after { content: ""; position: fixed; z-index: 8; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 105vh; background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px); pointer-events: none; border-radius: 0px; }

.somethingIsFocusedCont { z-index: 2; }

.column::after { content: ""; backdrop-filter: blur(0px); background-color: rgba(255, 255, 255, 0); transition: 300ms backdrop-filter, 300ms background-color; pointer-events: none; }

.no-transition { transition: none !important; }

.grid-item img, .grid-item::after { border-radius: 6px; }

#tagline { position: fixed; bottom: calc(var(--gap)); left: 50%; transform: translateX(-50%); z-index: 10; margin: 0; text-align: center; width: 90svw; }

.caption { color: black; transition: 300ms; z-index: 9; pointer-events: none; user-select: none; width: 100%; box-sizing: border-box; font-size: var(--captionFontSize); line-height: 1.1; height: 0px; transition: 300ms height; }

.grid-item.focused .caption .imageLink { display: block; }

.caption .imageLink { pointer-events: all !important; display: none; color: black; }

@media screen and (min-width: 600px) { .caption { line-height: 1.15; } }

.grid-item.focused { overflow: visible; }

@media screen and (min-width: 800px) { .grid-item:not(:has(img.inactive)):hover .caption { opacity: 1; /* Show caption on hover */ bottom: 0px; /* Position caption at bottom of the image */ height: var(--captionHeight); } .grid-item:not(:has(img.inactive)):hover { height: 100%; } }

.grid-item.focused:not(:has(img.inactive)) .caption { opacity: 1; transition: 1000ms opacity; padding: 0px; font-size: 14px; line-height: 1.2; }

.imageLink:not(.imageLink + .imageLink) { margin-top: .6em; }

.grid-item img { width: var(--colWidth); }

/*# sourceMappingURL=main.css.map */