/*
Theme Name: DeFüür und DeRäge
Theme URI: 
Author: Thöni Design
Author URI: 
Description: https://thoeni.design
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: defueuer-und-deraege
Tags: 
*/


:root {
    /* the only thing needed is a grainy/noisy background image */
    --glitter: url("/wp-content/themes/defueuer-und-deraege/silver-glitter-background.png");
}

.fire::before,
.fire::after {
    content: "";
    position: absolute;
    inset: -10px;
	z-index: 10;
	pointer-events: none;
}

.fire::before {
    content: "";
    background-image: var(--glitter), var(--glitter),
        linear-gradient(
            0deg,
            white 0px,
            #ff8951 5px,
            #dcbc169c 30%,
            transparent 70%
        ),
        radial-gradient(ellipse at bottom, transparent 30%, black 60%);
    background-size: 350px 500px, 400px 650px, 100% 100%, 100% 100%;
    background-blend-mode: hard-light, color-dodge, multiply;
    background-position: 0px 0px, 0px 0px, var(--gradientPos);
    background-repeat: repeat, repeat, repeat, no-repeat;
    mix-blend-mode: color-dodge;
    filter: brightness(3.7) blur(7px) contrast(6);
    animation: fire 1.75s linear infinite;
    box-shadow: inset 0 -40px 50px -60px #63bbc5;
}

@keyframes fire {
    0% {
        background-position: center 0px, center 0px, 50% 100%, center center;
    }
    100% {
        background-position: center -500px, center -650px, 50% 100%, center center;
    }
}






html,
body {
    min-width: 100%;
    min-height: 100%;
}

.fire {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fire > *:not(img) {
	z-index: 20;
}

.fire-small::before,
.fire-small::after {
    height: 33%;
    bottom: -10px !important;
	left: 0;
	inset: unset;
	width: 100%;
}

.mainheader {
	position: fixed;
	z-index: 999;
	right: 0;
	top: 0;
}

.mainheader > div {
		border: 0px;
	}

.mainheader svg {
		width: 32px;
	height: 32px;
	}
.mainheader nav {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}