@charset "utf-8";

@media screen and (orientation: portrait){
	:root{
		--text_lg: clamp(1rem, 1.72vh, 1.15rem);
		--text_xl: clamp(1.3rem, 2vh, 1.5rem);
		--text_2xl: clamp(1.42rem, 2.6vh, 2.8rem);
		--text_3xl: clamp(1.57rem, 2.8vh, 3.6rem);
		--text_4xl: clamp(1.63rem, 3vh, 4.2rem);
		--text_5xl: clamp(1.72rem, 4.2vh, 5.7rem);
		--text_6xl: clamp(1.91rem, 5.7vh, 6.3rem);
		--text_7xl: clamp(2.57rem, 7.2vh, 7.2rem);
		--text_arcade: clamp(2rem, 6.3vh, 4.5rem);
		
		--text_hand_xs: clamp(0.72rem, 1.5vh, 1.3rem);
		--text_hand_sm: clamp(1rem, 2.2vh, 1.36rem);
		--text_hand: clamp(1.25rem, 2.8vh, 1.72rem);
		
		--page_gutter: clamp(1.5rem, 4.2vw, 1.72rem);
		--size_icon_round: 2.6rem;
		--section_space: clamp(3.2rem, 6.3vw, 4.7rem);
	}	
}

@media screen and (max-width: 575px){
		
	.site_header .header_side{
		display: none;
	}
	
	.site_header h1 .brand{
		text-align: center;
		font-size: var(--text_4xl);
	}
	
	.site_header h1 .brand strong{
		display: block;
	}
	
	.site_header #main_nav{
		display: none;
	}
	
	.site_header .burger_menu{
		display: block;
		aspect-ratio: 1 / 1;
		padding: 0;
		width: 20px;
	}
	
	#index #hero{
		margin: 0;
		padding: 0;
		
		grid-template-columns: 100%;
		/* padding-block-start: calc(var(--header_height) + var(--space_3)); */
		padding-block-start: 0;
		
		position: relative;
		max-width: 100dvw;
	}
	
	#index #hero .intro{
		margin: 0;
		padding: 0;
		margin-inline-start: var(--space_7);
		
		min-block-size: calc(100dvh - var(--header_height));
		
		justify-content: center;
		padding-block-start:calc( var(--header_height) + var(--space_10));
		
	}
	
	#index #hero .intro > *{
		max-width: 63%;
	}
	
	#index #hero .intro p{
		font-size: calc( var(--text_lg) * 1.2 );		
	}
		
	#index #hero .intro .hero_lead{
        font-size: calc(var(--text_lg) * 0.91);
		font-weight: var(--weight_medium);
        letter-spacing: calc(var(--letter_spacing_extra_loose) * 1.1);
        word-spacing: -2%;
        text-align: right;
        text-indent: 4.2%;
		margin-block-start: calc ( var(--unit) * 10 );
	}
		
	#index #hero .intro .greedings{
		width: 100%;
		text-align: right;
		text-indent: 0px;
		margin-block-end: -18px;
		
		font-size: var(--text_5xl);
		
		letter-spacing: var(--letter_spacing_extra_loose);		
	}

	#index #hero .intro .title{
		font-size: var(--text_7xl);
		text-align: center;
	}
	
	#index #hero .intro .aka{
		
		font-size: calc( var(--text_2xl) * 0.91 );
		
		line-height: var(--line_height_tight);
		letter-spacing: 2.1px;
		margin-block-start: 0px;
		margin-block-end: -15px;
	}
	
	#index #hero .intro .aka .en{
		font-size: calc( var(--text_2xl) * 0.72 );
	}
	
	
	#index #hero .intro .status_line{
		font-size: calc( var(--text_md) * 1.1 );
	}
	
	
	#index #hero .intro .social_links{
		justify-content: center;
		translate: 0% 0%;
		padding-inline-end: calc(var(--space_7) * 2);
		min-height: fit-content;
	}
	
	#index #hero .intro .main_button{
		margin-inline-start: var(--space_5);
		margin-block-end: calc( var(--unit) * 10 );
	}
	
	#index #hero #character{
		margin: 0;
		padding: 0;
			
		position: absolute;
		width: 72%;
		left: 0;
		top: calc(var(--header_height) - var(--space_7));
		
		translate: -42% 0;
		
		max-height: 100dvh;
		min-height: 100dvh;
		height: 100dvh;
		
		display: flex;
		justify-content: center;
	}
	
	#index #hero .and_thats_it{
		text-indent: 0px;
		margin-block-start: var(--space_3);
		width: 50%;
		translate: 25% 0%;
		text-align: center;
		font-size: calc( var(--text_2xl) * 1 );
		line-height: var(--line_height_tighter);
	}
	
	#index #hero #bio{
		min-width: 100vw;
		display: block;
		text-align: center;
		padding-block-start: var(--space_10);
		padding-inline: var(--page_gutter);
	}
		
	#index #hero #bio > p{
		text-indent: 0;
		margin: 0;
		padding: 0;
	}
		
	#index #hero #bio > p > .sarcastic_sentence{
		text-indent: 0;
		margin-block: var(--space_5) var(--space_10);
		font-size: calc( var(--text_md_larger) * 1.7 );
		line-height: var(--line_height_tighter);
		letter-spacing: calc(var(--letter_spacing_loose) * 1.5);
		padding: 0;
	}
	
	.rpg_panel.effect1{
		--translateXFrom: 0;
		--translateYFrom: -4.2dvh;
	}
	
	.rpg_panel.effect2{
		--translateXFrom: -2px;
		--translateYFrom: -4.2dvh;
	}
	.rpg_panel.effect3{
		--translateXFrom: 3px;
		--translateYFrom: -4.2dvh;
	}
	.glass_panel.effect1{
		--translateXFrom: -3px;
		--translateYFrom: -4.2dvh;
		--translateYTo: -2.8dvh;
	}
	.glass_panel.effect2{
		rotate: -1.1deg;
		--translateXFrom: -2px;
		--translateYFrom: -5.7dvh;
		--translateYRo: -4.2dvh;
	}
	.glass_panel.effect3{
		--translateXFrom: 0;
		--translateYFrom: -6.3dvh;
		--translateYTo: -4.3dvh;
	}
}

@media screen and (min-width: 576px) and (max-width: 767px){
}

@media screen and (min-width: 768px){
}


@media (min-width: 48em) {
}

@media (min-width: 62em) {
}