@import url("https://fonts.googleapis.com/css2?family=Poppins");
@import 'variables.css';
@import 'header.css';
/*@import 'footer.css';
@import 'home-page.css';
@import 'one-column-page.css';
@import 'two-column-page.css';
@import 'contact-form.css';
@import 'pipeline-page.css';
@import 'science-page.css';
@import 'indications-page.css';
@import 'partnering-page.css';
@import 'aboutus-page.css';*/
/*@import 'board-page.css';*/
/* CSS HEX
--outer-space-crayola: #343e3dff;
--xanadu: #607466ff;
--turquoise-green: #aedcc0ff;
*/



*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
    scrollbar-width: none;    
    
}
html {
  font-size: 16px;
}


body {
    display:flex;  
    flex-direction: column;   
    height:100vh;
    justify-items: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;  
    background-color: rgb(0, 0, 0);
    font-size: 1rem;
    
    }


.page-container {
  display: flex;
  flex-direction: row;  
  flex: 0 0 auto;
  height: 92vh;
  width: 100%;
  /*border: 30px dashed red;*/
  align-items: center;
  justify-content: center;    
}





    .content-container {
        display: flex;
        flex: 1 0 auto;
        flex-direction: row;
        height:100%;  
        width: 100%;
        scroll-snap-type: y mandatory;   
        scroll-snap-stop: always;
        overflow: scroll;           
        scroll-behavior: smooth; 
         background-image: url(../resources/Test.png);   
        background-image: url(../resources/Blue\ Green\ Tumor\ .png); 
        background-repeat: no-repeat;
        background-position-x: right;   
        background-size: cover;
        background-color: rgb(0, 0, 0);
    }
  
    .section {        
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; 
    height: 100%;
    width: 100%;
    scroll-snap-align: start;
    border-radius: 10px;
    align-content: center;
    justify-content: center;       
    padding: 10%;
    color: rgb(255, 255, 255);
    }


    .landing_content {
      flex: 0 0 auto;
      width: 80%;
      color:rgb(200,200,200);
      & a {color:rgb(172, 194, 207);}
    }

    .section#contact {
      display: flex;
      flex-direction: row;
      flex: 1 0 auto;
      gap: 10%;
      align-items: center;      
      justify-content: left;
      & div {
      display: flex;
      justify-content: center;
      flex-grow: 1;
      }
    }


    h1 {
      font-size:3vw;      
    }

    form {
      display: flex;
      flex-grow: 1;
      align-items: right;
      flex-direction: column;     

    }


      div#form {
      display: flex;
      background-color:rgba(10,10,10, 0.9); 
      justify-content: center;
      padding: 1rem;
      & a {color:rgb(172, 194, 207);
      }
      & h5 {font-size:max(16px, 1.0rem)}
      
    }

    h2 {
      font-size: 1.5vw;
      & a {
       color:rgb(126, 212, 243);
      }
    }


    h5, h4 {
      font-size: 1.0vw;
      & a {
       color:rgb(28, 63, 103);       
      }
    }

    label {
      width: calc(9*0.8rem);
      font-size: max(1.0rem, 16px);
      margin-top: 0.5vh;
      margin-bottom: 0.5vh;
      

    }

    input, textarea {
      border-radius: 5px;
      padding-top: 0.5vh;
      padding-bottom: 0.5vh;
      margin-top: 0.5vh;
      margin-bottom: 0.5vh;
      width: max(250px, 25%);
    }
    div#contact-message {
      display: flex;
      flex:1 0 5fr;
      flex-direction: column;
      height:100%;
      & h1 {display:flex; 
        flex: 1 0 3fr;
        height:30%;
      }
      & h2 {display: flex;
      flex:1 0 2fr;}
    }





    div#form.submitted{
      display: none;

    }

    div#form-submitted {
      font-size: 1.6rem;
    }

    .section#problem {
      display: flex;     
      flex: 1 0 100%;
      flex-direction: column;       
    }

    div.problem-card-container{
      display: flex;
      flex:1 1 auto;
      gap:10px;
      flex-wrap:wrap;      
      
      
      margin:0;     
      }

      div.problem-card{
      display: flex;
      flex: 1 1 auto;

      flex-direction: column;
      padding: 2rem;      
      border-radius: 10px;
              & p {
          font-size: 0.9rem;
              }
    }

    div.problem-card#Example {
        align-items: center;
       }



    #Patients {
      background-color: rgba(0, 43, 65, 0.95);

    }

    #Regulatory {
      background-color: rgba(39, 62, 105, 0.95);

    }

    #Public {
      background-color: rgba(39, 62, 105, 0.95);

    }


     #Payors{
      background-color: rgba(0, 106, 108, 0.95);

    }


    #Pharma {
      background-color: rgba(22, 89, 56, 0.95);

    }

    #Example {
      display: flex;
      flex: 1 0 auto;
      height:100%;
      background-color: rgba(54, 47, 39, 0.95);
      color: white;   
      justify-content: center;
      align-content: center;
         
    }

  

    div#explainer {
      display: flex;
      flex-direction: row;
      margin-top: 3rem;
    }

    div#example-container {
      flex: 1 0 30%;
      margin-right: 10px;
      
    }

    div.section#aboutus {
      display: flex;
      flex-direction: row;
      
    }

    div.left-column {
      display: flex;
      flex-direction: column;
      flex: 0 1 auto;
      height: 60%;
      justify-content:space-evenly;
      
      flex-wrap: nowrap;
      align-items: right;
      padding: 5%;
      & h4 {
        display: flex;
        flex: 0 0 4rem;
        text-decoration: none;
        color: white;
        font-size: 1.6rem;

      }
    }

    div.right-column {
      display: flex;
      flex: 1 0 auto;
      width: 70%;
      background-color: rgba(0, 0, 0, 0.95);
      padding: 5%;
      & p {
        font-size: 1.3rem;
      }
    }

.sub-section.inactive {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: 1px;
  padding: 0;
  border: 0;
}
.sub-section.active {
  border: 0;  
}

.sub-section-menu.active {
  color: rgb(60, 172, 217);
}

.sub-section-menu.inactive:hover{cursor: pointer;}


.sub-section#impressum {
  display: flex;
  flex-direction: row;
  align-content: space-evenly;
  justify-content: center;
  flex-wrap: wrap;
  & div {
    padding: 1rem;
    margin: 1rem;
    border-radius: 5px;
    background-color: rgb(5,5,5);
  }
  & a {
    color: white;
  }
}
.sub-section#board {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 3%;
}


div.board-member {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  flex-wrap: wrap;
  /*border:10px dashed white;*/
  margin: 1%;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: rgb(17, 21, 26);
}

div.board-member-name  {
  font-size: 1.6rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  }

  div.board-member.chairman {    
    width:100%;   
  }

.board-function {
  color: steelblue;
}

.sub-section#company,  .sub-section#cookies {
  & p {padding: 1.3rem;}
}