@import url('https://fonts.googleapis.com/css?family=Special+Elite');

html, body {
	height: 100%;
	margin: 0;
}

 

         
body {
	font-family: 'Special Elite', cursive;
	background: #fffdf5;
	color: #3f3f5ae0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: url(https://i.pinimg.com/originals/44/6e/3b/446e3b79395a287ca32f7977dd83b290.jpg);  
    background-size: cover;  
    margin: 0;  
    overflow: hidden;
}

blockquote {
	font-weight: 100;
	font-size: 2rem;
	max-width: 600px;
	line-height: 1.4;
	position: relative;
	margin: 0;
	padding: .5rem;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -5rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -5rem;
	bottom: 1rem;
}

cite {
	line-height: 3;
	text-align: left;
}

/* Media Queries for further adjustments */
@media (max-width: 768px) {
    blockquote {
        padding: 0.5rem;
    }

    blockquote:before {
        left: -0.5rem;
        top: -0.5rem;
    }

    blockquote:after {
        right: -0.5rem;
        bottom: -0.5rem;
    }
}

@media (max-width: 480px) {
    blockquote {
        font-size: 1.2rem;
    }

    blockquote:before,
    blockquote:after {
        font-size: 3rem;
    }
}
.box{
	background-color: #100425;
	border-radius: 20px;
	text-align: center;
	justify-content: center;
	display: flex;
	margin-top:10px;
	margin-bottom:10px;
	padding: 30px;
}
.heading{
	font-family: monospace;
}
   .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
     font-family: 'Special Elite';
        padding: 10px 0; 
        text-align: center; 
    }


	

        /* body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    background: #121212;
    font-family: 'Arial', sans-serif;
    color: #fff;
    overflow: hidden;
} */

.split-text-container {
    display: flex;
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    overflow: hidden;
	margin-bottom: 50px;
}

.text-part {
    display: inline-block;
    position: relative;
    transform: translateX(0);
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.text-part.left {
    transform: translateX(-200%);
    animation-name: slide-in-left;
}

.text-part.right {
    transform: translateX(200%);
    animation-name: slide-in-right;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}