/* Grundläggande styling för body, centrerar innehållet och sätter bakgrundsfärg */
body {
    margin: 0;
    display: flex;
    justify-content: center; /* Centrerar horisontellt */ 
    align-items: center; /* Centrerar vertikalt */
    min-height: 100vh; /* Säkerställer och tar upp hela skärmhöjden */
    background-color: #333333; /* Mörkgrå bakgrundsfärg */
    overflow: hidden; /* Förhindrar scrollning */
    font-family: 'Inter', sans-serif; 
    color: #fff; 
}

/* Wrapper för att hantera positionering av glitch-elementet och länkbehållaren */
.glitch-wrapper {
    position: relative;
    width: fit-content; 
    padding: 20px;
    display: flex;
    flex-direction: column; /* Staplar texten och länk-behållaren under varandra */
    align-items: center;    /* Centrerar allt horisontellt */
}

/* Huvudstilen för glitch-texten */
.glitch {
    position: relative;
    font-size: 250px; 
    font-weight: bold; 
    color: #fff; 
    text-transform: uppercase; 
    text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), 
                 0 0 10px rgba(51, 0, 51, 0.7), 
                 0 0 15px rgba(0, 51, 0, 0.7); 
    animation: glitch-main 1s infinite alternate; 
    white-space: nowrap; 
    border-radius: 10px; 
    padding: 10px 20px; 
}

/* Pseudo-element för glitch-effekten */
.glitch::before,
.glitch::after {
    content: attr(data-text); 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333333; 
    overflow: hidden; 
    border-radius: 10px; 
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #330033;
    animation: glitch-left 1.5s infinite alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #003366;
    animation: glitch-right 1s infinite alternate-reverse;
}

/* Keyframe-animationer för glitch */
@keyframes glitch-main {
    0% { text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), 0 0 10px rgba(51, 0, 51, 0.7), 0 0 15px rgba(0, 51, 0, 0.7); transform: translate(0); filter: blur(0px); }
    10% { filter: blur(1px); }
    20% { text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), 0 0 10px rgba(51, 0, 51, 0.7), 0 0 15px rgba(0, 51, 0, 0.7); transform: translate(-5px, 5px) rotate(0.5deg); filter: blur(0px); }
    30% { filter: blur(2px); }
    40% { text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), 0 0 10px rgba(51, 0, 51, 0.7), 0 0 15px rgba(0, 51, 0, 0.7); transform: translate(-5px, -5px) rotate(-0.5deg); filter: blur(0px); }
    50% { filter: blur(1px); }
    60% { text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), 0 0 10px rgba(51, 0, 51, 0.7), 0 0 15px rgba(0, 51, 0, 0.7); transform: translate(5px, 5px) rotate(0.5deg); filter: blur(0px); }
    70% { filter: blur(2px); }
    80% { text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), 0 0 10px rgba(51, 0, 51, 0.7), 0 0 15px rgba(0, 51, 0, 0.7); transform: translate(5px, -5px) rotate(-0.5deg); filter: blur(0px); }
    90% { filter: blur(1px); }
    100% { text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), 0 0 10px rgba(51, 0, 51, 0.7), 0 0 15px rgba(0, 51, 0, 0.7); transform: translate(0); filter: blur(0px); }
}

@keyframes glitch-left {
    0% { clip: rect(35px, 9999px, 85px, 0); transform: translate(-8px, 0); }
    10% { clip: rect(10px, 9999px, 120px, 0); transform: translate(0); }
    20% { clip: rect(100px, 9999px, 50px, 0); transform: translate(8px, 0); }
    30% { clip: rect(20px, 9999px, 100px, 0); transform: translate(-4px, 0); }
    40% { clip: rect(50px, 9999px, 110px, 0); transform: translate(4px, 0); }
    50% { clip: rect(0, 9999px, 120px, 0); transform: translate(0); }
    60% { clip: rect(90px, 9999px, 10px, 0); transform: translate(-6px, 0); }
    70% { clip: rect(40px, 9999px, 70px, 0); transform: translate(6px, 0); }
    80% { clip: rect(10px, 9999px, 60px, 0); transform: translate(-3px, 0); }
    90% { clip: rect(70px, 9999px, 30px, 0); transform: translate(3px, 0); }
    100% { clip: rect(0, 9999px, 120px, 0); transform: translate(0); }
}

@keyframes glitch-right {
    0% { clip: rect(10px, 9999px, 70px, 0); transform: translate(8px, 0); }
    10% { clip: rect(0, 9999px, 120px, 0); transform: translate(0); }
    20% { clip: rect(80px, 9999px, 20px, 0); transform: translate(-8px, 0); }
    30% { clip: rect(40px, 9999px, 90px, 0); transform: translate(4px, 0); }
    40% { clip: rect(110px, 9999px, 10px, 0); transform: translate(-4px, 0); }
    50% { clip: rect(0, 9999px, 120px, 0); transform: translate(0); }
    60% { clip: rect(60px, 9999px, 120px, 0); transform: translate(6px, 0); }
    70% { clip: rect(20px, 9999px, 30px, 0); transform: translate(-6px, 0); }
    80% { clip: rect(90px, 9999px, 5px, 0); transform: translate(3px, 0); }
    90% { clip: rect(30px, 9999px, 80px, 0); transform: translate(-3px, 0); }
    100% { clip: rect(0, 9999px, 120px, 0); transform: translate(0); }
}

/* Responsivitet */
@media (max-width: 1200px) { .glitch { font-size: 150px; } }
@media (max-width: 768px) { .glitch { font-size: 100px; } }
@media (max-width: 480px) { .glitch { font-size: 60px; } }

/* ==========================================================================
   NY STYLING FÖR LÄNKARNA (SIDA VID SIDA, STORA OCH BENVITA)
   ========================================================================== */

/* Behållaren som styr layouten för båda länkarna */
.links-container {
    display: flex;
    flex-direction: row;    /* Lägger länkarna bredvid varandra */
    justify-content: center;/* Centrerar länkarna i mitten */
    align-items: center;
    gap: 50px;              /* Avståndet (mellanrummet) mellan GitHub och Curse */
    margin-top: 50px;       /* Avståndet från TICSTYLE-texten ner till länkarna */
}

/* Gemensam styling för båda länkarna */
.site-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #f5f5f0 !important;       /* Snygg benvit färg */
    text-decoration: none !important;/* Tar bort understrykning */
    font-size: 36px !important;      /* Storlek på texten */
    font-weight: 600;
    letter-spacing: 1px;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Gemensam styling för ikonerna */
.site-link i {
    font-size: 46px !important;     /* Storlek på ikonerna */
    margin-right: 15px !important;  /* Avstånd mellan ikon och textlänk */
    color: #f5f5f0 !important;
}

/* Hover-effekt för båda länkarna */
.site-link:hover {
    color: #ffffff !important;       /* Blir helt kritvit vid hover */
    transform: scale(1.05);         /* Subtil förstoring vid hover */
}