html {
}

:root {
	--color: #c9c9c9;
}

body {
	background: linear-gradient(-45deg, #240206, #140013, #14040b, #000000);
	background-size: 400% 400%;
	-webkit-animation: gradient 15s ease infinite;
	animation: gradient 12s ease infinite;
	font-family: 'Noto Sans JP', sans-serif;
	overflow: hidden;
}

.navbar-brand {
	filter: brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(35%) hue-rotate(202deg) brightness(96%) contrast(94%);
}

.wrapper {
	height: calc(100vh - 100px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.aboutbody {
	overflow:auto;
}
.aboutheader {
	font-size: clamp(30px, 60px, 90px);
}

.aboutpage {
	position: center;
	height: calc(100vh);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	overflow: visiblescroll;
}

.invoicetable {
	overflow: auto;
}

.abouttext {
	flex-grow: 1;
	padding-right: 10px;
}

p {
	color: var(--color);
}

.aboutphotos {
	flex-grow: 1;
	padding-left: 10px;
}

.aboutimage {
	height: auto;
	width: auto;
	max-width: 600px;
	max-height: 438px;
}

.carousel {
	height: calc(100vh - 100px);
	display: flex;
	align-items: center;
	justify-content: space-between; /* or space-around */
	flex-wrap: nowrap; /* Enable wrapping */
	padding: 10px; /* Optional: Adds padding inside the carousel */
}

.carousel .card {
	margin: 10px; /* Adds spacing between cards */
	width: calc(25vw - 10px); /* Adjust width to account for margin */
	
}


.iconhandler {
	position: center;
	height: calc(100vh - 200px);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}

.icon {
	filter: brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(35%) hue-rotate(202deg) brightness(96%) contrast(94%);
}

table, thead, tr, th, tbody, td {
	color: var(--color);
}

h2 {
	color: var(--color);
}

header {
	font-family: Arial, Helvetica, sans-serif
}


h1 {
	align-self: center;
	color: var(--color);
}

h4 {
	font-size: clamp(30px, 90px, 90px);
	color: var(--color);
}

.fade-in-right {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

}
.fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation-delay: 250ms;
}
.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation-delay: 650ms;
}

h4.name {
	transform: translate(-2rem);
}

h5.jobtitle {
	font-size: 64px;
	transform: translate(1.5rem, -1.5rem);
	color: var(--color);
}

h5.location {
	transform: translateY(-15px);
	font-size: 35px;
	color: var(--color);
	text-align: center;
}

.links {
	justify-self: flex-end;
	font-size: clamp(10px, 20px, 30px);
	text-align: center;
}




@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}


@-webkit-keyframes fade-in-right {
	0% {
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fade-in-right {
	0% {
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

de-in-left {
	0% {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fade-in-left {
	0% {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}



@media screen and (max-width: 1000px) {
	.wrapper, .aboutpage {
		justify-content: center;
		justify-content: space-around;
		flex-flow: column wrap;
	}

	.aboutimage {
		height: auto;
		width: auto;
		max-width: 500px;
	}

	h4.name {
		font-size: 50px;
		align-self: center;
	}

	.fade-in-right {
		transform: translate(-.6rem, -.2rem);
	}


	h5.jobtitle {
		font-size: 40px;
		align-self: center;
		transform: translate()
	}

	.fade-in-left {
		transform: translate()
	}


	h5.location {
		font-size: 35px;
		align-self: center;
	}
	
	.carousel {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 650px) {
	.aboutimage {
		height: auto;
		width: auto;
		max-width: 450px;
	}
}


@media screen and (max-width: 550px) {
	.wrapper, .aboutpage {
		justify-content: center;
		justify-content: space-around;
		flex-flow: column nowrap;
		overflow: auto
	}

	.aboutimage {
		height: auto;
		width: auto;
		max-width: 250px;
	}

	h4.name {
		font-size: 40px;
		align-self: center;
	}

	.fade-in-right {
		transform: translateY(-.5rem);
	}

	h5.jobtitle {
		font-size: 35px;
		align-self: center;
	}

	.fade-in-left {
		transform: translate()
	}


	h5.location {
		font-size: 30px;
		align-self: center;
	}

	.projects {
		overflow: auto;
	}
}

@media screen and (max-width: 400px) {
	.wrapper, .aboutpage {
		justify-content: center;
	}

	.aboutimage {
		height: auto;
		width: auto;
		max-width: 150px;
	}

	h4.name {
		font-size: 35px;
		align-self: center;
	}

	.fade-in.fade-in-right {
		transform: translate(-.5rem, -.6rem);
	}

	h5.jobtitle {
		font-size: 30px;
		align-self: center;
	}

	.fade-in-left {
		transform: translate(0.7rem, -1.5rem);
	}


	h5.location {
		font-size: 25px;
		align-self: center;
	}
}