<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Wor(l)ds for the Future</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="plain-draggable.min.js"></script>
        <script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
        <script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
        <link rel="stylesheet" type="text/css" href="louisa.css" media="screen"/>
    </head>

    <body>
       

<map name="image-map">
    <area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
    <area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
    <area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
</map>
        <div id="container">

            <p id="atata">Atata</p><br>

            <p id="Liquid">Liquid</p><br><br>

            <p id="!?">!?</p><br><br>

            <p id="Otherness">Otherness</p><br><br><br><br><br>
            
<img id="Resurgence" src="grab.png">
<img id="pic" class="pic" src="IMAGES/resurgence/resurgence-icon-01-01.png">
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png">
<img id="pic3" class="pic" src="IMAGES/liquid/liquidsym2.png">
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png">
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png">
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png">

            


        </div>      
        
            
                <button id="practical" onclick=""><b>Practical Visions</b></button>
                <button id="complexities" onclick=""><b>Complexities</b></button>
                <button id="gramviz" onclick=""><b>A Data Visualization</b></button>
                <button id="collang" onclick=""><b>Colonial Languages</b></button>
                <button id="bot" onclick=""><b>Practical Bot</b></button>
        
     <button class="colophon"><b>Colophon</b></button>    
    <div class="container">THIS IS THE COLOPHON
       <span class="close"><button> &times;</button></span> 
        
        <div>
          <div class="intro">WELCOME TO WOR(L)DS FOR THE FUTURE BLABLA DRAW OR DRAG AND DROP OR WHATEVER<button class="enter"><b>ENTER</b></button> <div>
   <script>

	const button = document.querySelector(".colophon");
	const container = document.querySelector(".container");
    const close = document.querySelector(".close");

	//const trailer2 = document.querySelector(".trailer2");
	//const close2 = document.querySelector(".close2");

	button.addEventListener('click', () =>{
	container.style.visibility = "visible";
	container.style.opacity = 1;

	});
       
    close.addEventListener('click', () =>{
	container.style.visibility = "hidden";
	container.style.opacity = 0;
	});

	

	//close2.addEventListener('click', () =>{
	//trailer2.style.visibility = "hidden";
	//trailer2.style.opacity = 0;
	//coin3.style.visibility = "visible";
	//coin3.style.opacity = 1;


	</script> 
        
        <script src="script.js"></script>
        
    </body>
</html>