* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica", "Arial", sans-serif;
}

.anchor {
    scroll-margin-top: 70px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #373c46; /* #9696a0 */
    padding-bottom: 60px;
}

.container {
    display: flex;
    box-sizing: border-box;
}

.wrap {
    flex: 1;
    height: 1000px;
    box-sizing: border-box;
}
  
.inhalt {
    background-color: #373c46;    
    width: 706px;
    margin: 0 auto;
    box-sizing: border-box;
    border-left: 0px solid black; /* 3px */
    border-right: 0px solid black; /* 3px */
    border-bottom: 0px solid black; /* 3px */
}

header {
    display: block;
}

img {
    display: block;
}

nav {
    margin-left: 20px;
    margin-bottom: 30px;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 8px;
}

nav a {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #29C5F6;
}

nav a:hover {
    text-decoration: underline;
    color: white;
}

#menuList {
    display: block;
}

#menuToggle, 
label[for="menuToggle"] {
    display: none;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #29C5F6;
}

a:hover {
    text-decoration: underline;
    color: white;
}

#about img {
    width: 700px;
    height: auto;
    margin-bottom: 20px;
}

h3 {
    color: #29C5F6;
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3),
                 3px 3px 6px rgba(0, 0, 255, 0.3),
                 -2px -2px 3px rgba(255, 0, 0, 0.3);
}

h3:hover {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3),
                7px 7px 7px rgba(0, 0, 255, 0.3),
                -5px -5px 4px rgba(255, 0, 0, 0.3);
    transition: text-shadow 0.35s ease-in-out;
}

p {
    color: #9696a0;
    line-height: 120%;
    margin: 20px;
    margin-top: 8px;
    margin-bottom: 12px;
}

p:hover {
    color: white;
    transition: color 0.35s ease-in-out;
}

#contact img {
    width: 700px;
    height: auto;
    margin-bottom: 20px;
}

#contact form {
    width: 340px;
    height: 390px;
    margin: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.404);
    background-color: #9696a0;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 10px;
}

.list-title {
    font-size: 28px;
    font-weight: bold;
    margin-top: 30px;
}

.topic-title {
    color: #29C5F6;
    font-size: 20px;
    font-weight: 600;
}

.detail-container {
    margin-left: 18px;
}

.topic-detail {
    font-size: 12px;
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #9696a0;
    margin-left: 2px;
    margin-right: 0px;
}

.topic-detail:hover {
    color: #FE4716;
}

.topic-detail.random:hover {
    color: #cec379;
}

.topic-detail.py:hover {
    color: #0dd621;
}

.topic-detail.sql:hover {
    color: #ec23b7;
}

.topic-detail.html:hover {
    color: #f74040;
}

.topic-detail.css:hover {
    color: #60a0f9;
}

.topic-detail.php:hover {
    color: #d1f008;
}

.topic-detail.js:hover {
    color: #e09c35;
}

.down-link {
    float: right;
    margin-right: 15px;
}

li p {
    margin-top: 3px;
    margin-bottom: 3px;
}

.textabsatz {
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
    margin-top: 15px;
}

#contact label{
    color: #373e49;
    font-weight: bold;
}

#contact input{
    height: 40px;
    width: 240px;
    padding: 6px;
    border-radius: 10px;
    border: none;
    background-color: #373e49;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.212);
    color: white;
    font-size: 14px;
}

#contact textarea{
    height: 80px;
    width: 240px;
    background-color: #373e49;
    color: white;
    border-radius: 10px;
    font-size: 14px;
    padding: 6px;
}

#contact button{
    height: 40px;
    width: 100px;
    background-color: #373e49;
    color: #29C5F6;
    border-radius: 10px;
    font-size: 14px;
    padding: 6px;    
}

#contact_answer {
    margin-top: 60px;
    margin-right: 20px;
    color: #9696a0;
}

#contact_answer p:hover {
    color: white;
}

#random-section {
    margin-top: 60px;
    margin-right: 20px;
    color: #9696a0;
}

#random-section p:hover {
    color: white;
}

#impressum {
    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
    color: #9696a0;
}

#impressum h3 {
    margin-left: 0;
}

#impressum h4 {
    margin-left: 0;
}

#impressum p {
    margin-left: 0;
}

footer {
    font-size: 14px;
    height: 300px;
    color: #9696a0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 20px;
}

footer p {
    margin-left: 7px;
}

footer p:hover {
    color: white;
}

footer a {
    text-decoration: none;
    color: #29C5F6;  
}

footer a:hover {
    text-decoration: underline;
    color: white;
}

.back-to-top {
    margin: 20px;
    float: right;
}

.line-numbers {
    width: 624px;
}

#rickroll {
    margin-left: 20px;
}

.rickroll-tooltip {
    position: relative;
    display: inline-block;
    cursor: help; /* Ändert den Mauszeiger zu einem Hilfsmittelzeiger */
  }

.rickroll-tooltip:hover::after {
    content: "Du fragst dich vielleicht, warum hier ein Video von Rick Astley verlinkt ist. Dies ist ein bekannter Internet-Scherz, der als 'Rickroll' bekannt ist. Es passiert, wenn jemand einen Link zu etwas verspricht, das interessant oder informativ sein soll, aber stattdessen wirst du auf das Musikvideo von Rick Astleys Song 'Never Gonna Give You Up' geleitet. Es ist eine lustige Art, Leute hereinzulegen."; 
    position: absolute;
    top: 90%;
    left: 240px;
    transform: translateX(-50%);
    width: 420px; /* Breite des Tooltips anpassen */
    padding: 10px;
    background-color: #fff;
    border: 3px solid #29C5F6;
    border-radius: 6px;
    color: black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-size: 13px;
    line-height: 1.4;
    text-align: left; /* Text linksbündig ausrichten */
    white-space: normal; /* Mehrzeiligen Text ermöglichen */
    visibility: visible; /* Sichtbarkeit bei Hover */
    opacity: 1; /* Vollständig sichtbar bei Hover */
    transition: opacity 0.3s ease-in-out; /* Sanfter Übergang bei Hover */
}