body, html{margin:0;padding:0;font-family:"Chaparral", times, times-new-roman,serif;overflow:hidden;}
h1, h2{font-family:"Snippet",tahoma,arial,sans-serif;font-weight:bold;}
a{
	display:inline-block;
	width:max-content;
	padding:5px 20px;
	border-radius:40px;
	border:2px solid var(--blue);
	background:rgba(255,255,255,.8);
	color:var(--blue);
	text-decoration: none;
	box-shadow:0 0 10px rgba(255,255,255,.5);
	transition:all .25s;
	font-size:24px;
}
.portfolio a{border:2px solid var(--portfolio);color:var(--portfolio);}
.blog a{border:2px solid var(--blog);color:var(--blog);}
.ateliers a{border:2px solid var(--ateliers);color:var(--ateliers);}
a.pf,a.bg,a.at,a.main{
	font-size:18px;
	padding:3px 18px 3px 14px;
	border-width:0px !important;
	background:transparent;
	box-shadow:none;
}
a.main{border:2px solid var(--blue);color:var(--blue);}
a.pf{border:2px solid var(--portfolio);color:var(--portfolio);}
a.bg{border:2px solid var(--blog);color:var(--blog);}
a.at{border:2px solid var(--ateliers);color:var(--ateliers);}
a:hover{color:rgba(255,255,255,1);background:var(--blue);text-shadow:none;}
.portfolio a:hover{background:var(--portfolio);}
.blog a:hover{background:var(--blog);}
.ateliers a:hover{background:var(--ateliers);}
a.main:hover{background:var(--blue);}
a.pf:hover{background:var(--portfolio);}
a.bg:hover{background:var(--blog);}
a.at:hover{background:var(--ateliers);}

a.pf:before,a.bg:before,a.at:before,a.main:before{
	content:"";
	display:inline-block;
	vertical-align: center;
	margin:0 7px 0 -2px;
	width:20px;
	height:20px;
	background:url(https://thomas-daveluy.fr/favicon.ico) no-repeat center;
	background-size:cover;
	border:1px solid rgba(255,255,255,.5);
}
a.main:before{border:none;}
a.pf:before{background-image:url(https://portfolio.thomas-daveluy.fr/favicon.ico);}
a.bg:before{background-image:url(https://blog.thomas-daveluy.fr/favicon.ico);}
a.at:before{background-image:url(https://ateliers.thomas-daveluy.fr/favicon.ico);}

.main a.main, .portfolio a.pf, .blog a.bg, .ateliers a.at, .dev a.pf, .dev a.bg, .dev a.at{display:none;}
/*
figure{
	position:fixed;
	z-index:-2;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding:0;
}
figure.old{z-index:-3;}
figure.new{z-index:-1;animation:new 3s 1 ease;}
@keyframes new{from{opacity:0;}to{opacity:1;}}
figure img{
	width:100%;
	height:100%;
	object-fit: cover;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	animation:zoomslow 30s linear infinite alternate;
}
@keyframes zoomslow{
	from{width:100%;height:100%;}
	to{width:140%;height:140%;}
}
figure figcaption{
	position:fixed;
	right:20px;
	bottom:20px;
	background:rgba(255,255,255,.2);
	backdrop-filter:blur(8px) saturate(1.2) brightness(1.3);
	border-radius:0px 30px 30px 30px;
	padding:15px 20px;
	overflow:hidden;
	max-width:20px;
	max-height:30px;
	transition:all .25s;
}
figure.old figcaption{transform: translateY(150px);}
figure.new figcaption{animation:newFig 2.5s ease-out 1;}
@keyframes newFig{
	0%,66%{transform: translateY(150px);}
	100%{transform: translateY(0px);}
}
figure figcaption:hover{
	max-width:300px;
	max-height:70px;
	border-radius:0px 15px 15px 15px;
	backdrop-filter:blur(8px) saturate(1.2) brightness(2);
	background:rgba(255,255,255,.6);
}
figure figcaption:before{
	content:"i";
	position:absolute;
	top:7px;
	left:7px;
	font-size:40px;
	text-align:center;
	line-height:40px;
	border:3px solid #000;
	width:40px;
	height:40px;
	border-radius:40px;
	transition:all .25s;
}
figure figcaption:hover:before{
	top:15px;
	left:15px;
	font-size:22px;
	line-height:26px;
	border:2px solid #000;
	width:24px;
	height:24px;
}
figure figcaption h2, figure figcaption p{
	margin:0;
	padding:0px 0px 10px;
	white-space:nowrap;
	opacity:0;
	transition:all .25s;
}
figure figcaption h2{padding-left:35px;}
figure figcaption p{text-align:right;padding-bottom:0;}
figure figcaption p a{font-size:16px;}
figure figcaption:hover h2, figure figcaption:hover p{opacity:1;}
*/
main{
	position:absolute;
	top:calc(50% - 25px);
	left:50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width:calc(100% - 40px);
	max-width:480px;
	transition: cubic-bezier(.5,1.85,.5,1) .5s;
}
body.hover main{
	transform: translate(-50%, -50%) scale(.5);
	filter:blur(10px);
	opacity:0;
	pointer-events:none;
}
main h1{
	font-size:0;
	backdrop-filter:blur(8px) saturate(1.2) brightness(1.3);
	background:rgba(255,255,255,.1);
	width:100%;
	height:200px;
	mask: url(https://thomas-daveluy.fr/scripts/pictures/404.svg) no-repeat center;
	mask-size:contain;
}
main.e403 h1{mask-image: url(https://thomas-daveluy.fr/scripts/pictures/403.svg);}
main.e500 h1{mask-image: url(https://thomas-daveluy.fr/scripts/pictures/500.svg);}
main>div{
	background:rgba(255,255,255,.6);
	backdrop-filter:blur(8px) saturate(1.2) brightness(2);
	padding:20px;
	border-radius:15px;
	margin-top:40px;
	font-size:22px;
	box-shadow:0 2px 5px rgba(0,0,0,.25)
}
main p{
	margin:0;
	padding:0;
	text-shadow:0 0 3px #fff;
	display:flex;
	justify-content:space-evenly;
}
main p:first-of-type{
	display:block;
	position:relative;
	margin:0 auto;
	width:max-content;
	max-width: calc(100% - 60px);
	padding-left:60px;
}
main p:first-of-type:before{
	position:absolute;
	top:0;
	left:0;
	content:"";
	width:46px;
	height:54px;
	background:url(https://thomas-daveluy.fr/scripts/pictures/i404.svg) no-repeat center;
	background-size:contain;
}
main.e403 p:first-of-type:before{background-image:url(https://thomas-daveluy.fr/scripts/pictures/i403.svg);}
main.e500 p:first-of-type:before{background-image:url(https://thomas-daveluy.fr/scripts/pictures/i500.svg);}
main p:nth-last-child(2){
	padding:20px 0;
	margin:20px 0;
	border-top:2px solid rgba(0,0,0,.1);
	border-bottom:2px solid rgba(0,0,0,.1);
}

@media screen and (max-width:500px){
	main {top: 20px;transform: translate(-50%, 0);}
	body.hover main{transform: translate(-50%, 0) scale(.5);}
	main > div {margin-top: 0px;}
	main h1{height:calc(100svh - 540px);}
	main p:first-of-type br{display:none;}
	main p:nth-last-of-type(2){flex-direction:column;gap:15px;align-items:center;}
	main p:last-of-type a{text-align:center;padding: 3px 18px 3px 18px;}
	main p:last-of-type a:before{display:block;margin:0 auto;	}
}
@media screen and (max-height:700px){
	main {top: 20px;transform: translate(-50%, 0);}
	body.hover main{transform: translate(-50%, 0) scale(.5);}
	main > div {margin-top: 0px;}
	main h1{height:calc(100svh - 450px);}
}
@media screen and (max-height:700px) and (max-width:500px){
	main {top: 10px;transform: translate(-50%, 0);}
	body.hover main{transform: translate(-50%, 0) scale(.5);}
	main h1{height:calc(100svh - 480px);}
}
@media screen and (max-height:400px){
	main {
		top: 10px;
		left:10px;
		bottom:10px;
		transform: translate(0, 0);
		max-width:60%;
		width:60%;
	}
	body.hover main{transform: translate(0, 0) scale(.5);}
	main>div {
		height:calc(100% - 40px);
		width:calc(100% - 40px);
		overflow:auto;
		display:flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	main h1{
		height:100%;
		position:absolute;
		right:0;
		width:calc(67% - 20px);
		height:50%;
		transform: translateX(100%);
	}	
}