/* -- GENERAL style -- */

body {
    background-color: #333;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 0px;
  }


/* -- NAVIGATION -- */  

.nav {
    background-color: #333;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav a {
    text-decoration: none;
    color: white;
    margin-right: 20px;
}

.nav a:hover {
    border-bottom: 2px solid #0084ff;
}

.navlink {
    justify-content: right;
}

.navbar {
    margin-left: 20px;
  }


.navprom p2 {
    color: #0084ff;
    font-weight: bold;
    font-size: 30px;
}


/* -- WHAT IS HANS -- */  

h1 {
    margin-top: 55px;
    text-align: center;
    color: #0084ff;
}

.parentWhans {
    display: flex;
    grid-template-columns: 100% 100%;
  }

.whans-container1 {
    background-color: #444;
    word-wrap: break-word;
    float: left;
    width: 50%;
}

.whans-container2 {
    background-color: #555;
    word-wrap: break-word;
    float: left;
    width: 50%;
}

.whans1p {
    margin-left: 20px;
}

.whans2p {
    font-size: 16;
}

.whansCont2 {
    margin-left: 20px;
}

p1 {
    font-size: 20px;
}


p2 a {
    text-decoration: none;
    color: #0084ff;
}


/* -- EXAMPLE IMAGES -- */  

#imgdesc {
    text-decoration: none;
}

.image-container {
    background-color: #333;
    display: grid;
    grid-template-columns: 300px 1fr; 
    grid-gap: 200px; /* Abstand zwischen den Bildern */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

.image {
    width: 312px;
    height: 312px;
    margin: 10px;
    align-items: left;
}


/* -- NEWS CONTAINER -- */

#breaking-news {
    width: 100%;
    height: 30px;
    background-color: #0084ff;
    position: absolute;
    top: 55px;
    right: 0px;
}
  
#breaking-news-text {
    margin-top: 4px;
    font-size: 20px;
    text-align: center;   
}
  

/* -- COPY CODE -- */  

#code {
    margin-left: 20px;
    margin-top: 50px;
    width: 500px;
    height: 220px;
    resize: none; /* Diese Eigenschaft sorgt dafür, dass die Textarea nicht verändert werden kann */
    background-color: black; /* Hintergrundfarbe schwarz */
    color: green; /* Textfarbe grün */
}


/* -- FOOTER */

.end {
    background-color: black;
}

.footer{
    display: flex;
    justify-content: space-between;
    padding: 20px;

}

.footer-left, .footer-right{
    width: 45%;

}

.footer-heading{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-content ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.footer-content li{
    margin-bottom: 10px;
}

.footer-content li a{
    text-decoration: none;
    color: white;
}

.footer-content li a:hover {
    border-bottom: 2px solid #0084ff;
}

.copyright {
    text-align: center;
    margin-top: 10px;
    text-decoration: none;
    color: white;
}

.footerInvis {
    color: black;
}


/* #### PRIVACY POLICY #### */

.privacy-center-text {
    text-align: center;
    margin: 0 auto;
    width: 50%;
    word-wrap: break-word;
    
}

.privacy-center-text a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.privacy-text_hover a:hover {
    border-bottom: #0084ff 1px solid;
}

/* #### ABOUT US #### */

.about-center-text {
    text-align: left;
    margin-left: 10%;
    margin-right: 50%;
    font-family: 'Times New Roman', Times, serif;
}

.about-img {
    background-color: #555;
}

.about-image-container {
    background-color: #e8e5de;
    align-items: center;
    display: flex;
    justify-content: center;
}

.about-center-us {
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    margin-top: 4%;
    margin-bottom: 4%;
    text-align: left;
    margin-left: 10%;
    margin-right: 50%;
}

.about-center-us a:hover {
    border-bottom: 1px solid brown;
}

.about-center-hiring {
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    text-align: left;
    margin-left: 10%;
    margin-right: 50%;
}

.aboutus-container {
    display: flex;
    align-items: right;
  }

.textus {
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    width: 40%;
    margin-left: 10%;
    text-align: left;
  }
  
.imageus {
    width: 20%;
    margin-right: 10%;
    text-align: right;
  }

.imgus {
    max-width: 100%;
    height: auto;
}

/* #### CAREERS #### */

.careers-center-text {
    text-align: left;
    margin-left: 34%;
    margin-right: 30%;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    margin-bottom: 4%;
}

.careers-center-text a {
    text-decoration: none;
    color: white;
}

.careers-center-text a:hover {
    border-bottom: 1px solid brown;
}