@import url('https://fonts.googleapis.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900&display=swap');
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Exo 2';
    background: linear-gradient(131deg, #5b00b4, #0012a7, #7f1b8a, #00ae0e);
	background-size: 800% 800%;
}

.container {
    text-align: center; /* Center the text container */
    position: relative; /* For absolute positioning of studio name */

}

.teaser {
    position: relative;
    margin-bottom: 25em; /* Increased margin to push studio name further down */
}

.word {
    font-size: 8em;
    opacity: 0; /* Start as invisible */
    transition: opacity 1s ease; /* Longer transition for opacity */
    position: relative;
		        color: white;
  text-shadow:#2BF7BD 0px 0 0.1em;
}

#word1 {
    margin-left: -3.5em; /* Move the first word closer to the left side */
}

#word2 {
    margin-left: 0em; /* Adjusted margin for the second word */
}

#word3 {
    margin-left: 3.2em; /* Adjusted margin for the third word */
}

.studio-name {
    font-size: 10em;
    font-weight: bold; /* Make studio name bold */
    opacity: 0; /* Start as invisible */
    transition: opacity 1s ease; /* Longer transition for opacity */
    margin-top: 16em; /* Increased bottom margin to move studio name further down */
    position: absolute;
    bottom: 0; /* Position at the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Centering adjustment */
    white-space: nowrap; /* Prevent wrapping */
    	        color: #e1fff4;
  text-shadow:#D0B 4px 4px 3px;
}


.animated {
    -webkit-animation: AnimationName 16s ease infinite;
    -moz-animation: AnimationName 16s ease infinite;
    animation: AnimationName 16s ease infinite;
}
 
@-webkit-keyframes AnimationName {
    0%{background-position:0% 63%}
    50%{background-position:100% 38%}
    100%{background-position:0% 63%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 63%}
    50%{background-position:100% 38%}
    100%{background-position:0% 63%}
}
@keyframes AnimationName {
    0%{background-position:0% 63%}
    50%{background-position:100% 38%}
    100%{background-position:0% 63%}
}


@keyframes flyIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}