<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='preconnect' href='https://wasm.noahcohn.com'> <link rel='preconnect' href='https://js.1ink.us'> <link rel='preconnect' href='https://glsl.1ink.us'> <link rel='preconnect' href='https://css.1ink.us'> <title>B3HD</title> <link charset=utf-8 crossorigin rel='stylesheet' href='https://css.1ink.us/sh1.1iss'/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide"> <style> .button { /* Initial button styles */ background-color: #007bff; /* Blue */ color: white; border: none; padding: 10px 20px; cursor: pointer; transition: all 0.2s ease; /* Add smooth transition for all properties */ } .button:active { /* Styles when the button is clicked/held down */ background-color: #0056b3; /* Darker blue */ transform: translateY(2px); /* Move down slightly */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */ } .chrt{ height: 60px; width: 60px; position: absolute; } .note{ height: 20px; width: 20px; font-family: "Audiowide", sans-serif; font-size: 100%; border: 1px solid black; background-color: lightblue; position: absolute; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script data-main="NightSkyAnimation" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script> </head> <body> <div class="col-sm-9" id="globe"> <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto; background-color: black;"> </canvas> </div> </body> <script> </script>