/* general content
–––––––––––––––––––––––––––––––––––––––––––––– */
.main{padding: 3% 3%;}
.row {padding: 2% 0;}
body {background-color: #000}
.about {background-color: #fff;}

html,
body.home-page {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

/* typography
–––––––––––––––––––––––––––––––––––––––––––––– */
body { 
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
	opacity: 1;
    transition: 1s opacity;
}

body.fade-out {
    opacity: 0;
    transition: none;
}

.home-page .site-header {
	display: none;
}

.home-page :focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	body,
	.star {
		animation: none;
		transition: none;
	}

	.home-gallery-strip {
		transform: none !important;
		will-change: auto;
	}

}


/* loading
–––––––––––––––––––––––––––––––––––––––––––––– */

#loading_screen
{  
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  color: #FFF;  
  text-align: center;
  padding: 80px;
  background-color: #000;
  /* background-color: rgba(0, 0, 0, .5); */
  box-sizing: border-box;
  z-index: 100;
}

#logone {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
  	width: 100px;
	margin: auto auto;
}
.star {
	-webkit-animation: rotation 10s infinite linear;
	opacity: 1 !important;
}

@-webkit-keyframes rotation {
	from {
			-webkit-transform: rotate(0deg);
	}
	to {
			-webkit-transform: rotate(359deg);
	}
}

/* fixed stuff 
–––––––––––––––––––––––––––––––––––––––––––––– */

#nomone {
	top: 0%;
	padding: 10px;
	left: 5%;
	font-size: 30px;
}

#listone {
	float: right;
	top: -.5%;
	right: 3%;
	padding: 10px;
}

.home-page #listone a {
	color: #fff;
	font-size: 30px;
	text-decoration: none;
}

.home-page #listone a:hover {
	color: var(--color-accent);
	font-size: 30px;
	text-decoration: none;
}

#frasona {
	bottom: 10px;
	left: 7%;
    max-width: 1000px;
}

h1 {
	color: #fff;
	font-size: 40px;
	text-decoration: none;
}

li {
	float: left;
	padding: 5px 15px;
}

a {
	display: inline-block;
	color: #fff;
	font-size: 30px;
	text-decoration: none;
}

ul {
	list-style-type: none;
	text-align: right;
}

a:hover {
	font-size: 30px;
	color: var(--color-accent);
	text-decoration: none;
}

.fixed {
	position: fixed;
	z-index: 10;
}

/* scrolling images
–––––––––––––––––––––––––––––––––––––––––––––– */
.home-page #wrapper,
.home-page .main {
	height: 100%;
}

.home-gallery-viewport {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.home-gallery-strip {
	width: min(90%, 1460px);
	margin-inline: auto;
	will-change: transform;
}

.home-gallery-sequence {
	width: 100%;
	padding-block: 2vh;
}

img {
	max-width: 100%;
	opacity: 0.6;
}

.filter {
	-webkit-filter: grayscale(100%);
/*	-webkit-clip-path: inset(1% 20% 1% 20%);*/
	filter:grayscale(100%);
	transition: filter 350ms ease, opacity 350ms ease;
/*	border: 5px solid #fff;*/
/*	border-radius: 100%;*/
}

img:hover {
	filter: none;
	-webkit-filter:grayscale(0);
/*	border: 5px solid #0000ff;*/
/*	text-decoration: underline;*/
	opacity: 1;
}

/* media query
–––––––––––––––––––––––––––––––––––––––––––––– */

@media (max-width: 750px) {
	.home-gallery-strip {
		width: 95%;
	}

/*
	#frasona {
		width: 70%;
	}
*/
	li {
		float: none;
		padding-bottom: 0px;
		padding-right: 0px;
	}
	
	h1 {
		font-size: 30px;
	}
	
	#nomone, a, a:hover {
		letter-spacing: -.04rem;
		font-size: 25px;
	}

	.home-page #listone a,
	.home-page #listone a:hover {
		font-size: 25px;
	}
	
	#nomone {
		left: 4%;
	}
	
	#listone {
		right: 4%;
	}
	
	#logone {
		width: 170px;
/*		width:50%;*/
		font-size: 600;
	}
	
	img {
		opacity: 0.35;
	}

	#frasona {
		max-width: 80%;
	}
	
}