/**
 * CSS
 * @version 0.1
 * @author Ozhan Binici
 * last update: 2025.12.27
 * 
 */

.info-container {
	order:1;
	position:relative;
	display:flex;
	flex-wrap:wrap;
	margin:20rem;
	height:calc(100vh - 145rem);
	align-self:center;
	width:320rem;
	
	
	position: -webkit-sticky;
	position: sticky;
	top: 135rem;
	align-self:flex-start;
	padding-right:20rem;
	width:320rem;
}



.info {
	position: relative;
	display: block;
	width: 100%;
	margin-top:auto;
	flex-shrink:0;
}

.info h1 {
	font-size: 22rem;
	line-height: 26rem;
	font-weight: 700;
	margin-bottom: 6rem;
}

.info .year {
	margin-bottom:20rem;
}

.info p {
	font-size: 17rem;
	line-height: 24rem;
	margin-bottom: 16rem;
}


.navigation {
	position:relative;
	display:flex;
	margin-left:-8rem;
	margin-left:-6rem;
	margin-top:auto;
	margin-bottom:-5rem;
}

#tag .navigation {
	margin-bottom:19rem;
}

.navigation a {
	font-size:32rem;
	line-height:32rem;
	font-weight:200;
	color:#000000;
	padding:5rem;
	position:relative;
	opacity:0.5;
}

.navigation a.down {
	transform:rotate(90deg);
	transform-origin:center center;
	margin-left:20rem;
	margin-top:4rem;
}

.navigation a.down.up {
	transform:rotate(-90deg);
	margin-left:12rem;
}

.navigation a.inactive {
	pointer-events:none;
	opacity:0.3;
}

.navigation a:hover {
	/*color:#FFFFFF;*/
	opacity:1;
}

@media (max-width:520px){
	.info-container {
		order:2;
		height:auto;
		position:relative;
		top:auto;
	}
	
	.overview .grid {
		width:100%;
		padding:0 10rem;
	}
	
	#tag .navigation {
		margin-bottom:0rem;
	}
}