<div id="overlay" onclick="off()" title="happy trans day of visibility!"> <div id="flagtext">I'M TRANS!</div> </div> <style> #overlay { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.9); z-index: 2000; cursor: pointer; } #flagtext { position: absolute; top: 50%; left: 50%; font-size: 90px; color: transparent; background-clip:text; transform: translate(-50%,-50%); line-height:1; background-image: linear-gradient( #5BCEFA 0%, #5BCEFA 20%, #F5A9B8 20%, #F5A9B8 40%, #FFFFFF 40%, #FFFFFF 60%, #F5A9B8 60%, #F5A9B8 80%, #5BCEFA 80%, #5BCEFA 100% ); font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-align: center;} </style> <script> function on() { document.getElementById("overlay").style.display = "block"; } function off() { document.getElementById("overlay").style.display = "none"; } </script>
I'M TRANS!