/* Insipired from: // https://prismic.io/blog/css-animation-examples */
/* significantly modified by a human :D */

/* init page settings */
html {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	background-color: #013915;
	word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    margin: 0px;
    padding: 0px;
    min-height: 100dvh;
    animation: change-background 3s infinite linear;
    overflow-x: hidden;
}

/* Message align BEGIN */
.spacing-top {
    margin-top: 7.5vh;
}

.spacing-txt {
    margin-top: 5vh;
}

.font-heading {
    font-size: 1.6rem !important;
    margin-left: 7.5vw !important;
    margin-right: 7.5vw !important;
    margin-bottom: 22px;
}

.font-txt {
    font-size: 1.2rem !important;
    margin-left: 7.5vw !important;
    padding-right: 7.5vw !important;
    margin-top: 20px;
    min-width: 85vw;
    max-width: 85vw;
    text-wrap: pretty;
}

.b-day-ref {
    display: flex;
    width: 100vw;
    margin-left: 15vw;
}

.b-day-ref p, a {
    color: #01ff56;
    font-size: 1.1rem !important;
}


/* Message align END */

/* Message anim BEGIN */
.animate {
	font-size: 50px;
    margin-left: 7.5vw;
    margin-right: auto;
}

.animate span {
	display: inline-block;
    white-space: pre;
}

.anim-txt span {
	color: #01ff56;
	opacity: 0;
	transform: rotate(-180deg) translate(150px, 0);
	animation: twister .5s forwards;
}
/* Message anim END */


/* Page scaling BEGIN */

/* Page scaling END */

/* KeyFrames anim */
@keyframes twister {
    /* char moving anim */
	10% {
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) translate(0);
		opacity: 1;
	}
    
    /* color anim */
    60% {
		color: #01ff56;
	}

	80% {
		color: #01ff56;
	}

	99% {
		color: #0800ff;
	}

	100% {
		color: #01ff56;
	}
}

@keyframes change-background {
    0%,
    59%,
    93%,
    100% {
        background: #013915;
    }

    61%,
    88% {
        background: #000;
    }
}

@media screen and (max-width: 360px) {
    .font-heading {
        font-size: 13px !important;
    }
    
    .font-txt {
        font-size: 10.5px !important;
    }

    .b-day-ref {
        font-size: 9px !important;
    }
}