* {
    box-sizing: border-box;
    
}


/*---------------Mobile Text-------------*/

/* ============================
    
       ============================ */
.title {
    font-size: var(--title-size);
}

.subtitle {
    font-size: var(--subtitle-size);
}

.text {
    font-size: var(--text-size);
}

/*---------------Mobile Text-------------*/
@media (max-width: 480px) {
    .title {
        font-size: calc(var(--title-size) * 0.6) !important;
    }

    .subtitle {
        font-size: calc(var(--subtitle-size) * 0.6) !important;
    }

    .text {
        font-size: calc(var(--text-size) * 0.8) !important;
    }

    .markdown-content {
        font-size: calc(var(--markdown-size) * 0.8) !important;
    }

    .title-sida {
        font-size: calc(var(--titlesida-size) * 0.5) !important;
    }
}

/*------------------------NAVBAR-------------------------------*/


#navbar {
    transition: opacity 1s ease-in-out;
    opacity: 1;
}



.hamburger-menu {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #1E22AA;
    margin: 6px 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

@media (max-width: 576px) {
    .bar1, .bar2, .bar3 {
        width: 25px;
        height: 2.5px;
       
    }
}

.hamburger-menu.change .bar1 {
    transform: translateY(11px) rotate(-45deg);
}

.hamburger-menu.change .bar2 {
    opacity: 0;
}

.hamburger-menu.change .bar3 {
    transform: translateY(-11px) rotate(45deg);
}

/* Mobile Menu Styles */
#mobile-menu {
    display: none;
}

    #mobile-menu.open {
        display: flex;
        flex-direction: column;
        background-color: #AEFF7E;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 10;
        padding: 1rem 0;
    }

    #mobile-menu ul {
        list-style: none;
        padding: 0;
    }

        #mobile-menu ul li {
            width: 100%;
            text-align: center;
            margin: 10px 0;
        }

            #mobile-menu ul li a {
                display: inline-block;
                padding: 10px 0;
                border-bottom: 2px solid transparent;
                transition: border-color 0.3s ease, color 0.3s ease;
            }

                #mobile-menu ul li a:hover {
                    color: #EFFFA4;
                    border-bottom: 2px solid #78CF37;
                }


/*----------------------------------BIG NAVBAR----------------------------------------------*/


.fade-in {
    opacity: 0;
    transform: translateX(-30px);
    animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-text {
    animation: slideInOut 2s ease-in-out forwards;
}

@keyframes slideInOut {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    50% {
        transform: translateX(-50%);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.nav-transition {
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hidden-nav {
    opacity: 0;
    visibility: hidden;
}

.visible-nav {
    opacity: 1;
    visibility: visible;
}


/* ======================= */
/* Animation Desktop (CSS) */
/* ======================= */
/**/
@keyframes slideToOriginal {
    0%, 15% {
        transform: translate(var(--start-x), var(--start-y)) rotate(var(--start-rotate));
    }

    45%, 55% {
        transform: translate(0, 0) rotate(0deg);
    }

    85%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.puzzle-animation {
    position: relative;
    width: 300px;
    height: 200px;
}

.pieces1-2 img,
.pieces3-4 img {
    position: absolute;
    animation: slideToOriginal 7s ease-in-out forwards; 
    animation-delay: 1s;
    transform: translate(var(--start-x), var(--start-y)) rotate(var(--start-rotate)); 
}

#puzzle1 {
    --start-x: -150px;
    --start-y: -100px;
    --start-rotate: -45deg;
    top: 10px;
    left: 255px;
    z-index: 1;
}

#puzzle2 {
    --start-x: 150px;
    --start-y: -100px;
    --start-rotate: 45deg;
    top: 3px;
    left: 355px;
    z-index: 2;
}

#puzzle3 {
    --start-x: 150px;
    --start-y: 100px;
    --start-rotate: 90deg;
    top: 108px;
    left: 370px;
    z-index: 3;
}

#puzzle4 {
    --start-x: -150px;
    --start-y: 100px;
    --start-rotate: -90deg;
    top: 135px;
    left: 255px;
    z-index: 4;
}
@media (max-width: 792px) {
    #puzzle1 {
        --start-x: -150px;
        --start-y: -100px;
        --start-rotate: -45deg;
        top: 10px;
        left: 260px;
        z-index: 1;
    }

    #puzzle2 {
        --start-x: 150px;
        --start-y: -100px;
        --start-rotate: 45deg;
        top: 3px;
        left: 320px;
        z-index: 2;
    }

    #puzzle3 {
        --start-x: 150px;
        --start-y: 100px;
        --start-rotate: 90deg;
        top: 70px;
        left: 335px;
        z-index: 3;
    }

    #puzzle4 {
        --start-x: -150px;
        --start-y: 100px;
        --start-rotate: -90deg;
        top: 80px;
        left: 258px;
        z-index: 4;
    }
}

@media (max-width: 480px) {
    #puzzle1 {
        --start-x: -150px;
        --start-y: -100px;
        --start-rotate: -45deg;
        top: 10px;
        left: 140px;
        z-index: 1;
    }

    #puzzle2 {
        --start-x: 150px;
        --start-y: -100px;
        --start-rotate: 45deg;
        top: 3px;
        left: 201px;
        z-index: 2;
    }

    #puzzle3 {
        --start-x: 150px;
        --start-y: 100px;
        --start-rotate: 90deg;
        top: 74px;
        left: 215px;
        z-index: 3;
    }

    #puzzle4 {
        --start-x: -150px;
        --start-y: 100px;
        --start-rotate: -90deg;
        top: 85px;
        left: 140px;
        z-index: 4;
    }
}