@font-face{
    font-family: "Lora";
    src: url('./Lora.ttf'),
}

* { 
  box-sizing: border-box; 
  cursor: url(./small_white_cursor.png), auto;
}


body {
  font-family: "Lora";
  background-color: #fbfbfb;
  color: #66666f;
}


input, input:hover, input:focus, p:focus {border: none !important;}


/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor:  url(./small_white_cursor.png), pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group {
  margin-bottom: 20px;
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
/*  background: cyan;*/
  border: none;
  width:80vw;
  position:absolute; left: 0; right: 0; margin:auto;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
  width:80vw;
  position:absolute; margin:auto;
}


#quicksearch {
  font-family: "Lora";
  color:#aaa; 
  background:transparent; 
  border-style: none;
  z-index:999; 
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;   
}
 

/* ---- .box ---- */

.box {
  position: relative;
  float: center;
  display: block;
  text-align: center;
  max-width: 80vw;
  max-height: 100vh;
  margin: auto;
  color: #66666f;
 -webkit-transition: opacity 0.8s ease-in-out;
  -moz-transition: opacity 0.8s ease-in-out;
       transition: opacity 0.8s ease-in-out;
}

.box > * {
  margin: 0px;
  padding: 0px;
}

.box .name {
  position: absolute;
  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.box .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.box .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.box .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.box.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.box.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.box.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.box.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.box.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.box.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.box.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.box.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.box.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.box.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }