/* Colors

Blue Grotto
#2367B1

Yellow
#F8CF2C

Misty Blue
#E4E6ED

Beige
#D3A877

*/

body {
    width:100%;
    font-size:0.6 rem;
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }

section.grid-start p, .grid-container p {
    text-align:center;
    padding: 0px 20px;
    margin: 0;
    color:white;
  }

  section.index {
    margin-bottom:0px;
    padding-bottom:0px;
  }

  section.index h1 {
    color:#D3A877;
    font-size:7rem;
    margin-bottom:0px;
    padding-bottom:0px;
  }

  section.index h4 {
    color:#2367B1;
    margin-top:0px;
    padding-top:0px;
  }

  .grid-start {
    display: grid;
    grid-template-columns: auto auto auto;
    min-height:300px;
   }

h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size:3rem;
    font-weight:normal;
    color:#2367B1;
    margin-top:10px;
    margin-bottom:0px;
    padding: 0;
    text-align:center;
  }

h2 {
    font-size: 2.5rem;
    font-weight:normal;
    color:white;
    font-family: "Bebas Neue", sans-serif;
    text-align:center;
    margin: 50px 0px 0px 0px;
    padding:0;
  }

  
h3 {
  font-size: 2rem;
  font-weight:normal;
  color:#2367B1;
  font-family: "Bebas Neue", sans-serif;
  text-align:center;
  margin: 20px 0px 0px 0px;
  padding:none;
 
}

  h4 {
    font-size: 1.5rem;
    font-weight:normal;
    font-style:italic;
    color:#D3A877;
    font-family: "Roboto", sans-serif;
    text-align:center;
    margin:0;
    padding:0;
  }

  section.omoss {
    display: grid;
    grid-template-columns: auto auto auto;
  }

  section.form p {
    text-align:center;
    margin:0px;
    padding:0px;
    font-size:1.5rem;
  }

  section.omoss p {
    padding:0px 50px;
    font-size:1.2rem;
    margin-top:0;
    margin-bottom:20px;
    text-align:center;
  }

 p.center {
    padding:0px 50px;
    font-size:1.2rem;
    margin-top:0;
    margin-bottom:20px;
    text-align:center;
  }

  div.header-image-tennis h2, div.header-image-padel h2, div.header-image-start h2, div.header-image-contact h2, div.header-image-order-form h2 {
    font-size: 8rem;
    font-weight:normal;
    color:white;
    font-family: "Bebas Neue", sans-serif;
    text-align:center;
    padding-top:150px;
  }

  address 
     {
      font-size: 1rem;
      font-weight:normal;
      color:#FFF;
      font-family: "Roboto", sans-serif;
      text-align:center;
      margin: 0px 0px 0px 0px;
      padding:none;
      }




/* Nav */

.navbar {
    overflow: hidden;
    display:flex;
    justify-content: center;
    background-color:#D3A877;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-family: "Bebas Neue", sans-serif;
    font-size:3rem;
    display: block;
    color:#FFF;
    text-align: center;
    padding: 15px 28px;
    text-decoration: none;
  }

  .navbar a:hover {
    background-color:#2367B1;
    color:white;
  }

  #myBtn {
    display:none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color:#2367B1;
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }

  /* Header & Footer */

  footer {
    width:100%;
    background-color:#D3A877;
    color:#FFF;
    min-height:100px;
    padding-top:20px;

  }

  div.header-image-tennis {
    background-image: url(../images/header-image.jpg);    
    background-color: #000;
    height:400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    }

    div.header-image-start {
      background-image: url(../images/contact_image.png);    
      background-color: #000;
      height:400px;
      background-position: center;
      background-repeat: no-repeat;
      background-size:cover;
      margin:0px;
      padding:0px;
      }

     div.header-image-contact {
        background-image: url(../images/contact_image.png);    
        background-color: #000;
        height:400px;
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover;
        }

    div.header-image-order-form {
      background-image: url(../images/header-image.jpg);    
      background-color: #000;
      height:400px;
      background-position: center;
      background-repeat: no-repeat;
      background-size:cover;
      }

    
  div.header-image-padel {
    background-image: url(../images/padel_header.png);    
    background-color: #000;
    height:400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    }

     /* Images */

    .tennis {
      background-image:url(../images/tennis_1.png);
      background-repeat: no-repeat;
      background-position:top center;
      background-size: 100% auto;
      background-size:cover;
    }

    .padel {
      background-image:url(../images/padel_1.png);
      background-repeat: no-repeat;
      background-position:top center;
      background-size: 100% auto;
      background-size:cover;
    }

    .insp {
      background-image:url(../images/insp_1.png);
      background-repeat: no-repeat;
      background-position:top center;
      background-size: 100% auto;
      background-size:cover;
    }
  
    section.grid-start a, .grid-container a {
      display:block;
      font-family: "Bebas Neue", sans-serif;
      font-size:1.8rem;
      color:white;
      padding:10px 10px;
      background-color:#D3A877;
      text-decoration:none;
      margin: 10px auto;
      text-align:center;  
      width:180px;
    }

    section.grid-start a:hover, .grid-container a:hover {
      background-color:white;
      color:#2367B1;
    }

    .grid-container {
      display: grid;
      grid-template-columns: auto auto;
      min-height:400px;
    }

    .grid-books {
      display: grid;
      grid-template-columns: auto auto auto;
      min-height:400px;
    }

    .grid-item1 {
      background-color:antiquewhite;
    }

    .grid-item2 {
      background-color:black;
    }

    .grid-item3 {
      background-color:#2367B1;
    }

    .grid-item4 {
      background-color:bisque;
    }

    .grid-container h3 {
      font-family: "Bebas Neue", sans-serif;
    }

        /* Form */



section.kontakt {
  width:400px;
  margin:0 auto;
}

form {
  margin-top:20px;
  margin-bottom:20px;
}

label {
  font-family: "Bebas Neue", sans-serif;
  font-size:2rem;
  color:#2367B1;
  font-weight:normal;
  margin-top:10px;

}
        
input[type=text], input[type=email], select, textarea {
  width: 100%; /* Full width */
  color:white;
  padding: 12px; /* Some padding */ 
  border:none;
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  background-color:#D3A877;
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input:focus, textarea:focus, select:focus    {
  background-color:#2367B1;
  color:white;
}

::placeholder {
  color:white;
  font-family: "Roboto", sans-serif;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color:#2367B1;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color:#D3A877
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

    /* Media */

@media (max-width: 650px) {

  div.header-image-tennis h2, div.header-image-padel h2, div.header-image-start h2, div.header-image-contact h2, div.header-image-order-form h2 {
    font-size: 5rem;
    font-weight:normal;
    color:white;
    font-family: "Bebas Neue", sans-serif;
    text-align:center;
    padding-top:150px;
  }

  .grid-start {
    display:grid;
    grid-template-columns: auto;
    min-width:600px;
    }

    .grid-container {
      display:grid;
      grid-template-columns: auto;
      min-width:600px;
      }

      .navbar a {
        font-family: "Bebas Neue", sans-serif;
        font-size:2rem;
        color:#FFF;
        text-align: center;
        padding: 10px 10px;
        text-decoration: none;
      }


  

}