:root {
  --cursor-value: url('https://lycheecreature.neocities.org/asa/chars/cursors/mery.png'), auto;
}

html, body:active *:hover, button, iframe
{
	cursor: default; cursor: var(--cursor-value);
}
body, .bod
{
	background-color: white;
	background-image: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	overflow-x: none;
	
}

#nav
{
	background-color: white;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100vw;
	position: fixed;
	padding: 5px;
	height: auto;
}

#btnrow
{
	background-color: white;
	left: 0;
	width: 90vw;
	display: flex;
	justify-content: space-between;
	columns: 3;
	padding: 5px;
	height: auto;
	float: left;
}

#charitems, .bobules
{
	width: 100%;
	display: flex;
	white-space: pre;
	align-items: center;
	justify-content: center;
}

.bobules
{
	height: 200px;
	width: clamp(20vw, 30vw, 35vw);
}

#close
{
		margin: 20px 48.5% 0 48.5%;
}

.lilguy
{
	margin: 5px;
	width: 50px;
	height: auto;
}

.break
{
	flex-basis: 100%;
	height: 0%;
}

#columns
{
	justify-content: space-around;
	columns: 3;
	display: flex;
	padding: 2%;
	margin: 2%;
	margin-top: 0; 
	height: fit;
	overflow: wrap;
}
#vertical
{ 
	width: 10vw;
	height: 50vw;
	margin-left: -2%;
	margin-right: 4%;
	background-color: black;
}

#bio
{
	width: 50vw;
	height: 100vh;
}

.imgs
{
	
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

#pic
{
	width: 30vw;
	border: none;
	margin-top: clamp(-20%, -12%, 20%);
	vertical-align: middle;
}

.bob
{
	width: 100px;
	height: fit-content;
	bottom: 0;
}

.bob:hover
{
	width: 150px;
	height: fit-content;
}


h1 
{
	font-family: Sonsie One;
	 text-transform: uppercase;
	width: 80%;
    font-size: clamp(2rem, 5vw, 8rem);
	height: auto;
	justify-content: space-around;
	margin-top: 5%;
	margin-left: 16%;
	margin-bottom: -2%;
}

#horizontal-desktop
{
	width: 60%;
	margin-top: 10vh;
	margin-left: 20%;
}

#horizontal-mobile
{
	display: none;
}

@media (pointer:none), (orientation:portrait), (max-width: 1800) {
	
	#vertical
	{
		display: none;
	}
	
	#columns
	{
		flex-direction: column-reverse;
		columns: 1;
		
		height: auto;
	}
	
	h1 
	{
		text-align: center;
		font-size: clamp(1rem, 8vw, 6rem);
		margin-left: clamp(2vw, 10vw, 15vw);
		text-wrap: nowrap;
		margin-top: 15%;
	}
	.imgs 
	{
		width: 95%;	
		align-items: center;
		justify-content: center;
	}
	
	.bobules
	{
		width: 90vw;
		align-items: center;
		justify-content: center;
	}
	
	#pic
	{
		width: 60vw;
		border: none;
		margin-top: 10px;
		margin-left: 20%;
		
	}
	
	#bio
	{
		width: 90vw;
		height: 200vh;
	}
	
	#horizontal-desktop
	{
		display: none;
	}

	#horizontal-mobile
	{
		display: inline;
		margin: 50px 25vw 20px 25vw;
		width: 50vw;
		
	}
	
	body
	{
	}
	
}