a{
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 26%;
    margin-top: 15px;
    margin-bottom: 20px;
    list-style: none;
    color: white;
    text-align:center;
    text-decoration: none;
    font-size: large;
    font-weight: 600;
    border-style: solid;
    border-color: #111147;
    border-radius: 18px;
    border-width: 5px;
    width: 200px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #191970;
    transition: 0.4s;
  }

  a:hover{
    background-color: #111147;
  }


  p{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 20px;
  }

  h1{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 27px;
  }


nav{
    display: grid;
    background-color: #191970;
    height: 100px;
    grid-template-columns: 1fr 1fr 1fr;
  }





  #knop{
    border-color: #111147;
    background-color:#111147;
  }

  #knop-hamburger{
    display: none;
  }





  #af1-p1{
    width: 100%;
  }

  #af2-p1{
    width: 100%;
  }

  #af3-p1{
    width: 100%;
    margin-bottom: 50px;
  }





  #p1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 100px;
    margin-right: 100px;
  }


  #p1-s1{
    grid-column: 1/3;
    grid-row: 1;
    height: 300px;
  }

  #p1-s2{
    grid-column: 4;
    grid-row: 1;
    height: 300px;
  }

  #p1-s3{
    grid-column: 1/2;
    grid-row: 2;
    height: 300px;
  }

  #p1-s4{
    grid-column: 3/5;
    grid-row: 2;
    height: 300px;
  }













  #sport{
    width: 320px;
  }

  #cinema{
    width: 330px;
  }

  #chiro{
    width: 330px;
    margin-top: -70px;
  }



  #p2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 50px;
    margin: 50px;
  }


  #p2-s1{
    grid-column: 1;
    grid-row: 1/3;
    height: 570px;
  }

  #p2-s2{
    grid-column: 2/4;
    grid-row: 1/3;
    height: 570px;
  }

  #p2-s3{
    grid-column: 4;
    grid-row: 1;
    height: 260px;
  }

  #p2-s4{
    grid-column: 4;
    grid-row: 2;
    height: 260px;
  }





  #spl-logo{
    width: 440px;
  }
  #spl-logo2{
    display: none;
  }

  #pl-vlag{
    width: 440px;
  }
  #pl-vlag2{
    display: none;
  }

  #kerk{
    width: 385px;
  }



  #p3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 50px;
    margin: 50px;
  }


  #p3-s1{
    grid-column: 1;
    grid-row: 1/3;
    height: 650px;
  }

  #p3-s2{
    grid-column: 2;
    grid-row: 1;
    height: 300px;
  }

  #p3-s3{
    grid-column: 2;
    grid-row: 2;
    height: 300px;
  }

  #p3-s4{
    grid-column: 3;
    grid-row: 1/3;
    height: 650px;
  }






























@media screen and (max-width: 480px) {
    nav {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        height: auto;
      }
      div {
        display: grid;
        grid-template-rows: 65px 1fr;
        grid-template-columns: 1fr;
        height: auto;
        border: none;
      }

      #knop-hamburger{
        display: block;
        border: none;
        background-color: #191970;
        color: white;
      }

      #nav-1{
        display: none;
      }


      a{
        margin: 0;
        width: 100%;
        border-radius: 0;
        border: none;
      }
  
        body {
          width: 100vw;
          height: 100vw;
        }















        h1{
          font-size: 15px;
        }

        p{
          font-size: 15px;
        }

       .p1-weg-mobiel{
          display: none;
        }



        #p1{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr 1fr;
          height: 450px;
          gap: 20px;
          margin: 20px;
        }
      
      
        #p1-s1{
          grid-column: 1;
          grid-row: 1/3;
          height: 300px;
        }
      
        #p1-s2{
          grid-column: 2;
          grid-row: 1;
          height: 150px;
        }
      
        #p1-s3{
          grid-column: 2;
          grid-row: 2;
          height: 150px;
        }
      
        #p1-s4{
          grid-column: 1/3;
          grid-row: 3;
          height: 150px;
          margin-top: -50px;
        }




















        .p2-weg-mobiel{
          display: none;
        }

        #p2{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr 1fr;
          gap: 20px;
          margin: 20px;
          height: 680px;
        }
      
      
        #p2-s2{
          grid-column: 1/3;
          grid-row: 1;
          height: 300px;
          margin: 0;
        }
      
        #p2-s1{
          grid-column: 1;
          grid-row: 2/4;
          height: 300px;
          margin: 0;
        }
      
        #p2-s3{
          grid-column: 2;
          grid-row: 2;
          height: 150px;
          margin: 0;
        }
      
        #p2-s4{
          grid-column: 2;
          grid-row: 3;
          height: 150px;
          margin-top: 15px;
        }




        #sport{
          width: 170px;
        }
      
        #cinema{
          width: 170px;
        }
      
        #chiro{
          width: 170px;
        }
      
      
      
       





























        .tekst-mobiel-p3{
          display: none;
        }


        #spl-logo{
          display: none;
        }
        #spl-logo2{
          width: 170px;
          display: block;
        }


      
        #pl-vlag{
          display: none;
        }
        #pl-vlag2{
          width: 170px;
          display: block;
        }


      
        #kerk{
          margin-top: 15px;
          width: 170px;
        }




        #p3{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          gap: 20px;
          margin: 20px;
        }
      
      
        #p3-s1{
          grid-column: 1;
          grid-row: 1;
          height: 300px;
        }

        #p3-s4{
          grid-column: 2;
          grid-row: 1;
          height: 300px;
        }

        #p3-s2{
          grid-column: 1;
          grid-row: 2;
          height: 170px;
          width: 170px;
        }
      
       
      
        #p3-s3{
          grid-column: 2;
          grid-row: 2;
          height: 170px;
          width: 170px;
        }
      
        






}