@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

body {
    /* overflow: hidden; */
    background-color: #fff;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#loader {
    height: 100vh;
    display: flex;
}

svg {
	font-family: "Russo One", sans-serif;
	width: 100%; height: 100%;

}
svg text {
	animation: stroke 3s infinite alternate;
	stroke-width: 2;
	stroke: #075AB6;
	font-size: 100px;
    align-items: center;
    justify-content: center;
}
@keyframes stroke {
	0%   {
		fill: rgba(150,182,255,0); stroke: rgba(7,90,182,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(150,182,255,0); stroke: rgba(7,90,182,1); }
	80%  {fill: rgba(150,182,255,0); stroke: rgba(7,90,182,1); stroke-width: 3; }
	100% {
		fill: rgba(150,182,255,1); stroke: rgba(7,90,182,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}   

.animate-content {
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s;
}

@keyframes animatebottom { 
    from{ bottom: -100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
}

@media (max-width: 375px) {
   
	svg text {
		animation: stroke 3s infinite alternate;
		stroke-width: 2;
		stroke: #075AB6;
		font-size: 100px;
		align-items: center;
		justify-content: center;
	}

	@keyframes stroke {
		0%   {
			fill: rgba(150,182,255,0); stroke: rgba(7,90,182,1);
			stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 1;
		}
		70%  {fill: rgba(150,182,255,0); stroke: rgba(7,90,182,1); }
		80%  {fill: rgba(150,182,255,0); stroke: rgba(7,90,182,1); stroke-width: 2; }
		100% {
			fill: rgba(150,182,255,1); stroke: rgba(7,90,182,0);
			stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
		}
	}
	
}