@charset "UTF-8";


/* @font-face declarations */

@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-Medium.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-Medium.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-Medium.otf") format("opentype");
    font-weight:normal;
    font-style:normal;
}
@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-MediumItalic.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-MediumItalic.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-MediumItalic.otf") format("opentype");
    font-weight:normal;
    font-style:italic;
}
@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-Bold.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-Bold.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-Bold.otf") format("opentype");
    font-weight:bold;
    font-style:normal;
}
@font-face {
	font-family: 'HKGrotesk';
		src: url('fonts/hkgrotesk/HKGrotesk-BoldItalic.eot');
		src: local('☺'), url("fonts/hkgrotesk/HKGrotesk-BoldItalic.woff") format("woff"), url("fonts/hkgrotesk/HKGrotesk-BoldItalic.otf") format("opentype");
    font-weight:bold;
    font-style:italic;
}

@font-face {
	font-family: 'JeanLucWeb-Bold';
		src: url('fonts/jeanluc/jeanlucweb-bold.eot');
		src: local('☺'), url("fonts/jeanluc/jeanlucweb-bold.woff") format("woff"), url("fonts/jeanluc/jeanlucweb-bold.otf") format("opentype"), url("fonts/jeanluc/jeanlucweb-bold#webfontup15foyj") format("svg");
}

@font-face {
	font-family: 'JeanLucWeb-Thin';
		src: url('fonts/jeanluc/jeanlucweb-bold.eot');
		src: local('☺'), url("fonts/jeanluc/jeanlucweb-thin.woff") format("woff"), url("fonts/jeanluc/jeanlucweb-thin.otf") format("opentype"), url("fonts/jeanluc/jeanlucweb-thin#webfontdsa4toug") format("svg");
}

@font-face {
	font-family: 'spungold';
		src: url('fonts/spungold/spungold.eot');
		src: local('☺'), url("fonts/spungold/spungold.woff") format("woff"), url("fonts/spungold/spungold.otf") format("opentype");
}


/*
The Jean-Luc typeface was designed and made by Atelier Carvalho Bernau on the occasion of the 80th birthday of Jean-Luc Godard. It is available free of charge from http://www.carvalho-bernau.com/jlg/

Jean-Luc typeface Copyright (c) 2010 Atelier Carvalho Bernau
*/

* {
    box-sizing: border-box;
}

html {
	font-size: 12pt;
}

body {
	font-family: "HKGrotesk";
	padding: 0;
	margin: 0;
	background-color: #8ed1ff;
}

p {
	margin: 0;
	margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration-color: rgba(0,0,0,.15);
}

h1 {
	display: none;
}

h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
}

ul {
	margin-bottom: 1rem;
}

li {
	list-style-type: "– ";
	margin-left: 1.1rem;
	list-style-position: outside;
}

u {
	text-decoration: none;
	border-bottom: 1px solid;
}

img {
	max-width: 100%;
	margin-bottom: 1rem;
}

*:focus {
	outline: none;
}

.introduction {
	position: fixed;
	top: 5rem;
	left: 5rem;
	display: flex;
	right: 5rem;
}

.introduction > p,
.introduction > div {
	max-width: 15rem;
	min-width: 10rem;
	margin-right: 5rem;
}

.colophon {
    position: fixed;
    bottom: 5rem;
    right: 5rem;
		width: 15rem;
}

.instance {
    position: fixed;
    left: 5rem;
    bottom: 5rem;
    width: 15rem;
}

.small p {
	margin: 0;
}

.small {
	font-size: .8rem;
}

.url {
	text-align: center;
	font-size: 3rem;
	position: fixed;
	top: 50%;
	width: 100%;
	transform: translateY(-60%);
}

form {
	margin: 0;
}

input[type=input] {
	font-family: "HKGrotesk";
	font-size: 3rem;
	background: none;
	border: 0;
	border-bottom: .2rem solid rgba(0,0,0,.5);
	width: 30rem;
	text-transform: lowercase;
	margin: 0 .5rem;
}

input[type=input]::placeholder {
	color: rgba(0,0,0,.5);
	opacity: 1;
}

button[type=submit] {
	font-family: "HKGrotesk";
	font-size: 3rem;
	background: none;
	color: #000;
	border: .2rem solid;
	margin: 0;
	cursor: pointer;
	padding: 0 1rem;
	text-transform: lowercase;
}

.url .subdomain,
.url .dot {
	display: none;
}

.url.custom_instance .subdomain,
.url.custom_instance .dot {
	display: inline-block;
}

.subdomain {
	display: inline-block;
	overflow: hidden;
	vertical-align: text-top;
	position: relative;
	cursor: pointer;
}

.subdomain::after {
    content: "›";
    position: absolute;
    top: 0;
    left: .3rem;
    font-size: 3rem;
    pointer-events: none;
    transform: rotate(90deg);
		color: rgba(0,0,0,.5);
}

.subdomain select {
	min-width: 1rem;
	background: none;
	border: 0;
	font-size: 3rem;
	font-family: "HKGrotesk";
	margin-right: -2.5rem;
	cursor: pointer;
	text-overflow: ellipsis;
	color: rgba(0,0,0,1);
	border-bottom: .2rem solid rgba(0,0,0,.5);
	text-indent: 1rem;
	text-align: right;
	text-align-last:right;
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
}

input[type=checkbox] {
	height: .8rem;
	width: .8rem;
	background: none;
	border: 1px solid;
	vertical-align: baseline;
	line-height: .8rem;
  position: relative;
	margin: 0;
}

input[type="checkbox"]:checked::before {
  content: '×';
  display: block;
  color: #000;
  font-size: 13px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: .55rem;
}