/* 
 * google search: "html css js : mouse events and buttons"
 * found: https://www.w3schools.com/JSREF/dom_obj_event.asp
 * In HTML onclick is the event listener, myFunction is the event handler:
 * html -> <button onclick="myFunction()">Click me</button>
 * In JavaScript click is the event, myFunction is the event handler:
 * button.addEventListener("click", myFunction);
 * [ let value = event.buttons; ]
 * https://www.w3schools.com/JSREF/event_buttons.asp
 * https://www.w3schools.com/JSREF/event_onmousedown.asp
 * https://www.javascripttutorial.net/javascript-dom/javascript-mouse-events/ 
 * informatief !
 * https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
 * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
 * https://javascript.info/mouse-events-basics
 * https://api.jquery.com/category/events/mouse-events/
 * https://www.freecodecamp.org/news/html-button-onclick-javascript-click-event-tutorial/
 * https://javascript.info/introduction-browser-events
 * last but not least
 * https://codepen.io/ksksoft/embed/nyEvKG?default-tab=result&height=316&theme-id=0
 */

 .trigger,
 .panel {
    position: fixed;
    display: block;    
    padding: .125em;
    border-radius: .5em;
    -webkit-border-radius: .5em;
    text-align: center;
    vertical-align:center;
    -webkit-transition-duration: 2.3s;
    -moz-transition-duration: 2.3s;
    -o-transition-duration: 2.3s;
    transition-duration: 2.3s;
 }
 .trigger#triggerLeft {
    top: 0;
    left: 0;
    width: 0;
    height:100%;
    background-image: url('../../beeld/papier/rauhfaser.gelig_2880.webp');     
 }
  .panel#panelLeft {
    top:0;
    left:-100%;
    width: 100%;
    height: 100%;
    background: rgba(0,100,0,.5); /* darkgreen; */
 }
  .trigger#triggerTop {
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background-image: url('../../beeld/papier/rauhfaser.gelig_2880.webp');     
 }
 .panel#panelTop {
    left:0;
    top:-100%;
    width: 100%;
    height: 100%;
    background: rgba(25,25,112,.5); /* midnightblue */
 }
 .trigger#triggerRight {
    top: 0;
    right: 0;
    width: 0;
    height:100%;
    background-image: url('../../beeld/papier/rauhfaser.gelig_2880.webp'); 
 }
 .panel#panelRight {
    top:0;
    right:-100%;
    width: 100%;
    height: 100%;
    background: rgba(184,134,11,.5); /* darkgoldenrod; */
 }
 .trigger#triggerBottom {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background-image: url('../../beeld/papier/rauhfaser.gelig_2880.webp'); 
 }
 .panel#panelBottom {
    left:0;
    bottom:-100%;
    width: 100%;
    height: 100%;
    background: rgba(139,0,0,.5); /* darkred */
 }
/*
 .trigger#panelBottom:active {
    bottom: 100%;
    height: 100%;
 }
 .trigger#triggerBottom:active .panel#panelBottom {
    bottom: 0;
 }
*/
/*
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.6);
    overflow-x: hidden;
    transition: 2s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #003300; * greenish ** #818181; *
    display: block;
    transition: 2s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .closebtn {
    font-size: 40px !important;
    top: 15px;
    right: 45px;
  }
}
*/