@font-face { font-family:'Mulish'; src:url('/fonts/Mulish-Regular.ttf'); }
@font-face { font-family:'MulishExtraLight'; src:url('/fonts/Mulish-ExtraLight.ttf'); }
@font-face { font-family:'Mulish'; src:url('/fonts/Mulish-Bold.ttf'); font-weight:bold; }
@font-face { font-family:'TwemojiCountryFlags'; src:url('/fonts/TwemojiCountryFlags.woff2'); }

html, body { height:100% }
body { font-family:'Mulish', 'Verdana', 'Yu Gothic', serif; margin:0; background-color:#f5f6f8; font-size:0.95em; display:flex; flex-flow:column; height:100%; }
a { color:#146598; text-decoration:none; }
a:hover { text-decoration:underline; }

#wrapper { flex-grow:1; flex-shrink:0; background-color:white; }

header { margin-top:0; background:white; }
header nav { border-top:.3em solid #146598; border-bottom:.1em solid #eff0f3; box-shadow:0 .4em .4em 0 rgba(0,0,0,.04); font-size:1.2em; }

header nav ul {	padding:0; max-width:1000px; margin:0.7em auto; }
header nav ul li { display:inline; list-style-type:none; margin:0 0.6em; padding:0; font-size:1em; }
header nav ul li::before { content:unset; }
header nav ul li.active { font-weight:bold; }
header nav ul li.name { font-size:1.5em; margin-left:0; }

article { border-top:0.15em solid #eff0f3; padding:2em; padding-top:0; padding-bottom:0; background-color:white; overflow:hidden; position:relative; }
article.no-text { padding-bottom:1em; }
article h2 { font-weight:300; margin-bottom:0.4em; font-size:1.5em; }
article h2.top { margin-top:0.5em; }
article h3 { font-weight:300; font-size:1.25em; margin-bottom:0; margin-top:0.5em; }
article img { display:block; }

ul { padding-left:0.5em; margin-left:0em; list-style: none; }
ul li { margin:0; padding:0; padding-left:0.5em; }
ul li::before { content:"•"; padding-right:0.35em; vertical-align:0.1em; }

/* Resume */

article.resume { padding-bottom:1em; }

article.resume #presentation { display:flex; align-items:center; gap:7em; margin-left:3em; margin-right:3em; margin-top:1.5em; margin-bottom:1.5em; }

article.resume #presentation #photo-info { display:flex; align-items:center; gap:1.5em; }
article.resume #presentation #photo-info .photo { width:9em; border-radius:20%; }
article.resume #presentation #photo-info .info { display:flex; flex-direction:column; gap:0.4em; min-width:6em; }
article.resume #presentation #photo-info .info p { margin:0; font-size:0.9em; }
article.resume #presentation #photo-info .info .contact { display:flex; align-items:center; gap:0.4em; }
article.resume #presentation #photo-info .info .contact a img { width:1.5em; border-radius:0.2em; }

article.resume #presentation #name { display:flex; flex-direction:column; }
article.resume #presentation #name .name { font-size:3em; font-family:'MulishExtraLight'; }
article.resume #presentation #name .title { font-size:1.4em; margin-top:-0.3em; }
article.resume #presentation #name .description { margin-top:1em; }

article.resume .box { display:flex; align-items:center; margin-left:1.25em; margin-top:1em; margin-bottom:1em; width:80%; }
article.resume .box.hobby { margin-top:0; margin-bottom:0; }
article.resume .box img { min-width:6.6em; max-width:6.6em; margin-right:1.25em; }
article.resume .box .description { display:block; font-size:1em; margin-top:0.35em; margin-bottom:0.35em; }
article.resume .box ul { margin-top:0.35em; margin-bottom:0.35em; padding-left:0em; }

article.resume .box .item { margin-bottom:0; margin-top:0; }
article.resume .box .item .date { font-size:0.9em; display:inline-block; margin-right:0.4em; padding:0.2em; border:1px solid #146598; border-radius:0.35em; color:#146598; }
article.resume .box .item .entitled { display:inline-block; font-size:1.1em; }
article.resume .box .item .entitled a { font-weight:bold; }
article.resume .box .item .entitled .platform img { max-height:1.1em; width:unset; min-width:unset; max-width:unset; margin-right:unset; display:inline-block; }

article.resume p .skill { margin:0em 1em 0.3em 1.25em; width:15%; display:inline-block; }
article.resume p span.separator { display:inline-block; margin-left:0.3em; margin-right:0.3em; }

article.resume .language-wrapper { display:grid; grid-template-columns:18rem 18rem; grid-gap:0rem; margin-left:1.25em; margin-top:1em; margin-bottom:1em; }
article.resume .language-wrapper .language .flag { font-size:1.3em; margin-right:0.3em; font-family:'TwemojiCountryFlags', 'Mulish', 'Verdana', 'Yu Gothic', serif; }
article.resume .language-wrapper .language .flag.safari { font-family:initial; }
article.resume .language-wrapper .language .lang { width:28%; display:inline-block; }

article.resume .column { width:35%; list-style-type:none; padding:0; margin-bottom:0; margin-top:0; }
article.resume .column li::before { content:unset; }


/* Portfolio */

article#portfolio .category { display:flex; flex-flow:row wrap; gap:2em 1.35em; margin:1em 0.6em 1em 0.6em; }

article#portfolio .category .project { width:19.2em; display:block; }
article#portfolio .category .project img { width:19.2em; border:1px solid rgba(35,35,35,0.1); }
article#portfolio .category .project #info { margin-top:0.3em; }
article#portfolio .category .project #info #top { display:flex; justify-content:space-between; }
article#portfolio .category .project #info .title { font-size:1.1em; font-weight:bold; }
article#portfolio .category .project #info .year { font-size:0.9em; border-radius:0.25em; padding:0.15em 0.3em; 
												border:1px solid #146598; border-radius:0.35em; color:#146598; }
article#portfolio .category .project #info .excerpt { display:block; font-size:0.93em; margin-top:0.35em; }


/* Project */

article.project #header img.logo { max-width:60%; margin:1em 1em 1em 1em; max-height:8em; object-fit:contain; }

article.project #header { border:0.15em solid #eff0f3; box-shadow:0 .2em .2em .2em rgba(0,0,0,.04); height:fit-content;
							padding:1em; display:flex; width:80%; margin:auto; margin-top:1.5em; margin-bottom:2em;
							justify-content:space-between; align-items:center; }

article.project #header .information a { font-weight:bold; }
article.project #header .information .title { display:inline-block; font-weight:bold; margin-bottom:0.3em; font-size:1.3em; margin-top:0; margin-right:0.5em; }
article.project #header .information .year { display:inline-block; padding:0.3em; padding-top:0.2em; padding-bottom:0.2em; border:1px solid #146598; border-radius:0.3em;
											color:#146598; vertical-align:text-bottom; font-size:0.8em; line-height:1.2em; }
article.project #header .information td:first-child { text-align:right; padding-right:1em; font-weight:bold; color:#555 }
article.project #header .information td:last-child { max-width:16em; }

article.project #video { text-align:center; }
article.project #video video { display:block; width:75%; margin:auto; margin-bottom:1em; }
article.project #gallery img { max-width:75%; display:block; margin:auto; margin-bottom:1em; }

article.project .various-project { margin-bottom:2em; }
article.project .various-project h3 { font-size:1.35em; margin-top:1.5em; }
article.project .various-project h4 { margin:0; margin-top:0.5em; font-size:1em; font-weight:normal; }
article.project img.gallery { max-width:75%; margin:auto; }


/* Music */

#music-wrapper { display:flex; flex-flow:row wrap; align-items:flex-end; gap:1.5em; }
#music-wrapper .music { display:flex; align-items:initial; margin-left:0.75em; }
#music-wrapper .music audio { display:block; margin:0em; margin-top:0.5em; padding:initial; }
#music-wrapper .music .item { margin:0; margin-left:0.75em; }
#music-wrapper .music .item .entitled { margin-top:0; padding-top:0; font-weight:bold; display:block; margin-bottom:0.25em; }


/* Game design */

article.game-design { padding-left:5em;	padding-right:5em; padding-bottom:1em; }
article.game-design p { text-align:justify; }
article.game-design p img { width:60%; max-width:90vw; display:block; margin:auto; margin:1em auto; border:0.15em solid #eff0f3; box-shadow:0 .2em .2em .2em rgba(0,0,0,.04); }
article.game-design .plan h4 { margin:0.5em 0; }
article.game-design .ppt a { margin:auto; text-align:center; display:block; }
article.game-design .ppt img { width:30%; margin:auto; }
article.game-design .nav { margin-top:1.5em; text-align:left; }
article.game-design .nav a.prev { float:left; margin-bottom:0.5em; }
article.game-design .nav a.next { float:right; margin-bottom:0.5em; }


/* Responsive style */

@media screen and (max-width:1200px) {
	#wrapper { margin-left:2em; margin-right:2em; }
	header nav ul li:first-child { margin-left:1em; }

	article#portfolio .category { gap:2em 1.75em; }
	article#portfolio .category .project { width:17.2em; }
	article#portfolio .category .project img { width:17.2em; }
}

@media screen and (min-width:1200px) {
	#wrapper { width:1000px; margin:auto; }
}

@media screen and (max-width:900px) {

	#wrapper { margin:0; }

	header #header-container { padding:0.3em; }
	header #header-container .title h2 { margin-left:0.35em; font-size:1.1em; }
	header #header-container .infos { display:none; }

	header h1 { font-size:2.2em; margin-top:-0.1em; margin-left:0.15em; }
	header nav .content { display:none; }
	header nav { position:absolute; }
	header nav.active { border-bottom:0.25em solid #146598; }
	header nav ul { margin:0; margin-top:0.2em; }

	article { border-top:unset; padding:0.8em; padding-top:0; padding-bottom:0; }
	article h2 { margin-top:0.5em; }

	ul li { padding-left:0; }


	/* Resume */

	article.resume #presentation { display:flex; align-items:center; gap:0; margin-left:0; margin-right:0;
  									margin-top:1em; margin-bottom:0; flex-direction:column; }
	article.resume #presentation #photo-info .photo { width:7em; }
	article.resume #presentation #name .name { display:none; }
	article.resume #presentation #name .title { display:none; }
	article.resume #presentation #photo-info .info .contact a img { width:1.8em; }

	article.resume .box { display:block; margin:1em 0em; width:100%; }
	article.resume .box .item .date { margin-bottom:0.3em; display:block; width:fit-content; }
	article.resume .box .item .entitled { display:inline-block; }
	article.resume .box img { display:none; }

	article.resume p span.separator { display:inline-block; margin:unset; }
	article.resume p .skill { margin:0; margin-left:0.1em; }
	article.resume p strong.skill { width:initial; display:block; padding-left:0.3em; }
	article.resume p .skill-content { margin-left:1em; display:block; margin-bottom:0; margin-top:0em; }

	article.resume .language-wrapper { grid-template-columns:18rem; margin-left:0.75em; }
	article.resume .language-wrapper .language { width:100%; }
	article.resume .language-wrapper .language .lang { width:28%; }

	article.resume .box .column { width:100%; padding:initial; padding-left:0em; margin:initial; }
	article.resume .box .column li::before { content: "•"; padding-right:0.35em; }

	/* Portfolio */

	article#portfolio .category .project { margin:auto; }


	/* Project */

	article.project #header { margin-bottom:unset; margin-left:0.25em; margin-right:0.25em; flex-direction:column-reverse; margin-top:1em;
								margin-left:0.25em; margin-right:0.25em; width:initial; }
	article.project #header img.logo { margin:unset; max-width:80%; margin-bottom:1em; width:initial; }
	article.project #video video { width:100%; }
	article.project #gallery img { max-width:100%; }

	article.project .various-project { margin-bottom:1em; }
	article.project .various-project h3 { margin-top:0.85em; }
	article.project img.gallery { max-width:100%; }


	/* Music */

	#music-wrapper .music { display:block; margin-left:0; }
	#music-wrapper .music audio { width:95vw; }
	#music-wrapper .music .item { margin:0.5em 0em; }


	/* Game design */

	article.game-design { padding:1em; padding-top:0; padding-bottom:0; }
	article.game-design p img { width:initial; }
	article.game-design .ppt img { width:initial; }


	/* nav + hamburger */

	header nav { width:unset; font-size:0.8em; text-align:left; position:unset; padding-bottom:0.3em; }
	header nav ul li { display:none; }
	header nav ul li.name, header nav.active ul li.name { display:initial; margin-left:0.5em; font-size:2.5em; margin-top:0.05em; padding:0; text-align:left; }

	header nav.active { height:fit-content; }
	header nav.active ul li { display:block; font-size:1.7em; padding:0.2em; text-align:center; }
	header nav.active ul li:nth-child(2) { margin-top:0.3em; }
	header nav.active .content { background:white; border:solid 1px black; margin-top:1em; padding:0.5em; border-radius:0.5em; }
	header nav.active .content { display:block; }

	header nav #navigation { margin-top:0;margin-right:0; }
	header nav #navigation ul { margin:0; padding:0; padding-left:0; text-align:center; }
	header nav #navigation ul li { margin-bottom:0; }
	header nav #navigation .link { font-size:2.1em;}

	header nav #hamburger { display:inline-block; font-size:1.5em; position:absolute; margin-top:0em; top:0.5em; right:0.8em; }
	header nav #hamburger .container { display:inline-block; cursor:pointer; }
	
	header nav #hamburger .bar1,
	header nav #hamburger .bar2,
	header nav #hamburger .bar3 { width:30px; height:3px; background-color:#146598; margin:6px 0; transition:0.4s; }
		
	header nav.active #hamburger .bar1 { transform:rotate(-45deg) translate(-4px, 6px); }
	header nav.active #hamburger .bar2 { opacity:0; }
	header nav.active #hamburger .bar3 { transform:rotate(45deg) translate(-6px, -9.5px); }
}