/* Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Global Styles */
  body {
    /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
    font-family: "Gafata", sans-serif;
    font-size: 20px;  
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
  }
  
  a {
    text-decoration: none;
    color: #000;
  }
  
  a:hover {
    color: #666;
  }

  p.register:active {
    color:antiquewhite;
  }
  
  /* Header */
  
  header{    
    position: fixed;
    z-index:2;
    top: 0;
    left: 0;
    width: 100%;
  }

  div.header{
    background-image: url("paper_light.png");
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 7px;
  }

   .footer{
    background-image: url("paper_light.png");
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.20) 0px -5px 7px;
  }

  header h1 {
    margin-top: 0;
  }
  
 div.responsive, div.console-content, div.console-footer, div.console-header {
    display:inline-block;
    align-items: center; /* Vertikale Zentrierung */
    text-align: center;
  } 

  div.console {
    display:inline;
    text-align: right;
  } 
  
  div.topnav {
    display:inline-block;
    text-align: right;
  } 

  .picRef {
    text-align: left;
  }

  div.register {
    display: inline-block;
    font-weight: bold;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    margin-right: 2px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 7px;
  }
  
  input[type=submit]{
    border: none;
    margin: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 7px;
    color: whitesmoke;
    background-color:#0297f1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 7px;
  }

  input[type=submit], label{
    font-family: inherit;
    font-size: 20px;
    line-height: inherit;
    font-weight: bold;
  }

  input[type=submit]:active {
    color: rgb(43, 43, 43);
  }
  
  p.register {
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(43, 43, 43);
  }

  /* Hide the link that should open and close the topnav on small screens */
  .icon {
    position: fixed;
    z-index:2;
    top: 20;
    right: 15;
    display: none;
  }
  
  /* Main */
  main {
    padding: 20px;
    line-height: 1.5;
  }
  
  section {
    margin-bottom: 20px;
  }
  
  /* Footer */
  footer {
    text-align: center;
    position: fixed;
    /*position: sticky;*/
    font-size: small;
    bottom: 0;
    width: 100%;
  }

  .forminput {
    margin-bottom: 5px;
    margin-left: 10px;
    padding: 5px;
    font-family: inherit;
    font-size: 20px;
    line-height: 1.5; 
    border-radius: 7px;
    border-width: 0.5px;
    color:#169ffb;
  }

  .block {
    flex: 1;
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    
  }
  .blockImage {
      background-color: rgb(226, 173, 230);
  }
  .blockText {
      background-color: lightcoral;
  }

  
  /* CSS media queries for responsive layout */
@media screen and (max-width: 767px) {

  .icon {
        float: right;
        display: block;
    }
    
    a.icon {
        position:fixed;
        right: 15px;
        top: 25px;
    }

    .topnav nav {
      display: none;
    }

    .nav {
      display: flex;
      flex-flow: column wrap;
      text-align: right;
      position:relative;
    }
    
    div.register{
      border-end-end-radius: 0px;
      border-start-start-radius: 7px;
      margin-right: 0px;
    }

    .logo{
        padding-inline-start: 5px;
        padding-top: 5px;
        max-width: 55%;

    }

    div.console-content{
      width: 85vw;
      padding-top: 120px;
      text-align: left;
      height: 100vh;
      background-color: lightblue;
    } 

    div.console-footer{
      width: 85vw;
      text-align: left;
    } 

    div.console-header{
      width: 85vw;
      text-align: left;
    } 


}


/* desktop, notebook, tablets */
@media screen and (min-width: 768px) {

    header, main{
        text-align: center;
    }
    
    div.console {
        width: 55vw;
    } 

    div.console-content{
      width: 55vw;
      padding-top: 250px;
      text-align: left;
    } 
    div.console-footer{
      width: 55vw;
      text-align: left;
    } 
    div.console-header{
      width: 55vw;
      text-align: left;
    } 

    .logo{
        max-width: 300px;
        text-align: left;
  
    }

}