* { margin: 0; margin-block-start: 0; margin-block-end: 0; }
html { font-size: 10px; }
.container { margin: 0 auto; }
.container.content { max-width: 66rem; }

.p { padding: 1rem; }
.p-2 { padding: 1.8rem; }
.p-3 { padding: 3.6rem; }
.p-4 { padding: 7.2rem; }

.px { padding-left: 1rem; padding-right: 1rem; }
.px-2 { padding-left: 1.8rem; padding-right: 1.8rem; }
.px-3 { padding-left: 3.6rem; padding-right: 3.6rem; }
.px-4 { padding-left: 7.2rem; padding-right: 7.2rem; }

.py { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 1.8rem; padding-bottom: 1.8rem; }
.py-3 { padding-top: 3.6rem; padding-bottom: 3.6rem; }
.py-4 { padding-top: 7.2rem; padding-bottom: 7.2rem; }

.pb { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 1.8rem; }
.pb-3 { padding-bottom: 3.6rem; }
.pb-4 { padding-bottom: 7.2rem; }

.m { margin: 1rem; }
.m-2 { margin: 1.8rem; }
.m-3 { margin: 3.6rem; }
.m-4 { margin: 7.2rem; }

html { font-family: Arial; }

/* a, p { padding-bottom: 1.4rem; } */

h1 { font-size: 5.4rem; }
h2 { font-size: 3.6rem; }

h1.huge { font-size: 7.5vw; }

@media screen and (max-width: 520px) {
	/* h1 { font-size: 4rem; } */
	/* h2 { font-size: 2.2rem; } */
	h1.huge { font-size: 15vw; }
}

a, p { line-height: 2.2rem; font-size: 1.8rem; }

.bg-white {
	background: #fdfdfd;
}

.text-white {
	color: #fdfdfd;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
}

.flex {
	display: flex;
}

.flex.center {
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.d-flex.centerx {
	align-items: center;
	text-align: center;
}

.d-flex.centery {
	align-items: center;
}

.filly {
	height: 100vh;
}

.default .hero {
	background-color: #21D4FD;
	background: -webkit-linear-gradient(135deg, #21D4FD 0%, #B721FF 100%);
	background: linear-gradient(135deg, #21D4FD 0%, #B721FF 100%);
}
.default .url {
	background-color: #09b5db;
	background: -webkit-linear-gradient(135deg, #09b5db 0%, #B721FF 100%);
	background: linear-gradient(135deg, #09b5db 0%, #B721FF 100%);
  /* background: -webkit-linear-gradient(#eee, #333); */
  -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #B721FF;
	text-decoration: none;
}

.rainbow .hero {
	background: -webkit-linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
	background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
	background-size: 1800% 1800%;

	-webkit-animation: rainbow 18s ease infinite;
	-z-animation: rainbow 18s ease infinite;
	-o-animation: rainbow 18s ease infinite;
		animation: rainbow 18s ease infinite;
}

.rainbow .url {
	color: #ff2400;
	background-color: #ff2400;
	background: -webkit-linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
	background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 1800% 1800%;

	-webkit-animation: rainbow 18s ease infinite;
	-z-animation: rainbow 18s ease infinite;
	-o-animation: rainbow 18s ease infinite;
		animation: rainbow 18s ease infinite;
	text-decoration: none;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

.bold { font-weight: bold; }

.menu-icon {
	width: 3.2rem;
	/* height: 5rem; */
	position: absolute;
	top: 2rem; right: 2rem;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px 12px 4px 12px;
}

.menu-icon:hover {
	background-color: rgba(0,0,0,0.1);
}

.menu-icon__bar {
  width: 100%;
  height: 2px;
	margin-bottom: 8px;
}


.menu-icon.menu-icon--light .menu-icon__bar { background-color: #fafafa; }

.menu {
	position: fixed;
	width: 100vw;
	height: 100vh;
}

.hidden {
	display: none;
}

.bg-dark { background-color: #232323; }

.menu-icon.open .open { display: block; }
.menu-icon.open .closed { display: none; }

.menu-icon .closed, .menu-icon.closed .closed { display: block; }
.menu-icon .open, .menu-icon.closed .open { display: none; }