html{
	scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6,p,a,ul,li{
	font-family: PixelOperator;
	color: white;
}
hr{
	background-color: white;
	width: 75%;
}

h1{font-size: 600%}
h2{font-size: 300%}
h3{font-size: 200%}
h4{font-size: 150%}
h5{font-size: 100%}
h6{font-size: 75%}
p{font-size: 150%}
ul{font-size: 125%}
li{font-size: 125%}
a{font-size: 100%}

@keyframes rainbow{
	0%    { color: red;       }
	33%   { color: limegreen; }
	66%   { color: blue;      }
	100%  { color: red;       }
}

.rainbow{animation: rainbow 1s infinite;}
.spacer{height: 100px;}

a.snappy{
	cursor: pointer;
	display: inline-block;
}
a.snappy:hover{
	transform: translateX(10px);
}

section:target{
  animation: highlight 1.5s ease-out;
}

@keyframes highlight{
	0% { background-color: rgba(255, 255, 0, 0.4); }
	100% { background-color: transparent; }
}

button{
	width: 160px;
	height: 50px;
	border-radius: 10px;
	border: none;
	font-family: PixelOperator;
	font-size:150%;
	transition: 0.25s;
	cursor: pointer;
}

button:hover{
	background-color: darkgray;
	transition: 0.25s;
}

button:active{
	background-color: black;
	color: white;
	transition: 0s;
}