@charset "UTF-8";

/* CSS rules go below */

.filter {
  filter: blur(3.5px);
}
.square {
  height: 50px;
  width: 50px;
  background-color: #555;
}

.body{
  display: flex;
  flex-direction: column; /* Stack iframes vertically */
  align-items: center;     /* Center horizontally */
  justify-content: center; /* Center vertically */
  font-family: 'Anonymous Pro', monospace;  
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #f0f0f0;
  position: relative;
  cursor: none;
  overflow: hidden;
}
iframe {
  width: 100%;
  height: 100vh;
  border: none;
  position: absolute;
  z-index: 0;
  order: none;
  cursor: none;

}

.myIframe{
  transform: translate(-50%, -50%); 
  -webkit-backdrop-filter: blur(5px); 
  backdrop-filter: blur(5px);   

}

.normaal {
  width: 100%;
  height: 100%;
  border: none;
  position: relative;
  z-index: 0;
}

.cursor-blur {
  position: absolute;
  width: 300px;  
  height: 300px; 
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  border-radius: 50%;  
  transform: translate(-50%, -50%); 
  -webkit-backdrop-filter: blur(5px);   
  backdrop-filter: blur(5px);   
  transition: transform 0.3s ease;
  z-index: 9;

}

#front {
  position:absolute;
  width:2000px;
  height:1200px;
  left:0px;
  top:0px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
  
}

#een {
  position:fixed;
  top: 60px;
  left:200px;
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(8px);
  
  
}

#twee {
  position:fixed;
  top: 400px;
  left:600px;
  height: 25px;
  width: 40px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(15px);
  
}
#drie {
  position:fixed;
  top: 175px;
  left:950px;
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(15px);
  
}
#vier{
  position:fixed;
  top: 450px;
  left:60px;
  height: 30px;
  width: 30px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(13px);
  
}
#vijf{
  position:fixed;
  top: 560px;
  left:900px;
  height: 60px;
  width: 60px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(17px);
}
#zes{
  position:fixed;
  top: 80px;
  left:1200px;
  height: 60px;
  width: 60px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(17px);
}
#zeven{
  position:fixed;
  top: 120px;
  left:400px;
  height: 60px;
  width: 60px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(17px);
}
#acht{
  position:fixed;
  top: 660px;
  left: 200px;
  height: 30px;
  width: 30px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(17px);
}
#negen{
  position:fixed;
  top: 500px;
  left: 1300px;
  height: 30px;
  width: 30px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background:rgb(226, 226, 226);
  box-shadow:0 0 10px #666;
  filter: blur(11px);
}

#myButton {
  position:relative;
  top: 300px;
  left:620px;
  display: inline-block;

  display: none;  /* Hide the button initially */
  opacity: 0px;
  padding: 20px 30px;
  font-size: 16px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: opacity 15s ease-in-out;

}

#myButton.show {
  display: block;  /* Show the button */
  opacity: 1;      /* Make it fully visible */
}

#myPopup {
  display: none;  /* Hidden initially */
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  width: 300px;
  text-align: center;
}

/* Overlay behind the popup */
#overlay {
  display: none;  /* Hidden initially */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);  /* Semi-transparent background */
  z-index: 9998;
}

.close-btn {
  background-color: rgb(0, 89, 255);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}

.close-btn:hover {
  background-color: darkred;
}












  

/* Global */
html{
  min-height: 100%;
  overflow: hidden;
}


.line-1{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
    position: relative;
    top: 200px;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(0, 132, 255, 0.75);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    

}
.line-2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
  position: relative;
  top: 205px;  
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}
.line-3{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
  position: relative;
  top: 210px;  
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}


.anim-typewriter{
  animation: typewriter 4s steps(44) 3s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

.anim-typewriter1{
  animation: typewriter 4s steps(44) 6s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

.anim-typewriter2{
  animation: typewriter 9s steps(44) 11s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}




  




.line1{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
    position: relative;
    top: 200px;  
    width: 24em;
    margin: 0 auto;
    border-right: 0px solid rgba(255,255,255,.75);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    

}
.line2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
  position: relative;
  top: 205px;  
  width: 24em;
  margin: 0 auto;
  border-right: 0px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}

.line3{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
  position: relative;
  top: 210px;  
  width: 24em;
  margin: 0 auto;
  border-right: 0px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}

.line4{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
  position: relative;
  top: 215px;  
  width: 24em;
  margin: 0 auto;
  border-right: 0px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}

.line5{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: rgba(0, 115, 223, 0.75);
  position: relative;
  top: 220px;  
  width: 24em;
  margin: 0 auto;
  border-right: 0px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);    
}

.anim-typewrite{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

.anim-typewrite1{
  animation: typewriter 4s steps(44) 3s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

.anim-typewrite2{
  animation: typewriter 4s steps(44) 6s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

.anim-typewrite3{
  animation: typewriter 4s steps(44) 9s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewrite3{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}


.anim-typewrite4{
  animation: typewriter 4s steps(44)11s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewrite3{
  from{width: 0;}
  to{width: 35em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}






.logo{
  height:90px;
  width: 100px;
  position: fixed;
    top: 500px;
    left: 680px;
}