<!DOCTYPE html>
<html>
<head>
    <title>N3rdistan</title>
    <style>
        body {
            background-color: black;
            color: blue;
            font-size: 50px;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            position: relative;
        }

        p {
            position: relative;
            z-index: 2;
        }

        .square {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .square:hover {
            opacity: 1;
        }

        .square1 {
            top: 35%;
            left: 50%;
            transform: translateX(-50%);
        }

        .square2 {
            top: 30%;
            left: 60%;
            transform: translateX(-50%);
        }

        .square3 {
            top: 0;
            left: 0;
        }

        .blink {
            animation: blinker 1s linear infinite;
        }

        @keyframes blinker {  
            50% { opacity: 0; }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            document.querySelectorAll('.square').forEach((square) => {
                square.addEventListener('mouseover', () => {
                    document.querySelector('p').style.display = 'none';
                });
                square.addEventListener('mouseout', () => {
                    document.querySelector('p').style.display = 'block';
                });
            });
        });
    </script>
</head>
<body>
    <p>N3rdistan<span class="blink">...</span></p>
    <a href="snake.html" target="_blank"><div class="square square1"></div></a>
    <a href="https://open.spotify.com/artist/61NRMe77Nfn2VUWLbqZpWh" target="_blank"><div class="square square2"></div></a>
    <a href="https://www.google.fr/maps/place/39%C2%B022'05.8%22N+28%C2%B049'41.3%22W/@28.4729473,-31.2749697,4.41z/data=!4m4!3m3!8m2!3d39.3682778!4d-28.8281389?entry=ttu" target="_blank"><div class="square square3"></div></a>
</body>
</html>