* {
	text-decoration: none;
	list-style: none;
}

:root {
	--primary-color: #f0e7db;
	--secondary-color: #343434;
	--tertiary-color: #f5f0e8;
	--quaternary-color: #e78718;
	--quinary-color: #fff;

	--old-secondary-color: rgba(223, 188, 153, 0.9);
	--old-header-color: rgb(255, 237, 220);
	--old-header-hover-color: rgb(252, 212, 175);
	--old-nav-hover-color: rgb(112, 75, 38);
	--old-mobile-nav-color: rgba(205, 134, 63, 0.6);
	--eric-color: peru;

}

@font-face {
    font-family: 'imported-helvetica';
    src: url('Helvetica-Font/Helvetica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'imported-helvetica';
    src: url('Helvetica-Font/Helvetica-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html {
	font-family: 'Source Code Pro', monospace;
	/* font-family: 'imported-helvetica'; */
	font-weight: 400;
	background-color: var(--primary-color);
	line-height: 25px;
	color: var(--secondary-color);
}

body {
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 80px;
}

#home-title {
	display: block;
	text-align: center;
	font-size: 6rem;
	/* make space between lines bigger */
	line-height: 1;
}

#top-div {
	height: calc(100vh - 25vh);
	display: flex;
	justify-content: center;
	align-items: center;
}

ul {
	padding-left: 0;
}

/* #top-pic, #top-text {
	display: inline-block;
} */

#top-text {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.eric {
	color :var(--quaternary-color);
	display: inline-block;
	transition: 0.3s;
}

#eric-home-page:hover {
	transform: scale(1.07) rotate(-3deg);
}

#headline {
	background-color: var(--tertiary-color);
	display: inline-block;
	text-align: center;
	padding: 15px;
	border-radius: 20px;
	transition: 0.3s;
	color: var(--secondary-color);
	font-size: 1.2rem;
	line-height: 1.5;

}

#headline:hover {
	/* background-color: rgb(252, 212, 175); */
	/* transform: scale(1.05); */
}

#profile-pic {
	width: 150px;
	height: 150px;
	border-radius: 50px;
	margin: 50px;
	display: inline-block;
	border: 3px solid chocolate;
}

.it {
	color:darkcyan;
	transition: 0.3s;
	display: inline-block;
}

#it-student:hover {
	transform: scale(1.07) rotate(-3deg);
}

.music {
	color:blueviolet;
	display: inline-block;
	transition: 0.3s;
}

#music-creator:hover {
	transform: scale(1.07) rotate(-3deg);
}

.technology {
	color:brown;
}

footer {
	/* padding: 10px; */
	/* margin-top: 48px; */
	color: #777;
	font-size: 14px;
	text-align: center;
	animation: fadein 1s ease-in-out;
}

#bio {
	padding-left: 0;
}


#bio li {
	margin-bottom: 16px;
	display: flex;
}

.year {
	margin-right: 16px; /* 年とテキストの間に8pxのマージンを追加 */
	font-weight: bold;
	color:#626262;
}

a {
    color: inherit; /* This makes the link inherit the color of its parent element */
    text-decoration: none; /* This removes the underline */
}

a:visited {
    color: inherit;
}

a:hover {
    color: var(--quaternary-color);
	text-decoration: underline;
}


.navbar {
	background-color: var(--tertiary-color);
	color: #fff;
	position: fixed;
	width: 100vw;
	height: 60px;
	top: 0;
	left: 0;
	z-index: 1;
	/* backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-list {
	padding: 0;
	margin-left: 20%;
}

.nav-list li {
	display: inline; /* リストアイテムを水平に配置 */
	margin-right: 20px; /* リストアイテムの右側にマージンを追加 */
}

.nav-list li a {
	text-decoration: none; /* リンクの下線を削除 */
	color: var(--secondary-color);
	transition: 0.2s;;
}

.nav-list li a:hover {
	color: var(--quaternary-color)
}

.navbar .burger-menu {
	position: absolute;
	width: 40px;
	top: 0px;
	right: 0px;
	margin-right: 10px;
	margin-top: 10px;
	cursor: pointer;
	display: none;
	transition: 0.5s;
	filter: invert(80%);
	/* animation: slide 2s ease-in-out; */
}

@keyframes slide {
	from {
		opacity: 0;
		transform: translateX(-300px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

#eric-home-page, #it-student, #music-creator {
	animation: fall 1.5s ease-in-out;
}

@keyframes fall {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.burger-menu:hover {
	rotate: 180deg;
}

.links {
	display: flex;
	margin: 0;
	padding: 0;

}

.links ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

@media (max-width: 576px) {
	body {
		margin-left: 5%;
		margin-right: 5%;
	}
}

/* Mobile version */
@media (max-width: 768px) {
	.navbar .burger-menu {
		display: block;
	}

	.nav-list li {
	margin-right: 0px;
	margin-top: 25px;
	font-size: 1.2em;
	}

	.nav-list {
		margin: 0;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: var(--tertiary-color);
		/* backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px); */
		margin-left: 100%;
		transition: all 0.5s ease;
	}

	.nav-list.mobile-menu {
		margin-left: 0;
	}

	#home-title {
		font-size: 3rem;
	}

	#headline {
		font-size: 1rem;
	}
}

/* media query from 1400px width and larger, body margin is 30% */
@media (min-width: 1200px) {
	body {
		margin-left: 30%;
		margin-right: 30%;
	}
	.nav-list {
		margin-left: 30%;
	}
}

h3 img {
	margin-top: -5px;
	margin-left: 8px;
    vertical-align: middle;
}

hr {
	margin: 50px;
}

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.audio-container p {
	font-style: italic;
}

.credit {
	font-size: 0.8em;
	color: #777;
	margin-top: 0;
	text-align: center;
}

video {
	max-width: 100%;
	height: auto;
  }
  
.italic {
	font-style: italic;
}

h2, h3, h4, h5, h6 {
	scroll-margin-top: 60px;
  }

.music-table-of-content, .insta-link {
	text-decoration: underline;
}

.nav-list li .current-page {
    color: var(--quaternary-color);
}

.insta {
	display: flex;
	justify-content: center;
}

.instagram-media {
	border-radius: 10px !important;
}

@keyframes fadein {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0px); }
}

#top-div, #core-content {
	animation: fadein 1s ease-in-out;
}

.genre-div {
	display: none;
	animation: fadein 1s;
}

.genre {
	/* display: inline-block; */
}

.genre:hover {
	/* underline */
	text-decoration: underline;
	cursor: pointer;
}

.project-screenshot {
	width: 100%;
	height: auto;
	border: black 1px solid;
	border-radius: 10px;
}

.project-div a {
	text-decoration: underline;
}

.project-div {
	display: none;
	animation: fadein 1s ease;
}

.project-name:hover {
	text-decoration: underline;
	cursor: pointer;
}

.website-iframe {
	border: black 1px solid;
}

i, .icon {
	margin-right: 10px;
}

/* .it, .music, .technology {
	color: var(--secondary-color);
} */