body {

    margin: 0;

    overflow: hidden;

    font-family: "Share Tech Mono", monospace;

    background: black;

    color: white;

}



#matrix {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

}



.content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

}



/* ---- NAME / TITLE ---- */

h1 {

    font-size: 3.5rem;

    margin-bottom: 20px;

    letter-spacing: 3px;

    font-weight: 700;

    text-transform: uppercase;

    position: relative;

    display: inline-block;

}



/* Glitch layers */

h1::before, h1::after {

    content: attr(data-text);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    opacity: 0;

    pointer-events: none;

}



h1.glitch::before {

    left: 2px;

    opacity: 0.5;

    clip-path: inset(0 0 50% 0);

}



h1.glitch::after {

    left: -2px;

    opacity: 0.5;

    clip-path: inset(50% 0 0 0);

}



/* ---- SOCIAL BAR ---- */



.social {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: nowrap;

    transform-origin: center;

}



.social a {

    font-size: 2.2rem;

    color: #ccc;

    transition: 0.3s;

}



/* Hover BRAND COLORS */

.social a.github:hover {

    color: #ffffff;

}



.social a.linkedin:hover {

    color: #0e76a8;

}



.social a.x-twitter:hover {

    color: #ffffff;

}



.social a.youtube:hover {

    color: #ff0000;

}



.social a.email:hover {

    color: #00c853;

}



/* Responsivní scaling */

@media (max-width: 500px) {

    .social {

        transform: scale(0.8);

    }

}



@media (max-width: 380px) {

    .social {

        transform: scale(0.65);

    }

}