* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden; 
    background-color: black;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    filter: contrast(120%);
    position: relative;
    font-family: Arial, sans-serif;
}
.container {
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#canvas {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    text-decoration: none;
    color: rgba(200, 220, 255, 1);
    opacity: .4;
    transition: opacity .4s ease;
}

a:hover {
    opacity: 1;
}
.txt {
    color: #f8f9fa;
    text-shadow: #fff 0 0 10px;
    transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
}


@-moz-document url-prefix() {
    .txt {
        text-shadow: #fff 0 0 20px;
    }
}

@media (max-width: 600px) {
    body {
        flex-direction: column; 
        padding: 10px;
    }

    .txt {
        font-size: 14px; 
        text-align: center;
    }

    a {
        font-size: 16px;
    }
}