html{
  height:100%;
  width: 100%;
}
body{
    font-size:1em;
    background:#2c3342;
    color:#fff;
    text-align:left;
    font-family: Verdana;
    height: 100%;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    margin: 0;
}
a, a:hover {
    color: #ff8034;
    text-decoration: none;
}
.bg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
	background: rgb(46,46,47);
    background: radial-gradient(circle, rgba(46,46,47,1) 0%, rgba(1,6,11,1) 100%); 
}
.sec {
	max-width: 500px;
	margin: auto;
	padding: 0px;
    text-align: center;
}
.sec.name {
	font-size:12em;
	font-family: 'Six Caps','Impact';
	line-height: 100%;
/* 	background-color: violet; */
}
.sec.list {
    color: #d9b3e6;
    letter-spacing: 3px;
    font-size: 1.1em;
	font-family: 'Bebas Neue', 'Impact';

    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.2);
    /* Black w/opacity/see-through */

}
.sec.list {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: colorRotate 30s linear 0s infinite;
	margin-top: 10px;
	letter-spacing: 5px;
}
@keyframes colorRotate {
  from {
    color: #3889c7;
  }
  25% {
    color: #af60eb;
  }
  50% {
    color: #e036a5;
  }
  75% {
    color: #36e0e0;
  }
  100% {
    color: #3889c7;
  }
}

.sec.social {
	margin-top: 0px;
    display: flex;
    justify-content:space-between;
	padding: 0px 100px;
}
.sec.social img {
    height: 50px;
}
.button1 {
filter: brightness(0) saturate(100%) invert(31%) sepia(7%) saturate(212%) hue-rotate(202deg) brightness(89%) contrast(82%);

transition: 1500ms;
transition-timing-function: ease-out;
-webkit-transition: 1500ms;
-webkit-transition-timing-function: ease-out;
}
.button1:hover {
	filter: brightness(0) saturate(100%)  invert(54%) sepia(93%) saturate(2112%) hue-rotate(160deg) brightness(104%) contrast(102%);
transition: 300ms;
transition-timing-function: ease-in;
-webkit-transition: 300ms;
-webkit-transition-timing-function: ease-in;
}
.button2 {
filter: brightness(0) saturate(100%) invert(41%) sepia(5%) saturate(68%) hue-rotate(251deg) brightness(90%) contrast(90%);
}


.item {
    margin: auto;
    text-align: center;
	padding-bottom: 40px;
	
}

@media screen and (max-width: 500px) {
	.sec {
		max-width: 90%;
		margin: auto;
		padding: 0px;
		text-align: center;
	}
	.sec.name {
	font-size:8em;
	font-family: 'Six Caps','Impact';
	line-height: 100%;
	}
	.sec.social {
		margin-top: 20px;
		display: flex;
		justify-content:space-between;
		padding: 0px 20px;
	}
}