﻿.container-magikBox {
    position: relative !important;
    width: 100% !important;
    height: 100%;
}

@media (max-width: 768px) {
    .container-magikBox {
        height: 700px;
    }
}

.word, .light-effect {
    position: absolute !important;
    opacity: 0 !important;
    transform: translateY(50px) scale(0.8) !important;
    transition: opacity 1s ease, transform 1s ease !important;
    z-index: 1 !important;
}

@media (max-width: 768px) {
    .word {
        font-size: 12px !important;
    }

    .word, .light-effect {
        transform: translateY(30px) scale(0.7) !important;
    }

    .container-magikBox.visible .word,
    .container-magikBox.visible .light-effect {
        transform: translate(calc(var(--random-x) * 0.5), calc(-30px - var(--random-y) * 0.5)) scale(0.9) !important;
    }
}

.container-magikBox.visible .word,
.container-magikBox.visible .light-effect {
    opacity: 1 !important;
    transform: translate(calc(var(--random-x)), calc(-50px - var(--random-y))) scale(1) !important;
}

@keyframes glow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.word {
    font-size: 20px !important;
    font-weight: 400 !important;
    background: linear-gradient(90deg, #88E04B, #E6FF27, #E6FF27, #88E04B) !important;
    background-size: 400% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: glow 3s infinite linear !important;
}

.light-effect {
    width: 5px !important;
    height: 5px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(255, 252, 170) 100%) !important;
    border-radius: 100% !important;
    box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.9) !important;
}


.word:nth-of-type(1) {
    --random-x: -460px !important;
    --random-y: 10px !important;
}

.word:nth-of-type(2) {
    --random-x: -400px !important;
    --random-y: 140px !important;
}

.word:nth-of-type(3) {
    --random-x: 200px !important;
    --random-y: 220px !important;
}

.word:nth-of-type(4) {
    --random-x: -150px !important;
    --random-y: 100px !important;
}

.word:nth-of-type(5) {
    --random-x: -300px !important;
    --random-y: 225px !important;
}

.word:nth-of-type(6) {
    --random-x: 150px !important;
    --random-y: 100px !important;
}

.word:nth-of-type(7) {
    --random-x: 400px !important;
    --random-y: 140px !important;
}

.word:nth-of-type(8) {
    --random-x: 600px !important;
    --random-y: 10px !important;
}

.light-effect:nth-of-type(1) {
    --random-x: -250px !important;
    --random-y: -50px !important;
}

.light-effect:nth-of-type(2) {
    --random-x: 550px !important;
    --random-y: 180px !important;
}

.light-effect:nth-of-type(3) {
    --random-x: 250px !important;
    --random-y: 20px !important;
}

.light-effect:nth-of-type(4) {
    --random-x: -200px !important;
    --random-y: 130px !important;
}

.light-effect:nth-of-type(5) {
    --random-x: -350px !important;
    --random-y: 260px !important;
}

.light-effect:nth-of-type(6) {
    --random-x: -60px !important;
    --random-y: 150px !important;
}

.light-effect:nth-of-type(7) {
    --random-x: 400px !important;
    --random-y: 10px !important;
}

.light-effect:nth-of-type(8) {
    --random-x: 600px !important;
    --random-y: 100px !important;
}

.light-effect:nth-of-type(9) {
    --random-x: -20px !important;
    --random-y: -50px !important;
}

.light-effect:nth-of-type(10) {
    --random-x: 150px !important;
    --random-y: 15px !important;
}

.light-effect:nth-of-type(11) {
    --random-x: 100px !important;
    --random-y: 300px !important;
}

.light-effect:nth-of-type(12) {
    --random-x: -450px !important;
    --random-y: 160px !important;
}

.light-effect:nth-of-type(13) {
    --random-x: -80px !important;
    --random-y: 260px !important;
}

.light-effect:nth-of-type(14) {
    --random-x: 280px !important;
    --random-y: 120px !important;
}

.light-effect:nth-of-type(15) {
    --random-x: 350px !important;
    --random-y: 280px !important;
}

.light-effect:nth-of-type(16) {
    --random-x: 570px !important;
    --random-y: -90px !important;
}


.container-magikBox {
    position: relative !important;
    width: 100% !important;
    height: 100%;
}

@media (max-width: 768px) {
    .container-magikBox {
        height: 700px;
    }
}

.word, .light-effect {
    position: absolute !important;
    opacity: 0 !important;
    transform: translateY(50px) scale(0.8) !important;
    transition: opacity 1s ease, transform 1s ease !important;
    z-index: 1 !important;
}

@media (max-width: 768px) {
    .word {
        font-size: 12px !important;
    }

    .word, .light-effect {
        transform: translateY(30px) scale(0.7) !important;
    }

    .container-magikBox.visible .word,
    .container-magikBox.visible .light-effect {
        transform: translate(calc(var(--random-x) * 0.5), calc(-30px - var(--random-y) * 0.5)) scale(0.9) !important;
    }
}

.container-magikBox.visible .word,
.container-magikBox.visible .light-effect {
    opacity: 1 !important;
    transform: translate(calc(var(--random-x)), calc(-50px - var(--random-y))) scale(1) !important;
}

@keyframes glow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.word {
    font-size: 20px !important;
    font-weight: 400 !important;
    background: linear-gradient(90deg, #88E04B, #E6FF27, #E6FF27, #88E04B) !important;
    background-size: 400% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: glow 3s infinite linear !important;
}

.light-effect {
    width: 5px !important;
    height: 5px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(255, 252, 170) 100%) !important;
    border-radius: 100% !important;
    box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.9) !important;
}


.word:nth-of-type(1) {
    --random-x: -460px !important;
    --random-y: 10px !important;
}

.word:nth-of-type(2) {
    --random-x: -400px !important;
    --random-y: 140px !important;
}

.word:nth-of-type(3) {
    --random-x: 200px !important;
    --random-y: 220px !important;
}

.word:nth-of-type(4) {
    --random-x: -150px !important;
    --random-y: 100px !important;
}

.word:nth-of-type(5) {
    --random-x: -300px !important;
    --random-y: 225px !important;
}

.word:nth-of-type(6) {
    --random-x: 150px !important;
    --random-y: 100px !important;
}

.word:nth-of-type(7) {
    --random-x: 400px !important;
    --random-y: 140px !important;
}

.word:nth-of-type(8) {
    --random-x: 600px !important;
    --random-y: 10px !important;
}

.light-effect:nth-of-type(1) {
    --random-x: -250px !important;
    --random-y: -50px !important;
}

.light-effect:nth-of-type(2) {
    --random-x: 550px !important;
    --random-y: 180px !important;
}

.light-effect:nth-of-type(3) {
    --random-x: 250px !important;
    --random-y: 20px !important;
}

.light-effect:nth-of-type(4) {
    --random-x: -200px !important;
    --random-y: 130px !important;
}

.light-effect:nth-of-type(5) {
    --random-x: -350px !important;
    --random-y: 260px !important;
}

.light-effect:nth-of-type(6) {
    --random-x: -60px !important;
    --random-y: 150px !important;
}

.light-effect:nth-of-type(7) {
    --random-x: 400px !important;
    --random-y: 10px !important;
}

.light-effect:nth-of-type(8) {
    --random-x: 600px !important;
    --random-y: 100px !important;
}

.light-effect:nth-of-type(9) {
    --random-x: -20px !important;
    --random-y: -50px !important;
}

.light-effect:nth-of-type(10) {
    --random-x: 150px !important;
    --random-y: 15px !important;
}

.light-effect:nth-of-type(11) {
    --random-x: 100px !important;
    --random-y: 300px !important;
}

.light-effect:nth-of-type(12) {
    --random-x: -450px !important;
    --random-y: 160px !important;
}

.light-effect:nth-of-type(13) {
    --random-x: -80px !important;
    --random-y: 260px !important;
}

.light-effect:nth-of-type(14) {
    --random-x: 280px !important;
    --random-y: 120px !important;
}

.light-effect:nth-of-type(15) {
    --random-x: 350px !important;
    --random-y: 280px !important;
}

.light-effect:nth-of-type(16) {
    --random-x: 570px !important;
    --random-y: -90px !important;
}

/* Media query to 768px */


@media (max-width: 768px) {
    .word:nth-of-type(1) {
        --random-x: -60px !important;
        --random-y: 125px !important;
    }

    .word:nth-of-type(2) {
        --random-x: 190px !important;
        --random-y: 230px !important;
    }

    .word:nth-of-type(3) {
        --random-x: 50px !important;
        --random-y: 310px !important;
    }

    .word:nth-of-type(4) {
        --random-x: -75px !important;
        --random-y: 40px !important;
    }

    .word:nth-of-type(5) {
        --random-x: -130px !important;
        --random-y: 225px !important;
    }

    .word:nth-of-type(6) {
        --random-x: 125px !important;
        --random-y: 50px !important;
    }

    .word:nth-of-type(7) {
        --random-x: 370px !important;
        --random-y: 50px !important;
    }

    .word:nth-of-type(8) {
        --random-x: 280px !important;
        --random-y: 135px !important;
    }

    .light-effect:nth-of-type(1) {
        --random-x: 280px !important;
        --random-y: 225px !important;
    }

    .light-effect:nth-of-type(2) {
        --random-x: 275px !important;
        --random-y: 90px !important;
    }

    .light-effect:nth-of-type(3) {
        --random-x: 225px !important;
        --random-y: 330px !important;
    }

    .light-effect:nth-of-type(4) {
        --random-x: 100px !important;
        --random-y: 265px !important;
    }

    .light-effect:nth-of-type(5) {
        --random-x: 75px !important;
        --random-y: 150px !important;
    }

    .light-effect:nth-of-type(6) {
        --random-x: 30px !important;
        --random-y: 225px !important;
    }

    .light-effect:nth-of-type(7) {
        --random-x: 200px !important;
        --random-y: 5px !important;
    }

    .light-effect:nth-of-type(8) {
        --random-x: 300px !important;
        --random-y: 50px !important;
    }

    .light-effect:nth-of-type(9) {
        --random-x: -10px !important;
        --random-y: -25px !important;
    }

    .light-effect:nth-of-type(10) {
        --random-x: 45px !important;
        --random-y: 70px !important;
    }

    .light-effect:nth-of-type(11) {
        --random-x: 350px !important;
        --random-y: 0px !important;
    }

    .light-effect:nth-of-type(12) {
        --random-x: 15px !important;
        --random-y: 135px !important;
    }

    .light-effect:nth-of-type(13) {
        --random-x: 180px !important;
        --random-y: 130px !important;
    }

    .light-effect:nth-of-type(14) {
        --random-x: 140px !important;
        --random-y: 60px !important;
    }

    .light-effect:nth-of-type(15) {
        --random-x: 325px !important;
        --random-y: 280px !important;
    }

    .light-effect:nth-of-type(16) {
        --random-x: 50px !important;
        --random-y: 315px !important;
    }
}


/* Media query to 480px */


@media (max-width: 480px) {

    .word:nth-of-type(1) {
        --random-x: 10px !important;
        --random-y: 175px !important;
    }
/*    molntjäster*/
    .word:nth-of-type(2) {
        --random-x: 120px !important;
        --random-y: 370px !important;
    }
/*    frontendoch*/
    .word:nth-of-type(3) {
        --random-x: -60px !important;
        --random-y: 370px !important;
    }
/*    webtjäntser*/
    .word:nth-of-type(4) {
        --random-x: -60px !important;
        --random-y: 40px !important;
    }

    .word:nth-of-type(5) {
        --random-x: 30px !important;
        --random-y: 275px !important;
    }
/*    -----sekerhet---*/
    .word:nth-of-type(6) {
        --random-x: 125px !important;
        --random-y: 40px !important;
    }
/*    --devops--*/
    .word:nth-of-type(7) {
        --random-x: 120px !important;
        --random-y:100px !important;
    }
/*    ---integrationer*/
    .word:nth-of-type(8) {
        --random-x: -60px !important;
        --random-y: 105px !important;
    }

    .light-effect:nth-of-type(1) {
        --random-x: -80px !important;
        --random-y: 225px !important;
    }

    .light-effect:nth-of-type(2) {
        --random-x: 75px !important;
        --random-y: 90px !important;
    }

    .light-effect:nth-of-type(3) {
        --random-x: 105px !important;
        --random-y: 330px !important;
    }

    .light-effect:nth-of-type(4) {
        --random-x: 100px !important;
        --random-y: 265px !important;
    }

    .light-effect:nth-of-type(5) {
        --random-x: 75px !important;
        --random-y: 150px !important;
    }

    .light-effect:nth-of-type(6) {
        --random-x: 70px !important;
        --random-y: 225px !important;
    }

    .light-effect:nth-of-type(7) {
        --random-x: 240px !important;
        --random-y: 5px !important;
    }

    .light-effect:nth-of-type(8) {
        --random-x: 60px !important;
        --random-y: 50px !important;
    }

    .light-effect:nth-of-type(9) {
        --random-x: -10px !important;
        --random-y: -25px !important;
    }

    .light-effect:nth-of-type(10) {
        --random-x: 205px !important;
        --random-y: 70px !important;
    }

    .light-effect:nth-of-type(11) {
        --random-x: 120px !important;
        --random-y: 0px !important;
    }

    .light-effect:nth-of-type(12) {
        --random-x: 15px !important;
        --random-y: 135px !important;
    }

    .light-effect:nth-of-type(13) {
        --random-x: 170px !important;
        --random-y: 130px !important;
    }

    .light-effect:nth-of-type(14) {
        --random-x: 180px !important;
        --random-y: 60px !important;
    }

    .light-effect:nth-of-type(15) {
        --random-x: 165px !important;
        --random-y: 280px !important;
    }

    .light-effect:nth-of-type(16) {
        --random-x: -80px !important;
        --random-y: 315px !important;
    }
}









/*.container-magikBox {
    position: relative !important;
    width: 100% !important;
    height: 100%;
}

@media (max-width: 768px) {
    .container-magikBox {
        height: 700px; 
    }
}

.word, .light-effect {
    position: absolute !important;
    opacity: 0 !important;
    transform: translateY(50px) scale(0.8) !important;
    transition: opacity 1s ease !important, transform 1s ease;
    z-index: 1 !important;
}

@media (max-width: 768px) {
    .word {
        font-size: 12px !important;
    }

    .word, .light-effect {
        transform: translateY(30px) scale(0.7) !important; 
    }

    .container-magikBox.visible .word,
    .container-magikBox.visible .light-effect {
        transform: translate(calc(var(--random-x) * 0.5), calc(-30px - var(--random-y) * 0.5)) scale(0.9) !important;
    }
}

.container-magikBox.visible .word,
.container-magikBox.visible .light-effect {
    opacity: 1 !important;
    transform: translate(calc(var(--random-x)), calc(-50px - var(--random-y))) scale(1) !important;
}

@keyframes glow {
    0% {
        background-position: 0% 50% !important;
    }

    50% {
        background-position: 100% 50% !important;
    }

    100% {
        background-position: 0% 50% !important;
    }
}

.word {
    font-size: 20px !important;
    font-weight: 400 !important;
    background: linear-gradient(90deg, #88E04B, #E6FF27, #E6FF27, #88E04B) !important;
    background-size: 400% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: glow 3s infinite linear !important;
}

.light-effect {
    width: 5px !important;
    height: 5px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(255, 252, 170) 100%) !important;
    border-radius: 100% !important;
    box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.9) !important;
}

.word:nth-of-type(1) {
    --random-x: -460px !important;
    --random-y: 10px !important;
}

.word:nth-of-type(2) {
    --random-x: -400px !important;
    --random-y: 140px !important;
}

.word:nth-of-type(3) {
    --random-x: 200px !important;
    --random-y: 220px !important;
}

.word:nth-of-type(4) {
    --random-x: -150px !important;
    --random-y: 100px !important;
}

.word:nth-of-type(5) {
    --random-x: -300px !important;
    --random-y: 225px !important;
}

.word:nth-of-type(6) {
    --random-x: 150px !important;
    --random-y: 100px !important;
}

.word:nth-of-type(7) {
    --random-x: 400px !important;
    --random-y: 140px !important;
}

.word:nth-of-type(8) {
    --random-x: 600px !important;
    --random-y: 10px !important;
}

.light-effect:nth-of-type(1) {
    --random-x: -250px !important;
    --random-y: -50px !important;
}

.light-effect:nth-of-type(2) {
    --random-x: 550px !important;
    --random-y: 180px !important;
}

.light-effect:nth-of-type(3) {
    --random-x: 250px !important;
    --random-y: 20px !important;
}

.light-effect:nth-of-type(4) {
    --random-x: -200px !important;
    --random-y: 130px !important;
}

.light-effect:nth-of-type(5) {
    --random-x: -350px !important;
    --random-y: 260px !important;
}

.light-effect:nth-of-type(6) {
    --random-x: -60px !important;
    --random-y: 150px !important;
}

.light-effect:nth-of-type(7) {
    --random-x: 400px !important;
    --random-y: 10px !important;
}

.light-effect:nth-of-type(8) {
    --random-x: 600px !important;
    --random-y: 100px !important;
}

.light-effect:nth-of-type(9) {
    --random-x: -20px !important;
    --random-y: -50px !important;
}

.light-effect:nth-of-type(10) {
    --random-x: 150px !important;
    --random-y: 15px !important;
}

.light-effect:nth-of-type(11) {
    --random-x: 100px !important;
    --random-y: 300px !important;
}

.light-effect:nth-of-type(12) {
    --random-x: -450px !important;
    --random-y: 160px !important;
}

.light-effect:nth-of-type(13) {
    --random-x: -80px !important;
    --random-y: 260px !important;
}

.light-effect:nth-of-type(14) {
    --random-x: 280px !important;
    --random-y: 120px !important;
}

.light-effect:nth-of-type(15) {
    --random-x: 350px !important;
    --random-y: 280px !important;
}

.light-effect:nth-of-type(16) {
    --random-x: 570px !important;
    --random-y: -90px !important;
}*/

/*.group:hover + img {
    opacity: 1 !important;
}

.container-magikBox > img {
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
    z-index: 10 !important;
}*/



/* Media query para pantallas pequeñas */
/*@media (max-width: 768px) {
    .word:nth-of-type(1) {
        --random-x: -60px !important;
        --random-y: 125px !important;
    }

    .word:nth-of-type(2) {
        --random-x: 190px !important;
        --random-y: 230px !important;
    }*/
    /*    frontend och tillgänglighet*/
    /*.word:nth-of-type(3) {
        --random-x: 50px !important;
        --random-y: 310px !important;
    }*/
    /*   Webtjänster*/
    /*.word:nth-of-type(4) {
        --random-x: -75px !important;
        --random-y: 40px !important;
    }*/
    /*    Api-Arlitektur & utveckling*/
    /*.word:nth-of-type(5) {
        --random-x: -130px !important;
        --random-y: 225px !important;
    }*/
    /*    säkerhet*/
    /*.word:nth-of-type(6) {
        --random-x: 125px !important;
        --random-y: 50px !important;
    }*/
    /*     DevOps*/
    /*.word:nth-of-type(7) {
        --random-x: 370px !important;
        --random-y: 50px !important;
    }*/
    /*    integrationer*/
    /*.word:nth-of-type(8) {
        --random-x: 280px !important;
        --random-y: 135px !important;
    }

    .light-effect:nth-of-type(1) {
        --random-x: 280px !important;
        --random-y: 225px !important;
    }

    .light-effect:nth-of-type(2) {
        --random-x: 275px !important;
        --random-y: 90px !important;
    }

    .light-effect:nth-of-type(3) {
        --random-x: 225px !important;
        --random-y: 330px !important;
    }

    .light-effect:nth-of-type(4) {
        --random-x: 100px !important;
        --random-y: 265px !important;
    }

    .light-effect:nth-of-type(5) {
        --random-x: 75px !important;
        --random-y: 150px !important;
    }

    .light-effect:nth-of-type(6) {
        --random-x: 30px !important;
        --random-y: 225px !important;
    }

    .light-effect:nth-of-type(7) {
        --random-x: 200px !important;
        --random-y: 5px !important;
    }

    .light-effect:nth-of-type(8) {
        --random-x: 300px !important;
        --random-y: 50px !important;
    }

    .light-effect:nth-of-type(9) {
        --random-x: -10px !important;
        --random-y: -25px !important;
    }

    .light-effect:nth-of-type(10) {
        --random-x: 45px !important;
        --random-y: 70px !important;
    }

    .light-effect:nth-of-type(11) {
        --random-x: 350px !important;
        --random-y: 0px !important;
    }

    .light-effect:nth-of-type(12) {
        --random-x: 15px !important;
        --random-y: 135px !important;
    }

    .light-effect:nth-of-type(13) {
        --random-x: 180px !important;
        --random-y: 130px !important;
    }

    .light-effect:nth-of-type(14) {
        --random-x: 140px !important;
        --random-y: 60px !important;
    }

    .light-effect:nth-of-type(15) {
        --random-x: 325px !important;
        95--random-y: 280px !important;
    }

    .light-effect:nth-of-type(16) {
        --random-x: 50px !important;
        --random-y: 315px !important;
    }
}*/
