#menu-holder{
	padding: min(2vw, 1.66vh) min(1vw, 0.83vh);
	align-content: flex-start;
	justify-content: center;
	border-style: solid;
	border-color: var(--color-backlight);
	border-width: 0 0 0.8vmin 0;
}

#logo-holder{
	margin: min(2vw, 1.66vh); 
	cursor: default;
}

#svg-logo {
	height: min(13.2vw, 11vh);
}


.icon {
	flex-direction: column;
	width: min(13.2vw, 11vh);
	margin: min(2vw, 1.66vh);
	padding: min(1vw, 0.83vh) 0vmin;
	font-size: min(2.4vw, 2vh);
	background: none;
	border-radius: min(2vw, 1.66vh);
}

.icon-image {
	width: min(9vw, 7.5vh);
	height: min(9vw, 7.5vh);
}

icon-text {
	color: var(--color-half);
	flex-grow: 0.2;
	text-align:center;
}


#info-holder {
	justify-content:center;
	display: none;
	padding: 1vmin;
	background-color: var(--color-back);
}

#thumbnail-holder {
	flex-direction: row; 
	flex-wrap:wrap; 
	justify-content:center;
	padding: 0vmin;
	padding-bottom: 5vmin;
	display: none;
	background-color: var(--color-back);
}

thumbnail{
	display: flex;
	position: relative;
	padding: 4vmin 5vmin;
}


.thumbnail-image {
	width: min(30vh,45vw);
	height: min(20vh,30vw);
	box-shadow: 1vmin 1vmin  var(--color-backdark);
	border-radius: min(4vh,6vw);
}

thumbnail-text {
	font-size: min(2.4vh,3.6vw);
	position: absolute; 
	top: 35%;
	left: 50%;
	color: #000000cc;
	
	transform: translate(-50%, min(4.8vh,7.2vw));
	
	padding:  0.5vmin 1vmin;
	border-radius: 1.5vmin;
	white-space: pre-line;
	
	box-shadow: 0.75vh 0.75vh black;
}

.thumbnail-desc {
	color: var(--color-half);
	margin: 2vh 2vh;
	justify-content:center;
	text-align:left;
	font-weight: normal;
}


#preview-desc {
	flex-direction: column;
	justify-content: center;
	position: absolute;
	bottom: 4vmin;
	right: 4vmin;
	gap: 2vmin;
}

#preview-title {
	background-color: var(--color-mono);
	color: var(--color-back);
	font-size: 4vh;
}

#preview-link {
	background-color: var(--color-backlight);
	color: var(--color-front);
	font-size: 2.5vh;
}

.preview-mover {
	margin: 2vmin;
	position: absolute;
	background-color: var(--color-backlight);
	width: 3vmin;	
}


#preview-back {
	left: 0;
}

#preview-forward {
	right: 0;
}


#palette-holder {
	display: none;
	flex-direction: column; 
	gap: 4vmin; 
	padding: 2vmin;
	background-color: var(--color-back);
}

#palette-presets {
	flex-direction: row; 
	justify-content:center;
	gap: 3vmin; 
	padding: 0vmin;
}

.palette-svg {
	padding: 1.6vmin 2.4vmin;
	border-radius:3vmin; 
	border-style:solid;
	border-width:0.75vmin;
	
	width:min(4vh,5vw);
	height:min(8vh,10vw);
	
	box-shadow: 0.75vh 0.75vh var(--color-backdark);
}

palette-info {
	font-size: min(2.5vh,4vw);
	padding-top: 2vh;
	color: var(--color-mono);
}

#palette-customization {
	flex-wrap:wrap; 
	justify-content:center;
}

.palette-subcustom {
	flex-direction: column; 
}

palette-picker {
	justify-content:center;
	height: min(6vh,12vw);
	margin: 1vh 4vmin;
}
.palette-text {
	font-size: min(5vh,9vw);
	color: var(--color-back);
}

.palette-input {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}





@media (min-aspect-ratio: 4/5){

	thumbnail{
		flex-direction:column;
	}
	thumbnail p{
		width: min(24vh,36vw);
		font-size: min(3.6vw,1.8vh);
		display: flex;
		position: relative;
		flex-direction: row;
		margin: 2vh auto;
	}
}

@media (max-aspect-ratio: 4/5){

	thumbnail{
		flex-direction:row;
	}

	thumbnail p{
		width: min(30vw,15vh);
		font-size: min(3.2vw,1.6vh);
		display: flex;
		position: relative;
		flex-direction: row;
		margin: auto 4vw;
	}

}