/* Overlay achtergrond */
.popup-overlay {
    display: flex;              /* standaard verborgen */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Popup box */
.popup-content {
    background: linear-gradient(135deg, #ffffff, #f0f9ff);
    padding: 40px 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    animation: slideUp 0.4s ease;
}

/* Titel */
.popup-title {
    font-size: 28px;
    font-weight: 700;
    color: #0ea5e9;
    margin-bottom: 15px;
}

/* Trofee icoon */
.succes-icon {
    font-size: 64px;
    color: #fbbf24;
    margin-bottom: 15px;
    animation: bounce 1s infinite alternate;
}

/* Tekst */
.succes-tekst {
    font-size: 18px;
    margin-bottom: 25px;
    color: #334155;
}

/* Sluitknop */
.popup-close {
    position: absolute;
    top: 15px;
    right: 18px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    transition: 0.2s;
}

.popup-close:hover {
    color: #ef4444;
    transform: scale(1.2);
}

/* Advertentie container */
.ad-container {
    margin-top: 15px;
}

/* Animaties */
@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}
.target {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
}
.alpha-target {
  -webkit-mask-image: url(kleurpotlood-mask.png);
          mask-image: url(kleurpotlood-mask.png);
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 10%;
          mask-size: 10%;
}

#follower2{
    position: absolute;
    float: left;
    background-color: #000;
    background-image: url( 'kleurpotlood-contour.png' );
    z-index: 10;
    width:350;
    height:350;
}
.verstop{display:none}
#kleurplaat {position: absolute;}  
#kleurenpallet { 
	width: 150px;
	height: 420px;
	margin: auto;
	left: 850px;
	position: absolute;
    border: solid 2px #000000;
	background-color: #000;
    cursor: pointer;
    border-radius: 5px;
    box-sizing: border-box;
    filter: drop-shadow(2.5px 2.5px 5px #000);
    }
.button-kleur {
    font-size: 25px;
  padding: 1px 20px;
  border: none;
  cursor: pointer;
  margin: 5px;
  border-radius: 5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 130px;
  color: #000;
  text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 20px #fff,
  0 0 40px #fff, 0 0 60px #fff, 0 0 10px #fff, 0 0 98px #fff;
}
.button-kleur:hover {
  box-shadow: 0 0 0 3px #fff;
}
.button-kleur.active {
  box-shadow: 0 0 20px #fff, 0 0 30px #fff;
    border: 3px solid #fff; 
            overflow: hidden; 
}  
#achtergrondImage{
    position:absolute;
    z-index: 0;
}
#voorgrondImage{
    position:absolute;
    fill:#fff;
    stroke: #000;
    stroke-opacity: 5
    z-index: 2;
}     
.posbutton1 {
  position: absolute;
  top: 300px;
  left: 150px;
  z-index: 4;
  font:bold 100px/100px Cabin Sketch;
  height: auto;
  min-width: 140px;
}
.white_content {
  display: none;
  position: fixed;
  top: 10%;
  left: 10%;
  right:10%;
  width: 80%;
  height: 80%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}     
#follower{
    position: absolute;
    float: left;
    z-index: 10;
    font-size: calc(3px + 3vh);
    line-height: calc(3px + 3vh);
    padding: 5 10 5 10;
    text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 20px #fff,
    0 0 40px #fff, 0 0 60px #fff, 0 0 10px #fff, 0 0 98px #fff;
    color: #000;
    text-align: center;
}
#cijfersEnOfLetters{
    position:absolute;
}
#oefening {
    position:relative;
}   
#uitlegknoppen { position:absolute }
#uitlegicon { position: absolute }
#reseticon { position: absolute }
#homeicon { position: absolute }
    
/* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            #oefening{
                height:440px;
            }
            #kleurplaat {
                zoom: 0.55;
                -moz-transform: scale(0.55);
            }
            #cijfersEnOfLetters{
                top:-3px;
            }
            #kleurenpallet {
                width: 465px;
                height: 80px;
                left: 15px;
                top:490px;
                zoom: 0.7;
                -moz-transform: scale(0.7);                
            }
            .button-kleur{
                zoom: 0.61;
                -moz-transform: scale(0.61);
            }
            #follower { 
                visibility:hidden;
            }
            #follower2 { 
                visibility:hidden;
            }            
            #startbutton {
                top: 70px;
                left: 99px;
                min-width: 100px;
                font:bold 50px/50px Cabin Sketch;
            }
            #uitlegknoppen { left:10px;top:720px;}
            #uitlegicon { left:0px }
            #reseticon { left:60px }
            #homeicon { left:120px }
        }

        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            #oefening{
                height:630px;
            }
            #kleurplaat {
                zoom: 0.9;
                -moz-transform: scale(0.9);
            }
            #cijfersEnOfLetters{
                top:-3px;
            }
            #kleurenpallet { 
                width: 540px;
                height: 80px;
                zoom: 1.2;
                -moz-transform: scale(1.2);
                left: 26px;
                top: 385px;
            }
            .button-kleur{
                zoom: 0.65;
                -moz-transform: scale(0.65);
            }
            #follower { 
                visibility:hidden;
            }
            #follower2 { 
                visibility:hidden;
            }
            #cijfersEnOfLetters{
                top:-7px;
            }
            #uitlegknoppen { left:15px; top:550px; }
            #uitlegicon { left:0px }
            #reseticon { left:220px }
            #homeicon { left:440px }
        }

        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px){
            #oefening{
                height:620px;
            }
            #kleurplaat {
                zoom: 0.9;
                -moz-transform: scale(0.9);
            }
            #cijfersEnOfLetters{
                top:-7px;
            }
            #kleurenpallet { 
                width: 150px;
                height: 420px;
                margin: auto;
                left: 580px;
            }
            .button-kleur{
                zoom: 0.9;
                -moz-transform: scale(0.9);
            }
            #follower { 
                visibility:hidden;
            }
            #follower2 { 
                visibility:hidden;
            }
            
            #uitlegknoppen { left:15px; top:620px; }
            #uitlegicon { left:0px }
            #reseticon { left:220px }
            #homeicon { left:440px }
        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px){
            #oefening{
                height:680px;
            }
            #kleurplaat {zoom: 1.1;
                -moz-transform: scale(1.1);}
            
            #cijfersEnOfLetters{
                top:-7px;
            }           
            #uitlegknoppen { left:720px; top:400px; }
            #uitlegicon { top:0px }
            #reseticon { top:50px }
            #homeicon { top:100px }
        }

        /* Media Query for Large screens */
        @media (min-width: 1281px) {
           #oefening{
                height:680px;
            }
            #kleurplaat {zoom: 1.1;
                -moz-transform: scale(1.1);}
            
            #cijfersEnOfLetters{
                top:-7px;
            }          
            #uitlegknoppen { left:720px; top:400px; }
            #uitlegicon { top:0px }
            #reseticon { top:50px }
            #homeicon { top:100px }
        }