@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

*, *::before, *::after {
	padding: 0;
	margin: 0 auto;
	font-family: Raleway, sans-serif;
}

body {
	background-color: #0F0F0F;
}

.container {
	display: flex;
	flex-direction: column;
	font-size: 2vw;
	background-color: #0F0F0F;
	color: #1E90FF;
	width: 60%;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	/* Vertically Center */
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/* Solves a problem in which the content is being cut when the div is smaller than its' wrapper: */
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
	/* Vertically Center ENDS */
}

.text {
	display: flex;
	width: 92%;
	max-width: 92%;
	height: 100%;
	max-height: 100%;
	min-height: 6vw;
	padding: 0em 0em 0em 0em;
	margin: 2em 0em 2em 0em;
	overflow: auto;
}

.bold {
	font-weight: bold;
}

/* Effect1 */
.effect1 {
	background: 50% 100% / 50% 50% no-repeat
				radial-gradient(ellipse at bottom, #1E90FF, transparent, transparent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 10vw;
	animation: reveal 3000ms ease-in-out forwards 200ms,
			   glow 2500ms linear infinite 2000ms;
}

@keyframes reveal {
	80% {
		letter-spacing: 8px;
	}
	100% {
		background-size: 300% 300%;
	}
}
  
@keyframes glow {
	40% {
		text-shadow: 0 0 8px #1E90FF;
	}
}
/* Effect1 ENDS */

/* Effect2 */
.effect2 {
	display: flex;
/* border:1px solid red; */
	width: 100%;
	height: 100%;
	font-size: 250px;
	align-items: center;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke: #1E90FF;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #3CB371;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #CD5C5C;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #1E90FF;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #3CB371;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}
/* Effect2 ENDS */

/* Btn CSS */
.button-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 5rem;
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 1em 0em;
    background-color: var(--bg-btn-card);
    transition: 0.4s;
    border-radius: var(--card-border-radius);
    flex-direction: column;
    position: relative;
}


/* Btn CSS ENDS */

/* ImOnlyYisus Btn CSS */
.ImOnlyYisusContainer {
    position: relative;
}

.ImOnlyYisus-btn {
    padding: 6px;
    padding-bottom: 0.7em;
    padding-top: 0.7em;
    font-size: 2vw;
    text-transform: uppercase;
    color: #CD5C5C;
    border: none;
    background-color: transparent;
    transition: 0.3s;
}

.ImOnlyYisus-btn::after {
    content: '';
    background-color: #CD5C5C;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 5%;
    transition: 0.3s;
}

.ImOnlyYisus-btn::before {
    content: '';
    background-color: #CD5C5C;
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 5%;
    transition: 0.3s;
}

.ImOnlyYisus-btn:hover {
    text-shadow: 0 0 10px #CD5C5C, 0 0 20px #CD5C5C, 0 0 30px #e60073,
        0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

.ImOnlyYisus-btn:hover::after {
    width: 100%;
}

.ImOnlyYisus-btn:hover::before {
    width: 100%;
}
/* ImOnlyYisus Btn CSS ENDS */

/* For Portrait Screen */
@media (max-aspect-ratio: 1/1) {
	.container {
		display: flex;
		flex-direction: column;
		font-size: 2vw;
		font-family: Raleway, sans-serif;
		font-size: 34px;
		background-color: #0F0F0F;
		color: #1E90FF;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		/* Vertically Center */
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		/* Solves a problem in which the content is being cut when the div is smaller than its' wrapper: */
		max-width: 100%;
		max-height: 100%;
		overflow: auto;
		/* Vertically Center ENDS */
	}
	
	.ImOnlyYisus-btn {
		padding: 6px;
		padding-bottom: 0.7em;
		padding-top: 0.7em;
		font-size: 2vh;
		text-transform: uppercase;
		color: #CD5C5C;
		border: none;
		background-color: transparent;
		transition: 0.3s;
	}

}