@import url('https://fonts.googleapis[class~="com"]/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@keyframes openMenu {
    0% {
        transform: scale(0.8); /* Nur Skalierung */
		transform: translate(-50%, -50%) scale(0.6);
    }
    100% {
		transform: translate(-50%, -50%) scale(0.8);
        opacity: 1; /* Sichtbar */
    }
}

@keyframes closeMenu {
    0% {
        transform: translate(-50%, -50%) scale(1); /* Skalierung auf Normalgröße */
        opacity: 1; /* Sichtbar zu Beginn */
    }
    100% {
        transform: translate(-50%, -50%) scale(0.6); /* Skalierung auf kleiner */
        opacity: 0; /* Unsichtbar am Ende */
    }
}

#controls {
    font-family: 'Montserrat', sans-serif; /* Angwende die Montserrat Schriftart */
    color: #fff;
    position: absolute;
    bottom: 40px;
    right: 40px;
    font-size: 16px;
}

.controls {
    display: none;
}

.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    width: 40vh;
    height: 13vh;
    background: var(--background);
    border-radius: 2.5vh;
    padding: 2.5vh;
	animation: openMenu 0.5s ease-out forwards; /* Animation beim Öffnen */
}


.head {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dialog.big {
    height: 220px;
}

.dialog .head {
    font-size: 2.8vh;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0px 1px 5px rgba(255, 72, 72, 0.7);
}

.dialog .head span::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dialog input[type="text"] {
    width: 100%; /* Die Breite auf 100% setzen */
    background: rgba(255, 255, 255, 0.1);
    background-color: #00000027;
    border: none;
    border-radius: 1vh;
    outline: none;
    font-family: 'Montserrat', sans-serif; /* Angwende die Montserrat Schriftart */
    padding: 1.5vh;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    font-size: 1.75vh;
    margin: 0 auto 2vh auto; /* Zentriert das Element horizontal und fügt Abstand unten hinzu */
}

.dialog textarea {
    width: 100%;
    height: 128px;
    background: rgba(255, 255, 255, 0.05);
    border: 0.3vh solid rgba(255, 255, 255, 0.05);
    border-radius: 1vh;
    padding: 1.5vh;
    color: #fff;
    font-size: 1.6vh;
    transition: all 0.3s ease-in-out;
}

.dialog textarea:focus {
    border-color: #ff5e5e;
    box-shadow: 0 0 5px rgba(255, 94, 94, 0.8);
}

.dialog .button-container {
    display: flex;
    flex-direction: row; /* Buttons nebeneinander */
    justify-content: center; /* Buttons zentrieren */
    width: 100%;
    margin-top: 2vh; /* Anpassung des Abstands */
}

.dialog button {
    width: 48%; /* Buttons sollen 48% der Breite einnehmen, um nebeneinander zu bleiben */
    padding: 1.5vh; /* Padding für die Buttons */
    font-size: 1.75vh;
    border: 0.2vmax solid #00ff88; /* Border properties */
    border-radius: 1vh;
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.2); /* Schatten-Effekt */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    color: white;
    font-family: 'Montserrat', sans-serif; /* Angwende die Montserrat Schriftart */
    border: none;
    min-width: 190px; /* Minimum-Breite, um sicherzustellen, dass Buttons nicht zu schmal sind */
}

/* Abstand zwischen den Buttons */
.dialog button:not(:last-child) {
    margin-right: 15px; /* Füge zwischen den Buttons einen Abstand von 10px hinzu */
}

.dialog button[name="submit"] {
    background: linear-gradient(-45deg, #00ff88, #00ff08, #00ff95); /* Gradient-Hintergrund */
}

.dialog button[name="cancel"] {
    background: linear-gradient(90deg, rgba(215, 56, 56, 0.3) 0%, #FF4545 100%);
    color: white;
}

.dialog button:hover {
    transform: scale(1.05);
}


.head::before,
.head::after {
    content: "";
    flex-grow: 1;
    background: #00e1ff;
    height: 2px;
    margin: 0px 3px;
}

@keyframes pulse_green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(71, 255, 84, 0.8);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes pulse_red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 74, 71, 0.8);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}