body {
    background-attachment: scroll;
    background-image: url("/web_images/bg.png"); /* Hintergrundbild des Elements */
    background-repeat: no-repeat; /* Wiederholung des Hintergrundbildes */
    background-size: cover; /* Größe des Hintergrundbildes */
    background-color: #2d1dbb; /* Hintergrundfarbe des Elements */
    color: #421313; /* Textfarbe des Elements */
    font-family: Arial, sans-serif; /* Schriftfamilie des Textes */
    display: grid; /* Das Element wird als Flex-Container angezeigt */
    justify-content: center; /* Ausrichtung der flexiblen Elemente entlang der Hauptachse des Containers */
    align-items: center; /* Ausrichtung der flexiblen Elemente entlang der Querachse des Containers */
    height: 100vh; /* Höhe des Elements */
    margin: 0; /* Außenabstand des Elements */
    flex-direction: column; /* Richtung der flexiblen Elemente im Container */
}
h1 {
    text-align: center; /* Ausrichtung des Textes im Element */
    color: #00008B; /* Textfarbe des Elements */
}
.container {
    width: 100%; /* Breite des Elements */
    margin: auto; /* Außenabstand des Elements */
}
.input-box {
    margin-bottom: 20px; /* Außenabstand des Elements am unteren Rand */
    box-shadow: 5px 5px 16px 0px rgba(0,0,0,2); /* Schatten des Elements */
    border-radius: 5px;
}
.output-container {
    max-height: 500px; /* Maximale Höhe des Elements */
    overflow: auto; /* Scrollbar, wenn der Inhalt überläuft */
    display: block; /* Das Element wird als Flex-Container angezeigt */
    justify-content: space-between; /* Ausrichtung der flexiblen Elemente entlang der Hauptachse des Containers */
    flex-wrap: wrap; /* Flex-Elemente werden in mehrere Zeilen gewickelt */
    box-shadow: 5px 5px 16px 0px rgba(0,0,0,2);
}
.output-box {
    width: 95%; /* Breite des Elements */
    display: block; /* Das Element wird als Flex-Container angezeigt */
    border: 1px solid #ccc; /* Rand des Elements */
    padding: 10px; /* Innenabstand des Elements */
    box-shadow: 2px 8px 16px 0px rgba(0,0,0,2); /* Schatten des Elements */
    border-radius: 5px;
    margin-bottom: 20px; /* Außenabstand des Elements am unteren Rand */
    box-shadow: 5px 5px 16px 0px rgba(0,0,0,2);
}
.output-box h3 {
    margin-top: auto; /* Außenabstand des Elements am oberen Rand */
    display: block; /* Das Element wird als Flex-Container angezeigt */
    box-shadow: 5px 5px 16px 0px rgba(0,0,0,2);
}
.gcode-line {
    background-color: #f9f9f9; /* Hintergrundfarbe des Elements */
    border: 1px solid #eee; /* Rand des Elements */
    padding: 1px; /* Innenabstand des Elements */
    margin: 5% 0; /* Außenabstand des Elements */
   
}
form {
    background-color: #1b63a7; /* Hintergrundfarbe des Elements */
    padding: 20px; /* Innenabstand des Elements */
    border-radius: 5px; /* Rundung des Elements Randes */ 
    box-shadow: 5px 5px 16px 0px rgba(0,0,0,2);
}
.highlight {
    color: rgb(235, 55, 10); /* Textfarbe des Elements */
}
 /* Stil für das Dropdown-Menü */
 .dropdown {
    position: relative;
    display: inline-block;
    background-color: #00008B; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Ecken abrunden */
    width: 100%; /* Breite auf 100% setzen, um Zeilenumbrüche zu verhindern */
    text-align: center; /* Menü mittig ausrichten */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Schatten hinzufügen */
    
}

/* Stil für die Dropdown-Links */
.dropdown-content {
    position: absolute;
    min-width: 160px;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Schatten hinzufügen */
    border-radius: 5px; /* Ecken abrunden */
    display: flex; /* Flexbox verwenden, um die Links nebeneinander anzuzeigen */
    flex-direction: column; /* Links vertikal anordnen */
    top: 50px; /* Menüpunkte nach unten verschieben */
    align-items: center; /* Menüpunkte mittig ausrichten */
    left: 50%; /* Menüpunkte mittig ausrichten */
    transform: translateX(-50%); /* Menüpunkte mittig ausrichten */
    width: 85%;
}

/* Stil für die Links im Dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: #f9f9f9; /* Hintergrundfarbe */
    margin: 5px; /* Abstand zwischen den Boxen */
    border: 1px solid #ddd; /* Rahmen um die Boxen */
    border-radius: 5px; /* Ecken der Boxen abrunden */
    text-align: left; /* Text links ausrichten */
    width: 90%; /* Breite auf 100% setzen, um Zeilenumbrüche zu verhindern */
    box-shadow: 5px 5px 16px 0px rgba(0,0,0,2);
}

/* Trennlinie zwischen den Links */
.dropdown-content a:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

/* Ändere die Hintergrundfarbe der Links beim Darüberfahren */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Hintergrundbild hinzufügen */
body {
    background-image: url("/web_images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Stil für die Überschrift */
h1 {
    text-align: center; /* Text mittig ausrichten */
    color: #00008B; /* Textfarbe auf dunkelblau setzen */
}
.result-box {
    width: 95%; /* Breite des Elements */
    display: block; /* Das Element wird als Flex-Container angezeigt */
    border: 1px solid #0921a8e7; /* Rand des Elements */
    padding: 10px; /* Innenabstand des Elements */
    box-shadow: 0px 8px 16px 0px rgb(29, 20, 119); /* Schatten des Elements */
    border-radius: 5px;
    margin-bottom: 20px; /* Außenabstand des Elements am unteren Rand */
    
}