/* Import the custom font */
@font-face {
    font-family: 'TGL1451';
    src: url('../media/TGL1451.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Import the glitch effect font */
@import url('https://fonts.cdnfonts.com/css/tgl-0-1451-engschrift');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Mono&display=swap');

/* Root Variables */
:root {
    --speed: 1;
    --delay: 0.5;
    --font-size: 24;
}

/* Basic reset for a clean slate */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: white;
    min-height: 100vh;
    position: relative;
    font-family: 'TGL1451', Arial, sans-serif;
    --font-size: 20;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Background Image */
.background-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: url('../media/bg.jpg') no-repeat center center;
    background-size: cover;
    z-index: 1;
}

/* Particle Effect Container */
.particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Particle styling */
@keyframes float {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    animation: float 3s infinite ease-in-out;
}

/* Logo Container */
.logo-container {
    text-align: center;
    margin-bottom: 0px;
    position: relative;
    z-index: 3;
}

/* Glitch Effect Styling */
.glitch {
    font-size: 10em;
    color: black;
    position: relative;
}

.glitch .char {
    position: relative;
    display: inline-block;
    color: transparent;
    --txt: attr(data-char);
}

.glitch .char:after {
    content: var(--txt);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: black;
    animation: flash-letter calc(var(--speed, 3) * 1s) calc(var(--delay, 0) * 1s) infinite, 
               scale calc(var(--speed, 3) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1);
}

/* Character settings */
[data-char='A'] { --speed: 1; --delay: 1; --letter-1: "λ"; --letter-3: "("; }
[data-char='G'] { --speed: 2; --delay: 3; --letter-1: "X"; --letter-2: "E"; --letter-3: "("; --letter-4: "…"; }
[data-char='T'] { --speed: 2; --delay: 4; --letter-2: "L"; --letter-3: "ç"; --letter-4: "∂"; }
[data-char='B'] { --speed: 2; --delay: 5; --scale: 0.75; --letter-2: "L"; --letter-2: "à"; --letter-4: "¶"; }
[data-char='O'] { --speed: 2; --delay: 5; --scale: 0.75; --letter-2: "0"; --letter-2: "()"; }

/* Keyframes for glitch animations */
@keyframes flash-letter {
    0%, 25%, 100% { content: attr(data-char); }
    5% { content: var(--letter-1, attr(data-char)); }
    10% { content: var(--letter-2, attr(data-char)); }
    15% { content: var(--letter-3, attr(data-char)); }
    20% { content: var(--letter-4, attr(data-char)); }
}

@keyframes scale {
    0%, 47%, 55%, 100% { transform: scale(1); }
    50% { transform: scale(var(--scale, 1)); }
}

/* Separator */
.separator {
    width: 45%;
    max-width: 1100px;
    border: none;
    border-top: 2px solid rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 3;
}

/* Footer Styling */
footer {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    position: relative;
    z-index: 3;
    color: black;
    font-size: 0.9em;
    font-family: Arial, sans-serif;
    margin: auto;
}

footer a {
    color: black;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}