@font-face {
    font-family: "gil-sem";
    src: url(fonts/Gilroy-Semibold.ttf);
}

@font-face {
    font-family: "gil-ita";
    src: url(fonts/Gilroy-BoldItalic.ttf);
}

* {
    margin: 0;
    transition: 0.1s all ease-in-out;
}

body {
    width: 100%;
    height: 100%;
    user-select: none;
    overflow: hidden;
    font-family: "Montserrat-Bold";
    transition: 0.3s all ease-in-out !important;
    text-transform: uppercase;
    opacity: 0;
    /* 1 für preview */
}

:root {
    --px-in-vh: 0.09360251046025104vh;
}

.deathscreen-container {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

#skull2 {
    position: absolute;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    width: calc(var(--px-in-vh) * 344);
    animation: 2s fly;
    animation-iteration-count: infinite;
}

@keyframes fly {
    0% {
        top: 7.9%;
    }

    50% {
        top: 9.1%;
    }

    100% {
        top: 7.9%;
    }
}

.text1 {
	position: absolute;
	top: 37.3vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: 7.222vh;
	font-family: "gil-ita";
	background: linear-gradient(
		180.27999999999997deg,
		#FFFFFF 0%,
		#818181 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0.120vh #FFFFFF;
	text-shadow: 0.000vh 0.000vh 2.648vh #ffffff6d;
}

.text2 {
	position: absolute;
	top: 45.2vh;
	left: 50%;
	transform: translateX(-50%);
	font-size: 7.778vh;
	font-family: "gil-ita";
	background: linear-gradient(
		180.27999999999997deg,
		#C200AB 0%,
		#9e007900 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0.120vh #C200AB;
	text-shadow: 0.000vh 0.000vh 2.648vh #C200ABb8;
}

.impulsebox {
    position: absolute;
    top: 27.6vh;
    width: 143.056vh;
    height: 32.037vh;
}

.impulse {
    position: absolute;
    top: 0vh;
    left: -2.6vh;
    width: 148.2vh;
}

#textb {
    position: absolute;
    top: 32%;
    width: calc(var(--px-in-vh) * 1120);
}

#respawntext {
    position: absolute;
    top: 61%;
    width: calc(var(--px-in-vh) * 350);
}

.blur1 {
    position: absolute;
    width: calc(var(--px-in-vh) * 109);
    height: calc(var(--px-in-vh) * 109);
    border-radius: 10vh;
    bottom: 15%;
    left: 5%;
    background: var(--main-color);
    filter: blur(calc(var(--px-in-vh) * 125));
}

.verbleibend {
    position: absolute;
    color: #fff;
    top: 62.4%;
    font-family: "Montserrat-SemiBold";
    font-size: calc(var(--px-in-vh) * 25);
}

.time-left {
    position: absolute;
    bottom: 30.8vh;
    font-family: "gil-ita";
    font-size: 4.630vh;
    color: #fff;
    text-shadow: 0.000vh 0.000vh 2.648vh rgba(255, 255, 255, 0.63);
}

.text-rr {
    position: absolute;
    bottom: 36.1vh;
    font-family: "gil-ita";
    font-size: 3.519vh;
    color: #fff;
    text-shadow: 0.000vh 0.000vh 2.648vh rgba(255, 255, 255, 0.63);
}

.box-g {
    position: absolute;
    width: calc(var(--px-in-vh) * 48);
    height: calc(var(--px-in-vh) * 48);
    bottom: 14.4%;
    border-radius: 10px;
    border-radius: calc(var(--px-in-vh) * 10);
    left: 25.65%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#icon {
    position: absolute;
    width: calc(var(--px-in-vh) * 155);
}

.box-e {
    position: absolute;
    width: calc(var(--px-in-vh) * 48);
    height: calc(var(--px-in-vh) * 48);
    bottom: 18.8%;
    border-radius: 10px;
    border-radius: calc(var(--px-in-vh) * 10);
    left: 48.8%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-h {
    position: absolute;
    width: calc(var(--px-in-vh) * 48);
    height: calc(var(--px-in-vh) * 48);
    bottom: 14.4%;
    border-radius: 10px;
    border-radius: calc(var(--px-in-vh) * 10);
    left: 71.9%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.g-text {
    position: absolute;
    color: #fff;
    bottom: -3.7vh;
    text-align: center;
    width: 44vh;
    font-family: "gil-sem";
    font-size: 1.852vh;
}

.taste1-klammer1 {
    margin-left: 0.1vh;
    color: var(--main-color);
}

.taste1-klammer2 {
    margin-right: 0.1vh;
}

.e-text {
    position: absolute;
    color: #fff;
    bottom: -3.7vh;
    text-align: center;
    width: 44vh;
    font-family: "gil-sem";
    font-size: 1.852vh;
}

.taste2-klammer1 {
    margin-left: 0.1vh;
    color: var(--main-color);
}

.taste2-klammer2 {
    margin-right: 0.1vh;
}

.h-text {
    position: absolute;
    color: #fff;
    bottom: -3.7vh;
    text-align: center;
    width: 44vh;
    font-family: "gil-sem";
    font-size: 1.852vh;
}

.taste3-klammer1 {
    margin-left: 0.1vh;
    color: var(--main-color);
}

.taste3-klammer2 {
    margin-right: 0.1vh;
}