@charset "utf-8";

@media print, (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
}

.no_animations {
	scroll-behavior: auto !important;
}

.no_animations *,
.no_animations *::before,
.no_animations *::after {
	animation-delay: 0s !important;
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
}

.post_card {	
	transition:
		box-shadow var(--dur_faster) var(--ease),
		transform var(--dur_faster) var(--ease);
}

.nav_link{
	will-change: color;
	transition: color var(--dur_faster) var(--ease);
}

.next_card {
	will-change: transition;
	transition:
		box-shadow var(--dur_fast) var(--ease),
		transform var(--dur_fast) var(--ease);
}

#speech_bubble{
	will-change: opacity;
	transition:
		opacity var(--dur_base) var(--ease),
		visibility var(--dur_base) var(--ease);
}

.toast {
	will-change: opacity;
	transition:
		opacity var(--dur_fast) var(--ease),
		visibility var(--dur_fast) var(--ease);
}

.terminal{
	will-change: opacity;
	transition:
		opacity var(--dur_base) var(--ease),
		visibility var(--dur_base) var(--ease);	
}

.reading_coin {
	will-change: opacity;
	transition: opacity var(--dur_base) var(--ease);	
}

.field_input {
	transition:
	border-color var(--dur_fast) var(--ease),
	box-shadow var(--dur_fast) var(--ease);
}

.main_button{
	will-change: transform;
	transition:
		scale var(--dur_base) var(--ease),
		rotate var(--dur_base) var(--ease),
		background-color var(--dur_base) var(--ease),
		box-shadow var(--dur_base) var(--ease),
		transform var(--dur_base) var(--ease);	
}

.main_button:hover{
}

.outline_button {
	will-change: transform;
	transition:
		background-color var(--dur_fast) var(--ease),
		color var(--dur_fast) var(--ease),
		transform var(--dur_fast) var(--ease);
}

.round_icon{
	will-change: transform;
	transition:
		background-color var(--dur_fast) var(--ease),
		transform var(--dur_fast) var(--ease);	
}

.square_icon {
	will-change: transform;
	transition:
		background-color var(--dur_fast) var(--ease),
		transform var(--dur_fast) var(--ease),
		box-shadow var(--dur_fast) var(--ease);
}

.icon_button {
	transition: background-color var(--dur_fast) var(--ease);
}

.chip{
	transition:
		background-color var(--dur_fast) var(--ease),
		color var(--dur_fast) var(--ease);	
}

.link_arrow {
	transition: color var(--dur_fast) var(--ease);
}


p,
span,
a, 
h1,
h2,
h3,
button{
	backface-visibility: hidden;
	transform: translateZ(0);

	will-change: transform;
	transition: transform var(--dur_fast) var(--ease);
}

p:hover,
span:hover,
a:hover,
h1:hover,
h2:hover,
h3:hover,
button:hover{
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0) scale(1.05);
}


#index .intro .my_name .eachCharAnimation > * {
	--animation1-name: animateMe__bouncing;
	will-change: transform;	
}

/*
#character:hover,
#character{
	transition: none;
	transform: translateZ(0) scale(1);
}

#character{
	backface-visibility: hidden;
	transform: translateZ(0);
	will-change: transform;
	
	transition: transform var(--dur_fast) var(--ease);
}

#character:hover{
	will-change: transform;
	
	transform: translateZ(0) scale(1.08) rotate(-1.01deg);
}
*/