/* style.css */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}
.header {
    flex: 66;
}
.left-column {
    flex: 70;
    padding: 20px;
    background-color: #f0f0f0;
}
.right-column {
    flex: 30;
    padding: 20px;
    background-color: #e0e0e0;
}
.footer {
    flex: 34;
}
.footer-column {
    flex: 33.33;
    padding: 10px;
    background-color: #d0d0d0;
}

/* style.css */
.main-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* .header, .footer haben automatische Höhe, .content nimmt den verbleibenden Raum ein */
    height: 100vh; /* Stellen Sie sicher, dass der Container die volle Höhe des Viewports einnimmt */
}
.header {
    display: flex;
    flex-grow: 1; /* Lässt den .header Block den verbleibenden Raum einnehmen */
    flex-wrap: nowrap; /* Verhindert, dass die Elemente umgebrochen werden */
    overflow: hidden; /* Verhindert, dass der Header scrollt */
}
.left-column, .right-column {
    overflow-y: auto; /* Ermöglicht das Scrollen innerhalb der Spalten */
    padding: 20px;
    flex: 1; /* Gleichmäßige Verteilung des Platzes zwischen den Spalten */
    max-width: 50%; /* Begrenzt die maximale Breite der Spalten */
}
.footer {
    display: flex;
    padding: 10px;
    background-color: #d0d0d0; /* Beispielhintergrundfarbe */
    grid-row: 1;
    max-height: 10vh; /* Begrenzt die Höhe auf maximal 10vh */
    overflow: auto; /* Fügt einen Scrollbalken hinzu, falls der Inhalt die Höhe überschreitet */

}





.question-answer {
    display: flex;
    flex-direction: column; /* Ändern Sie die Richtung auf vertikal */
    margin-bottom: 20px;
}
.question {
    padding-bottom: 20px; /* Fügen Sie einen Abstand am Ende hinzu */
    text-align: left;
    display:none;
}
.question::before {
    content: "User: ";
    font-weight: bold;
}
.answer {
    padding-top: 20px; /* Fügen Sie einen Abstand am Anfang hinzu */
    text-align: left; /* Ändern Sie die Ausrichtung auf links */
    display:none;
    flex-direction: column; /* Ordnet die Kinder (<pre><code> Blöcke) vertikal an */
}
.answer::before {
    content: "Phind: ";
    font-weight: bold;
}

/* style.css */
.question, .answer {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc; /* Fügt einen Rand um die Kästen hinzu */
    border-radius: 10px; /* Abgerundete Ecken */
    width: fit-content; /* Passende Breite basierend auf dem Inhalt */
    max-width: 95%; /* Begrenzt die maximale Breite der Kästen */
    word-wrap: break-word; /* Stellt sicher, dass lange Wörter umgebrochen werden */
    overflow-x: hidden; /* Fügt einen Scrollbalken hinzu, falls der Inhalt die Breite überschreitet */
}

.question {
    background-color: #f0f0f0; /* Beispielhintergrundfarbe für Fragen */
    text-align: left; /* Linksbündiger Text */
}

.answer {
    background-color: #e0e0e0; /* Beispielhintergrundfarbe für Antworten */
    margin-left: 20px; /* Leichtes Einrücken der Antworten */
    text-align: left; /* Linksbündiger Text */
}


code {
    line-height: 1 !important;

}
pre [class*="language-"]{
    line-height: 1 !important;

}
div.answer>pre{
    font-family: Arial, sans-serif;
}
.show {
    display:none;
}
.info {
    display:none;
}
#informatik-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    font-size: 24px;
    cursor: pointer;
    border-radius: 10px; /* Abgerundete Ecken */
    transition: background-color 0.5s, transform 0.5s;
    max-width: 30%;
    text-align: center;
}

#informatik-button:hover {
    background-color: #0056b3;
}

#informatik-button.animate {
    animation: rotateAndChangeColor 1s infinite;
}

@keyframes rotateAndChangeColor {
    0% {
        transform: rotate(0deg);
        background-color: #007BFF;
    }
    50% {
        transform: rotate(180deg);
        background-color: #0056b3;
    }
    100% {
        transform: rotate(360deg);
        background-color: #007BFF;
    }
}
.coloredCircle {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    background-image: radial-gradient(circle at center, #ced131, #f00b0b);
    border-radius: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
    transition: transform 0.5s ease-in-out, opacity 1s ease-in-out;
    opacity: 1;
}

.coloredCircle:hover {
    transform: scale(1.5);
    opacity: 0.8;
}