body {background-color: black; display: flex; flex-direction: column; }

.fractal {position: relative; display: flex;
     align-items: center; justify-content: center;
     animation: fade-up 3s; overflow: hidden; 
     }


@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translateY(-30px) Scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(200px) Scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

}


.text {display: flex; justify-content: space-evenly;
align-items: center;gap: 40px; animation: fade-down 2s;}

h1 {font-family: "Libre Franklin", sans-serif; 
    font-weight: 100; color: rgb(247, 100, 15); 
    font-size: 500%; text-align: center; z-index: 2; 
     display: flex; flex-direction: column;
animation: fade-down 1s;}

h2 {font-family: "Libre Franklin", sans-serif; 
    font-weight: 100; color: rgb(247, 100, 15); 
    font-size: 300%; z-index: 3; text-decoration: none;   
}
    h2 {
  transition: transform 0.3s ease-in-out; }

  .gum {text-decoration: none;}

  h3 {font-family: "Libre Franklin", sans-serif; 
    font-weight: 10; color: rgb(255, 255, 255); 
    font-size: 250%; z-index: 3;
     transition: transform 0.3s ease-in-out; 
}
h3:hover {
  transform: scale(1.1);}

  h2:hover {
  transform: scale(1.1); 
}

.links{    position: fixed;
            bottom: 30px;
            right: 30px;
            display: flex;
            gap: 20px;
            z-index: 1000;}

.inst { display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            animation: fade-up 1s;
            transition: transform 0.3s ease-in-out;
        }

.DD { display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            animation: fade-up 1s;
            transition: transform 0.3s ease-in-out;
        }

.DD:hover {
  transform: scale(1.5); 
}

.inst:hover {
  transform: scale(1.5); 
}

.lang {position: fixed;
            bottom: -30px;
            right: auto ;
            display: flex;
            gap: 20px;
            z-index: 1000;
            color: aliceblue;
            animation: fade-up 1s;
            
        }

@media (max-width: 480px) {


    h1 {font-size: 300%}
    h2 {font-size: 200%;}

    /* .fractal {scale: 200%;} */

    .fraxx { max-width:300%; max-height: auto;}

.fractal {position: relative; display: flex;
     align-items: center; justify-content: center;
     animation: fade-up 3s; overflow: hidden;
     }

    .links{    position: fixed;
            bottom: 30px;
            right: 30px;
            display: flex;
            gap: 20px;
            z-index: 1000;}

            .lang {position: fixed;
            bottom: -30px;
            right: auto ;
            display: flex;
            gap: 20px;
            z-index: 1000;
            color: aliceblue;
            animation: fade-up 1s;}

    .inst {            
            width: 70px;
            height: 70px;
        }

    .DD {            
            width: 70px;
            height: 70px;
        }




}