@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
#main{font-family: "Roboto", sans-serif;margin-bottom: 50px;}

#header_box{
    margin: 50px 0 100px 0;
    text-align: center;
}
#header_box h1{
    font-size: 14px;
}
#header_box p{
    font-weight: 900;
    color: #ddd;
}
#header_box p{
		transition: 1s;
		filter: hue-rotate(360deg);
		animation: txt_gradient 15s infinite;
		background: linear-gradient(-45deg, rgba(17,3,175,1) 0%, rgba(172,0,165,1) 59%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(-45deg, rgba(17,3,175,1) 0%, rgba(172,0,165,1) 59%, rgba(0,0,0,1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;}
@keyframes txt_gradient {
	0%,100%{filter: hue-rotate(0deg)}
	50% {filter: hue-rotate(360deg);}
}

.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*********************************************************************/

@media screen and (max-width: 1023px) {
    #header_box p{
        font-size: 70px;
    }    
}

/*********************************************************************/

@media screen and (min-width: 1024px) {
    #main{
        margin-left: calc((100% - 1000px) / 2);
        width: 1000px;
    }
    #header_box{
        margin: 150px 0;}
    #header_box p{
        font-size: 100px;
    }
}