/* Variables */

:root
{
	--cj--style--color-black: #131313;
	--cj--style--color-white: #f2eedc;
	--cj--style--color-green: #66c530;
	--cj--style--color-yellow: #fff200;
	--cj--style--color-pink: #f301c5;
	--cj--style--color-blue: #61fcfe;
	--cj--style--color-red: #fb0254;
}

/*.pink-color
{
	color: var(--cj--style--color-pink);
}

.blue-color
{
	color: var(--cj--style--color-blue);
}

.red-color
{
	color: var(--cj--style--color-red);
}*/


/* Structure */

.wp-block-post-title
{
	text-shadow: 1px 1px 1px var(--wp--preset--color--base), -1px -1px 1px var(--wp--preset--color--base), 1px -1px 1px var(--wp--preset--color--base), -1px 1px 1px var(--wp--preset--color--base);
}

@media(max-width: 599px)
{
	/*.wp-block-group:has(.wp-block-navigation__responsive-container-open:not(.always-shown))*/
	.wp-block-group:has(> .wp-block-navigation)
	{
		position: absolute;
		top: 0;
		z-index:20;
	}
	
	.wp-block-group:has(> .wp-block-site-logo)
	{
		padding-bottom: 0 !important;
	}
}

footer .logo
{
	opacity: 0.85;
	width: 120px;
}

/* Animation page d'accueil */

.home .wp-site-blocks
{
  opacity: 0;
  transition:all 4s;
  transition-delay: 2s;
}

.home header .wp-block-site-logo img
{
	visibility: hidden;
}

.home .home-frame
{
	background-image: url("/wp-content/themes/crazypalma/assets/images/jungle-layout.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index:20;
	transition:all 6s;
	transition-delay: 1s;
}

.home .home-logo
{
	width: 100%;
	height: 100%;
	position:absolute;
	top: 0;
	z-index:10;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:all 3s;
	transition-delay: 2s;
	
	/*animation: tilt-shaking;
	animation-duration: 0.2s;
	animation-delay: 1.5s;
	animation-iteration-count: 16;*/
}

/*@keyframes skew-x-shaking {
 0% { transform: skewX(-15deg); }
 5% { transform: skewX(15deg); }
 10% { transform: skewX(-15deg); }
 15% { transform: skewX(15deg); }
 20% { transform: skewX(0deg); }
 100% { transform: skewX(0deg); }
}

@keyframes skew-y-shaking {
 0% { transform: skewY(-15deg); }
 5% { transform: skewY(15deg); }
 10% { transform: skewY(-15deg); }
 15% { transform: skewY(15deg); }
 20% { transform: skewY(0deg); }
 100% { transform: skewY(0deg); }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}*/

.admin-bar .home-logo
{
	top: var(--wp-admin--admin-bar--height);
}

.home .home-logo img
{
	transition:all 2s;
	transition-delay: 1s;
	width: max(35%, 250px);
	max-width: 100%;
}




/* Pages */

.page .entry-content
{
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.page .entry-content strong
{
	font-weight: normal;
	color: var(--cj--style--color-yellow);
}

.wp-block-group.has-background
{
	background-repeat: no-repeat;
	/*background-size: max(var(--wp--style--global--wide-size), 100%) auto !important;*/
	background-size: max(calc(var(--wp--style--global--wide-size) - 250px), 100%) auto !important;
	z-index:-1;
}

/*@media (min-width:var(--wp--style--global--wide-size))
{
	.wp-block-group.has-background
	{
		background-size:contain;
	}
}*/



/* Cadre lumineux */

.animated-border
{
	position: relative;
	/*border: 1px solid var(--wp--preset--color--contrast);*/
	border-radius: 10px;
	padding:var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
}


@property --angle
{
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.animated-border::after, .animated-border::before
{
	/*--angle: 0deg;*/
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	background-image:conic-gradient(from var(--angle), var(--cj--style--color-green), var(--cj--style--color-pink), var(--cj--style--color-blue), var(--cj--style--color-red), var(--cj--style--color-green));
	top:50%;
	left:50%;
	translate: -50% -50%;
	z-index:-1;
	padding:1px;
	border-radius: 10px;
	animation: 3s spin linear infinite;
}

.home .animated-border::after, .home .animated-border::before
{
	animation-delay: 4s;
}

.animated-border::before
{
	filter: blur(1.5rem);
	opacity:0.5;
}

@keyframes spin
{
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}