@font-face {
	font-family: Munro;
	src: url(../fonts/munro/Munro.ttf);
}

/*
=====================
COLORS
=====================
*/


/*
=====================
GENERAL
=====================
*/

* {
	margin: 0;
	padding: 0;
}

html,
body {
	overflow: hidden;
}

body {
	background-color: rgb(30, 30, 45);
	color: #979c9b;
	font-family: Munro;
	font-size: 2.2vh;
}

li {
	display: block;
	list-style: none;
	text-align: center;
	margin: 2px 5px;
}

a {
	color: #979c9b;
	text-decoration: none;
}

a:hover {
	color: white;
}

::selection {
	background: #979c9b;
	color: #474747;
}
  ::-moz-selection {
	background: #979c9b;
	color: #474747;
}

/*
=====================
STAGING
=====================
*/

footer {
	display: none;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 2vh;
	background-color: transparent;
	text-align: center;
	padding: 0.3vh 0 0.3vh 0;
}

/*
=====================
CLASSES & IDS
=====================
*/

.links {
	display: none;
	margin-top: 4vh;
	text-align: center; 
}
.links ul {
	vertical-align: top;
	display: inline-block;
	list-style: none;
	margin: 0 0.5vw 0 0.5vw;
}

#search-field {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 200px;
	max-width: 950px;
	height: 12vh;
	width: 100%;
	overflow: hidden;

	text-align: center;
	font-family: Munro;
	font-size: 0;
	color: #92d690;
	background: transparent;
	border: none;
	outline: none;

	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input {
	width: 0;
	height: 0;
	opacity: 0;
}
#hidden {
	position: fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
	height: 100%;
	z-index: -1;
}

#query {
	color: #979c9b;
	white-space: pre;
	display:inline-block;
	font-size: 2.5vh;
}
#caret {
	margin: 0 -2px 0 -2px;
	display:inline-block;
	font-size: 2.2vh;
}
#suggestion {
	color: #92d690;
	display:inline-block;
	font-size: 2.5vh;
}
#output {
	display: block;
	text-align: center;
	font-size: 2.2vh;
	white-space: pre;

	-webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.weather {
	display: table;
	margin: 0.5vh auto;
	padding-bottom: 70px;
	color: inherit; 
}
.weather * {
	font-size: 2vh;
	font-weight: 300;
}

.weather .condition {
	  color: #92d690; 
}

#cryptos {
	position: absolute;
	top: 0px;
	width: 100%;
	margin: 3vh auto;
	text-align: center;
	color: #979c9b;
	font-size: 1.8vh;
}

#cryptos li {
	display: inline-block;
	list-style: none;
	/* text-align: left; */
	margin: 1vh 0.5vw 1vh 0.5vw;
}

#cryptos p {
	position: relative;
	font-size: 2vh;
	text-align: center;
	margin: 0.2vh 0 0 0;
}

#cryptos span {
	font-size: 1.4vh;
}

.price_change {
	display: block;
	font-size: 1.6vh;
}