/* Algemene instellingen */
html{
  scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color:#f4f4f4;
    background-image: url(images/Back.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
  }
  
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Hero Sectie */
  .hero {
    background: linear-gradient(rgba(150, 150, 150, 0), rgba(244, 244, 244, 0)), url(images/BackImg.png) center/cover;
    
    color: #fff;
    text-align: center;
    padding: 100px 20px;
 
  }
  .hero img{
    width:150px;
    padding: 15px;
    background-image: url(images/Back.png);
    background-size: cover;
    background-attachment: fixed;
    border-radius: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.314), inset 0 0  20px rgba(245, 245, 245, 0.423);
    border-color:  #007bff;

    transition: all .1s;
  }
  .hero img:hover{
    border-style: solid;
    border-color:  #007bff;
    border-width:  5px;
    backdrop-filter: Blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    margin: 20px 0;
  }
  
  .btn {
    display: inline-block;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.215), inset 0 0 10px rgba(255, 255, 255, 0.261);

    background: #3195ff6a;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: all .1s;
  }
  
  .btn:hover {
    background: #1582ff;
    transform: scale(1.1);
    backdrop-filter: Blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  
  /* Navigatie */
  .navbar {
    background-color: rgba(255, 255, 255, 0.155);
    backdrop-filter: Blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    text-align: center;
    padding: 10px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.215), inset 0 0 10px rgba(255, 255, 255, 0.261);
  }
  
  .navbar a {
    color: #fff;
    margin: 0 15px;
    text-decoration: none;
  }
  
  .navbar a:hover {
    text-decoration: underline;
  }
  
  /* Secties */
  section {
    padding: 50px 20px;
    text-align: center;
  }
  h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  .about p {
    max-width: 800px;
    margin: 0 auto;
    
  }
  
  /* Portfolio */
  .portfolio .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    color: #333;
  }
  
  .card {
    background: #ffffffc2;
    backdrop-filter: Blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.418), inset rgba(255, 255, 255, 0.747)  0 0 35px;
  }

  
  .card img {
    max-width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.548);
    transition: all .1s;

  }
  .card img:hover{
    transform: scale(1.05);
    border-style: solid;
    border-color:  #007bff;
    border-width:  5px;
    backdrop-filter: Blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .card h3 {
    margin: 15px 0 10px;
  }
  
  /* Contact */
  .contact form input, .contact form textarea {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;

  }
  
  .contact  button {
    display: inline-block;
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
  }
  
  .contact form button:hover {
    background: #0057b300;
  }
  
   /* Footer */
   .footer {
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.155);
    backdrop-filter: Blur(10px);
    -webkit-backdrop-filter: blur(10px);    
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.215), inset 0 0 10px rgba(255, 255, 255, 0.261);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  #doorbell{
    background-image:url(images/projects/Ringthedoorbell.png);
    background-size: cover;

  }
  #doorbell:hover{
    color: transparent;
    background-image:url(images/doorbell.gif);   
     background-size: cover;
    background-position: 50% 0;
  }

  .card .imagebox {
    max-width: 100%;
    max-height: 100%;
    width: 1000px;
    height: 400px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.548);
    transition: all .1s;

  }
  .card .imagebox:hover{
    transform: scale(1.05);
    border-style: solid;
    border-color:  #007bff;
    border-width:  5px;
    backdrop-filter: Blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  #minigame{
    background-image:url(images/projects/spook.jpg);
    background-size: cover;

  }
  #minigame:hover{
    color: transparent;
    background-image:url(images/minigamegame.gif);   
     background-size: cover;
    background-position: 50% 0;
  }

  #game{
    background-image:url(images/projects/beegame.jpg);
    background-size: cover;

  }
  #game:hover{
    color: transparent;
    background-image:url(images/game.gif);   
     background-size: cover;
    background-position: 50% 0;
  }

  .steam-widget {
    width: 100%;
    max-width: 646px;
    aspect-ratio: 646 / 190;
    margin: 40px auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  }
  
  .steam-widget iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
    /* hoofd Navigatie */
    .mainnavbar {
      background: #ffffffbd;
      backdrop-filter: Blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 20px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.418), inset rgba(32, 32, 32, 0.288)  0 0 35px;
    }
    .mainnavbar a {
      color: #fff;
      margin: 0 15px;
      text-decoration: none;
    }
    
    .mainnavbar a:hover {
      text-decoration: underline;
    }