html {
height:100%;
}

body{
    font-family: 'Raleway', sans-serif;
    color: rgb(157, 0, 0);
    text-align: center; 
    margin:0;
    min-height:100%;
}

/* CHANGE IT WHEN FINISH ARTICLES!!!!!!!!!!!!!!!!!!!!!!!! */

main{
    min-height: 80vh;
}

.container{
    width: 100%;
    height:100%;
    background-image: url(img/indexBack.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

*{
    text-shadow: 0px 0px 5px burlywood;
}

a:link, a:active, a:visited {
    text-decoration: inherit;
    color: inherit;
}

header {
    position: sticky;
    top: 0;
}

.containerColor {
        background-color: rgba(255, 255, 255, 0.5);
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
}

header {
    text-align: left;
}

header a, button, .goToForm {
    padding: 10px;
    border: rgb(157, 0, 0) solid 1px;
}

header a, .goToForm {
    display: inline-block;
    margin: 5px;
    background-color: whitesmoke;
}

header a:hover, button:hover, .goToForm:hover {
    background-color: rgb(157, 0, 0);
    color: white;
}

.goToForm {
display: block;
margin:20px auto 0;
width: max-content;
}

h1 {
    margin-top: 2%;
    text-align: center;
}

.introduction {
    line-height: 1.5;
    margin: 3% 20%;
    font-size:24px;
}

h2 {
    margin-bottom: 0px;
}

.langChoise, .professionChoice {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 3% auto;
    justify-content: space-between;
    align-items: flex-start;
}

.langChoise {
    width: 35%;
}

.langChoise div {
    width: 100%;
}

.langChoise p {
    font-size: 12px;
}

.professionChoice div {
    width: 30%;
}

.langChoise a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
    width: 90%;
}

 .langChoise div img:hover, .professionChoice div img:hover {
    transform: scale(1.1);
    filter: none;
}

.langChoise img {
    width: 100px;
    height: 50px;
    border-radius: 5px;
    filter:grayscale(0.1);
}

 .professionChoice img {
     width: 60%;
     border-radius: 50%;
     background-color: white;
     filter:grayscale(0.2);
 }


 .containerNurseArticles {
     background-image: url(img/nurseBack.jpeg);
     width: 100%;
     background-size: cover;
     background-attachment: fixed;
     background-position: center
 }

 .containerNurse{
    background-image: url(img/nurseBack.jpeg);
 }

 .containerPlus{
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-image: url(img/indexBack.jpg);
 }

 .containerCare{
     background-image: url(img/careBack.jpg);
 }

 .containerEngineer {
     background-image: url(img/engineerBack.jpg);
 }

 .containerRestaurant {
     background-image: url(img/restaurantBack.jpg);
 }

 .containerDriver {
     background-image: url(img/driverBack.png);
 }

 .containerProg {
     background-image: url(img/progBack.jpg);
 }

 .containerCare, .containerEngineer, .containerRestaurant, .containerDriver, .containerProg,  .containerNurse {
     width: 100%;
     background-size: cover;
     background-attachment: fixed;
     background-position: center
 }

.container{
    height: 100vh;
}
 

 .inProcess {
    width: 70%;
    margin: auto;
    line-height: 1.5;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 3% 20px;
}

 input {
     margin: 15px auto;
     width: 80%;
     padding: 10px 0;
      display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    outline: none;
    border: none;
    color: rgb(157, 0, 0);
 text-indent: 10px;
 font-weight: 600;
 }
 
 input::placeholder, input[type="email"] div, input [type="tel"] div, -webkit-input-placeholder {
 padding: 0 10px;
 color: rgb(157, 0, 0);
 }
 
 select {  
    border: none;
    outline: none;
    display: block;
    width: 80%;
    font-family: 'Raleway', sans-serif;
    color: rgb(157, 0, 0);
    font-weight: 600;
    padding: 10px;
    font-size: 16px;
    margin: 15px auto;
 }
 
 select option {
 padding: 10px;
 }
 
 option:hover {
 color:white;
background-color: rgb(157, 0, 0);
 }
 

 input[type="radio"] {
     display: auto;
     margin: 5px;
     width: auto;
     padding: 0;
 }

 .formDiv{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     width: 80%;
     margin: 5px auto;
 }

 label{
     margin-right: 20px;
     margin-left: 5px;
 }

form p {
    font-weight: 700;
    margin-block-end: 0;
}
.tickboxP {
    text-align:left; 
    width: 50%; 
    margin: 0 auto;
    line-height: 2;
}

.articleTitle {
    text-align: center;
}

.articleDate {
    padding: 10px;
    color: rgb(90, 10, 10);
    text-align: right;
    margin:0;
}

.articles > div {
    width: 70%;
    margin: 20px auto;
    text-align: justify;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.7);
}

.article{
    display: flex;
    gap: 20px;
    align-items: center;
}

.article img {
    display: block;
    min-width: 25%;
    width: 25%;
}

.articles h1+p, .application {
    width: 50%;
    margin: 0 auto;
    line-height: 1.5;
    text-align: justify;
}

.articles h1+p {
    text-align: center;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.7);
    width: fit-content;
}

.articleButton {
    text-align: right;
}

.buttonReadMore {
    padding: 10px;
    border: rgb(157, 0, 0) solid 1px;
}

.buttonReadMore:hover {
    background-color: rgb(157, 0 , 0);
    color: white;
}

.application {
    margin-top: 60px;
}

form{
    background-color: rgba(240, 240, 240, 0.5);
    width: 75%;
    margin: 10px auto;
    padding: 25px;
}


input[type="checkbox"] {
    display: inline-block;
    width: auto;
}

textarea {
    font-family: 'Raleway', sans-serif;
    border: none;
    outline: none;
    width: 60%;
    padding: 10px;
}

input[type="submit"] {
   color:rgb(157, 0 , 0);
    background-color: white ;
}

input[type="submit"]:hover, .goToForm:hover {
    background-color: rgb(157, 0, 0);
    color: white;
}  

input[type="checkbox"]:required{
    float: left;
    margin:8px 10px

}

footer {
    background-color: whitesmoke;
    position: sticky;
    bottom: 0;
}

.copyright {
    padding: 5px;
}

.webdev{
    font-size: 10px;
    text-align: right;
    width: 90%;
    margin: 5px auto;
}

.copyright a, .privacy a {
    text-decoration: underline;
}

.notice {
    width: 40%;
    text-align: justify;
    margin: 20px auto 50px;
}

.notice a{
    background-color: transparent;
}

.impressum {
    width: 40%;
    margin: 20px auto;
    line-height: 2;
    text-align: left;
    font-size: 20px;
    padding-bottom: 50px;
}

.privacy {
    width: 80%;
    margin: 0 auto;
    text-align: justify;
}

.privacy p:nth-of-type(n+16) {
    text-align: right;
}

.privacy span {
    font-weight: 700;
}

@media screen and (max-width:1400px) {
    .introduction{
        font-size: 16px;
    }

    .formDiv {
        width: 100%;
    }

    label {
        margin-right: 5px;
    }

    .tickboxP {
        width: 60%;
    }

    .professionChoice p {
        font-size: 14px;
    }

    .article img{
        min-width:35% ;
    }

    .notice{
        width: 60%;
    }

    .impressum{
        font-size: 16px;
    }

    .articles > div {
        width: 80%;
    }
}

@media screen and (max-width:992px){
.langChoise {
width: 55%;
}

.professionChoice {
    justify-content: center;
}

.tickboxP {width: 70%;}
.professionChoice div {
    width: 48%;
}

  .introduction, .formEmploy p {
  font-size: 14px!important;
  }

  input[type="checkbox"]:required {
    float: left;
    margin: 6px 10px;
}

.copyright {
    font-size: 12px;
}

.application {
    width: 80%;
}

.article{
    font-size: 13px;
}

.articleTitle{
    font-size: 20px;
}

.article img{
    min-width: 45%;
}
}



@media screen and (max-width:892px) {
  .formDiv {width: 60%;}    

  .formDiv label {
      font-size: 13px;
  }

  .tickboxP {
      width: 100%;
  }

  .professionChoice p {
    font-size: 13px;
}

.articles>div{
    padding: 10px;
}

.article{
    font-size: 12px;
}

.articleTitle{
    font-size: 17px;
}

.notice{
    width: 90%;
}


}

@media screen and (max-width:768px) {
    a{
        font-size: 12px;
    }
 .containerEngineer, .containerRestaurant, .containerDriver, .containerProg {
        height: 98vh;
    }

    .langChoise img {
        width: 80px;
        height: 40px;
    }

    .langChoise {
        width: 70%;
    }

    .professionChoice p {
        font-size: 11px;
    }

    .articles>div{
        width: 85%;
    }

    .article{
        flex-direction: column;
    }

    .article img {
        width: 90%;
    }

    .privacy {
        font-size: 13px;
    }
}

@media screen and (max-width:576px){

    .langChoise, .langChoise a{
        width: 95%;
    }

    .langChoise a {
        margin: 10px;
    }

   .professionChoice, .articles > div, form, .formEmploy p{
        width: 90%;

    }
    .langChoise p {
        font-size: 13px;
    }
    .professionChoice p {
        font-size: 10px;
    }
   
    h1{
        font-size: 20px;
    }

    .langChoise img {
        width: 75px;
        height: 40px;
    }

    .langChoise div, .professionChoice div {
        font-size: 14px;
    }
    
    .introduction {
  font-size: 13px!important;
  margin: 4% 10%;
  }

    .articles img {
        width: 80%;
    }

    form {
        padding: 10px 0;
    }

    .formEmploy p {
        font-size: 12px!important;
        line-height: 1.5;
        margin: 0 auto;
    }

    form input, select {
        font-size: 12px;
        width: 95%;
    }

    .formDiv {
        width: 90%;
    }

    .application {
        width: 95%;
        font-size: 12px;
        margin: 25px auto;
        font-weight: 500;
    }
    .articles h1+p, .application {
        width: 90%;
        margin: 40px auto;
        line-height: 1.5;
        text-align: justify;
        font-size: 12px;
    }

    .inProcess {
        width: 85%;
        margin: auto;
        line-height: 1.5;
        background-color: rgba(255, 255, 255, 0.6);
        padding: 3% 15px;
        font-size: 14px;
    }

    input[type="checkbox"]:required{
        margin: 1px 10px;
    }

    .plus {
        height:100vh;
     }

     .notice, .impressum{
         font-size: 12px;
     }

     .impressum{
         width: 80%;
     }



     header{
         position: relative;
     }

     header a{
         position: sticky;
         top: 0;
     }
}

@media screen and (max-width:390px) {
    .langChoise img {
        width: 65px;
        height: 35px;
    }

    .introduction {
        font-size: 14px!important;
        margin: 4%;
    }

    .copyright {
        font-size: 10px;
    }

    .langChoise p {
        font-size: 10px;
    }
    
}