@charset "utf-8";
/* CSS Document */
.title-word {
  animation: color-animation 4s linear infinite;
}

.title-word-1 {
  --color-1: #E24C1C;
  --color-2: #114B95;
  --color-3: #8BD3E0;
  /*--color-1: #DF8453; - Original Color
  --color-2: #3D8DAE;
  --color-3: #E4A9A8;*/
}

.title-word-2 {
  --color-1: #114B95;
  --color-2: #8BD3E0;
  --color-3: #E24C1C;
  /*--color-1: #DBAD4A;
  --color-2: #ACCFCB;
  --color-3: #17494D;*/
}

.title-word-3 {
  --color-1: #8BD3E0;
  --color-2: #E24C1C;
  --color-3: #114B95;
  /*--color-1: #ACCFCB;
  --color-2: #E4A9A8;
  --color-3: #ACCFCB;*/
}

/*.title-word-4 {
  --color-1: #3D8DAE;
  --color-2: #DF8453;
  --color-3: #E4A9A8;
}*/

@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}

/* Here are just some visual styles. 🖌 */

/*.solidletters {
  display: grid;
  place-items: center;  
  text-align: center;
  height: 100vh
}*/
#sun {
	font-family: "Roboto VF", sans-serif;
	display: flex;
	flex-direction: column; 
	justify-content: center;
	align-items: center;
	color: #0F4C95;
	text-align: center;

}
h2.title {
	text-align: center;
	place-items: center;
	font-size: 100px;
	position: absolute;
	top: 400px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	/*color: #F30;
	left: 54px;*/
	
/*  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 8.5vw;
  text-transform: uppercase;*/
}
@media screen and (max-width: 1024px){
	h2.title {
	   font-size: 80px;
	   text-align: center;
	   top: 300px;
	}
}
@media screen and (max-width: 896px) {
	h2.title {
	   font-size: 60px;
	   top: 200px;
	}
}
@media screen and (max-width: 480px) {
	h2.title {
	   font-size: 40px;
	   top: 100px;
	}
}