@import url('root.css');

* {
	letter-spacing: 1.25px;
	line-height: normal;
	font-family: var(--font-NunitoSans);
	font-size: var(--font-size);
	font-style: var(--font-style);
	font-weight: var(--font-weight);
	font-display: var(--font-display);
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background-color: var(--bg-color);
}

::-webkit-scrollbar-thumb {
	background-color: var(--accent-color);
	border-radius: 3px;
}

html, body {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
}

header {
	width: 100%;
	margin-bottom: auto;
}

main {
	width: 100%;
	flex-grow: 1;
}

footer {
	width: 100%;
	margin-top: auto;
}

.checkbox {
	float: left;
	border: 2px solid var(--accent-color);
}

	.checkbox:hover {
		accent-color: var(--accent-color);
	}

	.checkbox:active {
		filter: brightness(90%);
	}

	.checkbox:checked {
		accent-color: var(--accent-color);
		border: 2px solid var(--accent-color);
	}

.body-image {
	background: var(--bg-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.font-Roboto {
	font-family: var(--font-Roboto);
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dark-mode {
	background-color: #384859;
	color: white;
}

@page {
	size: A4 portrait;
	margin: 5px;
}

.page-A4 {
	width: 780px;
	height: 1110px;
}

.card-radius {
	border-radius: 5px;
}

.card-shadow {
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.text-art {
	color: #FFFFFF;
	text-shadow: #474747 3px 5px 2px;
	color: #FFFFFF;
}

.navtab {
	color: var(--text-primary-color);
	text-align: left;
	transition: 0.25s;
}

	.navtab:hover {
		color: var(--bg-color);
		background-color: var(--accent-color);
		text-align: center;
		transform: scale(1.200);
		-moz-transform: scale(1.200);
		-webkit-transform: scale(1.200);
	}

.hover-scale {
	transition: 0.25s;
	-moz-transition: 0.25s;
	-webkit-transition: 0.25s;
}

	.hover-scale:hover {
		transform: scale(1.200);
		-moz-transform: scale(1.200);
		-webkit-transform: scale(1.200);
	}

.hover-rotate {
	transition: 0.25s;
	-moz-transition: 0.25s;
	-webkit-transition: 0.25s;
}

	.hover-rotate:hover {
		transform: rotate(7deg);
		-moz-transform: rotate(7deg);
		-webkit-transform: rotate(7deg);
	}

.hover-border {
	color: rgba(0, 0, 0, 0.6);
	transition: 0.25s;
	-moz-transition: 0.25s;
	-webkit-transition: 0.25s;
	border: 2px solid rgba(0, 0, 0, 0.6);
}

	.hover-border:hover {
		color: var(--accent-color);
		transform: scale(1.075);
		-moz-transform: scale(1.075);
		-webkit-transform: scale(1.075);
		border: 2px solid var(--accent-color);
	}

.trans {
	transition: 0.25s;
}

	.trans:hover {
		transform: scale(1.05);
	}

.rotate {
	transform: rotate(0deg);
}

	.rotate:hover {
		animation: myAnim 1s linear 0s infinite normal none;
	}

@keyframes myAnim {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

.shake {
	transform: rotate(0);
}

	.shake:hover {
		animation: myShake 3s linear 0s infinite normal none;
	}

@keyframes myShake {
	0%, 100% {
		transform: translateX(0);
	}

	10%, 30%, 50%, 70% {
		transform: translateX(-5px);
	}

	20%, 40%, 60% {
		transform: translateX(5px);
	}

	80% {
		transform: translateX(4px);
	}

	90% {
		transform: translateX(-4px);
	}
}

.hide {
	display: none;
}

.show:hover + .hide {
	display: block;
}

.index-0 {
	z-index: 0;
}

.index-1 {
	z-index: 1;
}

.index-2 {
	z-index: 2;
}

.index-3 {
	z-index: 3;
}

.index-4 {
	z-index: 4;
}

.aspect-ratio-11 {
	aspect-ratio: 1/1;
}

.aspect-ratio-32 {
	aspect-ratio: 3/2;
}

.aspect-ratio-23 {
	aspect-ratio: 2/3;
}

.aspect-ratio-43 {
	aspect-ratio: 4/3;
}

.aspect-ratio-34 {
	aspect-ratio: 3/4;
}

.aspect-ratio-53 {
	aspect-ratio: 5/3;
}

.aspect-ratio-35 {
	aspect-ratio: 3/5;
}

.aspect-ratio-169 {
	aspect-ratio: 16/9;
}

.aspect-ratio-916 {
	aspect-ratio: 9/16;
}

.aspect-ratio-auto {
	aspect-ratio: auto;
}

.img-fill {
	object-fit: fill;
	object-position: center;
}

.img-cover {
	object-fit: cover;
	object-position: center;
}

.img-contain {
	object-fit: contain;
	object-position: center;
}

.img-none {
	object-fit: none;
	object-position: center;
}

.head-txt1 {
	font-style: normal;
	font-weight: bolder;
	text-align: center;
	color: white;
	font-size: clamp(1rem, 0.3rem + 3.938vw, 4.5rem);
}

.font-tag {
	font-size: 12px;
	font-size-adjust: 0.5;
}

input::placeholder {
	font-size: 12px;
}

.fitcontent {
	width: fit-content;
	height: fit-content;
}

.fitwidth {
	width: fit-content;
}

.fitheight {
	height: fit-content;
}

.stretch {
	height: stretch;
	min-height: 480px;
	max-height: stretch;
}

.bar-box {
	width: 100%;
	margin: auto;
	padding: 5px;
}

.bar-linear-1 {
	--deg: 0deg;
	--start: #FFC3AA;
	--center: var(--accent-color);
	--end: #FFC3AA;
	width: 100%;
	background: var(--start);
	background: linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
	background: -moz-linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
	background: -webkit-linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
}

.bar-linear-2 {
	--deg: 0deg;
	--start: #FFFFFF;
	--center: var(--accent-color);
	--end: #FFFFFF;
	width: 100%;
	background: var(--start);
	background: linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
	background: -moz-linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
	background: -webkit-linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
}

.bar-linear-3 {
	--deg: 0deg;
	--start: #FFFFFF;
	--center: var(--text-primary-color);
	--end: #FFFFFF;
	width: 100%;
	background: var(--start);
	background: linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
	background: -moz-linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
	background: -webkit-linear-gradient(var(--deg), var(--start) 0%, var(--center) 50%, var(--end) 100%);
}

.bar-radial {
	--start: #FFC3AA;
	--center: #ff692a;
	--end: #FFC3AA;
	width: 100%;
	margin: auto;
	background: var(--start);
	background: radial-gradient(circle, var(--center) 0%, var(--center) 50%, var(--end) 100%);
	background: -moz-radial-gradient(circle, var(--center) 0%, var(--center) 50%, var(--end) 100%);
	background: -webkit-radial-gradient(circle, var(--center) 0%, var(--center) 50%, var(--end) 100%);
}

.bg-color-primary {
	background-color: var(--bg-color);
}

.bg-color-secondary {
	background-color: var(--text-primary-color);
}

.bg-color-accent {
	background-color: var(--accent-color);
}

.bg-accent-secondary {
	background-color: var(--accent-secondary-color);
}

.text-color-primary {
	color: var(--text-primary-color);
}

.text-color-secondary {
	color: var(--text-secondary-color);
}

.text-color-third {
	color: var(--text-third-color);
}

.text-color-accent {
	color: var(--accent-color);
}

.text-accent-secondary {
	color: var(--accent-secondary-color);
}

.border-color-accent {
	border: 1px solid var(--accent-color);
}

.border-accent-secondary {
	border: 1px solid var(--accent-secondary-color);
}