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 a{
	display:inline-block;
	width:max-content;
	padding:7px 15px 5px;
	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;
}
figure a:hover{background:var(--blue);color:#fff;}
figure img{
	width:100%;
	height:100%;
	object-fit: cover;
	position:absolute;
	left:50%;
	top:50%;
	background:transparent;
	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;
	cursor:pointer;
}
figure figcaption:hover{backdrop-filter:blur(8px) saturate(1.2) brightness(2);background:rgba(255,255,255,.6);}
body.hover figure figcaption{cursor:default;}
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);}}
body.hover figure figcaption{
	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;
}
body.hover figure figcaption: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;}
body.hover figure figcaption h2, body.hover figure figcaption p{opacity:1;}

@media screen and (max-height:700px){
	figure figcaption {display:flex;gap:15px;}
	figure figcaption h2{padding-bottom:0;}
	body.hover figure figcaption {max-width:500px;}
}
@media screen and (max-height:700px) and (max-width:500px){figure figcaption {bottom:10px;}}
@media screen and (max-height:350px){
	figure figcaption {flex-direction:column;align-items:flex-end;bottom:10px;right:10px;}
	body.hover figure figcaption {max-width:30%;max-height:55%;}
	body.hover figure figcaption:before {transform: scale(0);}
	figure figcaption h2 {padding-left:0px;white-space:wrap;text-align:right;}
}