/* overall styling */
:root {
	--ticker-margin: 20px;
	--ticker-spacing: 100px;
	--ticker-speed: 60s;
	
	--col-toggle-outer-margin: 40px;
	--col-toggle-voffset: 15px;
	
	--col-top-margin: 0px;
	--col-outer-margin: 20%;
	--col-gutter: 5%;
	
	--link-highlight-color: white;
	--link-color: #595758;
}

body {
	font-family: sans-serif;
	overflow-x: hidden;
  background-color: #fcfcfc;
  overscroll-behavior: none;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

body::-webkit-scrollbar {
  display: none;
}

p {
	font-size: 16px;
	text-align: justify;
}
a {
    text-decoration : none;
    color : var(--link-color);
}
a:hover {
    color : var(--link-highlight-color);
	background-color: var(--link-color);
}
a.no-highlight {
    color: inherit;
    background-color: transparent;
}

.row-container {
	display: flex;
	flex-direction: column;
	height: 600px;
  width: 100vw;
  align-items: center;
  margin: 10px 0px;
}

.row {
	flex: 1;
  display: flex;
  flex-direction: row;
  width: 700px;
  height: 250px;
	line-height: 1vw;
	overflow-x: auto;
	text-align: right;
	white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  flex-shrink: 0;
}

.row img {
  max-height: 250px;
  height: 250px;
  width: auto;
  object-fit: contain;
  image-orientation: from-image;
  contain: layout style paint;
  transition: transform 0.2s ease;
  display: block;
}

.row a {
  margin: 10px;
  height: 250px;
  max-height: 250px;
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row::-webkit-scrollbar {
	background: transparent;
}

#homepage-row-top {
  align-items: left;
  scroll-snap-align: right;
}

#homepage-row-bottom {
  align-items: right;
  scroll-snap-align: left;
} 

.column-left-toggle {
	position: fixed;
	top: calc(2 * var(--ticker-margin) + 30px + var(--col-toggle-voffset));
	left: var(--col-toggle-outer-margin);
	width: calc(50vw - var(--col-gutter));
	text-align: left;
}
.column-right-toggle {
	position: fixed;
	top: calc(2 * var(--ticker-margin) + 30px + var(--col-toggle-voffset));
	right: var(--col-toggle-outer-margin);
	width: calc(50vw - var(--col-gutter));
	text-align: right;
}
.column-left-toggle img,
.column-right-toggle img { /* width of on off toggles */
	width: 20%;
}
.column-left-toggle img:hover,
.column-right-toggle img:hover {
	cursor: pointer;
	/* possible duotone filter filter: url(#duotone); */ 
}
.sort-button-container {
	position: fixed;
	bottom: var(--col-toggle-outer-margin);
	left: var(--col-toggle-outer-margin);
	width: calc(50vw - var(--col-gutter));
	text-align: left;
}
.sort-button {
	filter: blur(1px);
	transition: filter 0.5s ease;
}
.sort-button:hover {
	filter: blur(0px);
	cursor: pointer;
}

/* contact info */

.contact-info {
	position: fixed;
	bottom: var(--col-toggle-outer-margin);
	right: var(--col-toggle-outer-margin);
	width: calc(50vw - var(--col-gutter));
	text-align: right;
  color: #595758;
}


/* ticker bar */
.ticker-wrapper {
	width: 100%;
	height: calc(2 * var(--ticker-margin));
	padding-left: 100%;
	padding-top: var(--ticker-margin);
	background-color: transparent;
}
@keyframes ticker {
  0% {transform: translateX(-10%);}
  100% {transform: translateX(-100%);}
}
.ticker {
	display: inline-block;
	white-space: nowrap;
	background-color: transparent;
	padding-right: 100%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: ticker;
	animation-duration: var(--ticker-speed);
}
.ticker-item {
	display: inline-block;
	padding: 0 var(--ticker-spacing);
	background-color: transparent;
}

/* text table of contents */
.toc {
	position: absolute;
	top: calc(var(--col-outer-margin) + 86px);
	left: 0;
	z-index: 999;
	flex: 1;
	padding-top: var(--col-top-margin);
	padding-left: var(--col-outer-margin);
	overflow-y: auto; /* enable column scrolling */
}

/* project pages */

.project-page-image-column {
	flex: 1;
	line-height: 1.5vh;
	padding-top: var(--col-top-margin);
	padding-left: var(--col-outer-margin);
	padding-right: var(--col-outer-margin);
	overflow-y: auto; /* enable column scrolling */
	justify-content: center; /* right-align elements*/
}

.project-page-caption {
	line-height: 1.5vh;
}