body {background-image: url(Achtergrond.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }
    #dutch_1 {position: absolute; top:1%; left:79%}
    #dutch_1 {width: 20%; height: 35%;}
    #Throneliberty {position: absolute; top: 6%;}
    #dungeons {
        border: 2px solid #cccccc00;
        padding: 15px;
        background-color: #f1810100;
        border-radius: 8px;
        width: 50%;
        margin: 20px auto;
        font-family: Arial, sans-serif;
        font-size: 16px;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0);
        text-align: center;
        position: absolute; top: 18%; left: 20%;
    }
    #Cave {
      padding: 15px;
      border-radius: 8px;
      width: 22%;
      margin: 20px auto;
      font-family: Arial, sans-serif;
      font-size: 16px;
      position: absolute; top: 40%; left: 1%;
  }
  #armor1 {
    padding: 15px;
    border-radius: 8px;
    width: 2%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    font-size: 16px;
    position: absolute; top: 55%; left: 1%;
}
#Gloom {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 65%; left: 1%;
}
#Gloom3 {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 75%; left: 1%;
}
#Gloom4 {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 79%; left: 1%;
}
#Gloom5 {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 84%; left: 1%;
}
#Grip {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 89%; left: 1%;
}
#Mana {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 109%; left: 1%;
}
#Karnix {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 94%; left: 1%;
}
#Karnix2 {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 99%; left: 1%;
}
#Kunzite {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 104%; left: 1%;
}
#Plate {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 45%; left: 25%;
}
#Platinum {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 50%; left: 25%;
}
  #ring {
    padding: 15px;
    border-radius: 8px;
    width: 2%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    font-size: 16px;
    position: absolute; top: 50%; left: 1%;
}
#shard {
  padding: 15px;
  border-radius: 8px;
  width: 2%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  position: absolute; top: 60%; left: 1%;
}

  #Tokens {
    border: 2px solid #cccccc00;
    padding: 15px;
    background-color: #f1810100;
    border-radius: 8px;
    width: 2%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0);
    text-align: center;
    position: absolute; top: 45%; left: 1%;
}
    .topnav {
        background-color: #33333300;
        overflow: hidden;
      }
      
      /* Style the links inside the navigation bar */
      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px; 
      }
      
      /* Change the color of links on hover */
      .topnav a:hover {
        background-color: #dddddd;
        color: rgb(0, 0, 0);
      }
      
      /* Add an active class to highlight the current page */
      .topnav a.active {
        background-color: #04aa6d00;
        color: white;
      }
      
      /* Hide the link that should open and close the topnav on small screens */
      .topnav .icon {
        display: none;
      }
      #textbox1 {
        border: 2px solid #cccccc00;
        padding: 15px;
        background-color: #f1810100;
        border-radius: 8px;
        width: 20%;
        margin: 20px auto;
        font-family: Arial, sans-serif;
        font-size: 16px;
        text-align: center;
        position: absolute; top: 44%; left: 1.7cm;
    }  
    #textbox2 {
      border: 2px solid #cccccc00;
      padding: 15px;
      background-color: #f1810100;
      border-radius: 8px;
      width: 20%;
      margin: 20px auto;
      font-family: Arial, sans-serif;
      font-size: 16px;
      text-align: center;
      position: absolute; top: 49%; left: 0.1cm;
  }  
  #textbox3 {
    border: 2px solid #cccccc00;
    padding: 15px;
    background-color: #f1810100;
    border-radius: 8px;
    width: 20%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    position: absolute; top: 54%; left: 0.6cm;
}  
#textbox4 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 59%; left: 1.1cm;
}  
#textbox5 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 64%; left: 0.3cm;
}  
#textbox6 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 69%; left: 0.2cm;
}  
#textbox7 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 74%; left: 0.5cm;
}
#textbox8 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 79%; left: 0.3cm;
}  
#textbox9 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 84%; left: 0.8cm;
}  
#textbox10 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 89%; left: 0.2cm;
}  
#textbox11 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 94%; left: 0cm;
}  
#textbox12 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 99%; left: -0.1cm;
}  
#textbox13 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 104%; left: -0.5cm;
}  
#textbox14 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 108%; left: -0.6cm;
}  
#textbox15 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 44%; left: 12.5cm;
}  
#textbox16 {
  border: 2px solid #cccccc00;
  padding: 15px;
  background-color: #f1810100;
  border-radius: 8px;
  width: 20%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  position: absolute; top: 49%; left: 12cm;
}