@font-face {
    font-family: 'gravity'; /*a name to be used later*/
    src: url('fonts/Gravity-Regular.otf'); /*URL to font*/
}

body {
  background-color: #08080B;
  font-family: gravity;
}

h1 {
    font-size: 3vmin;
    color: #888888;
}
h2 {
    font-size: 2vmin;
}
h3 {
    font-size: 1.5vmin;
    color: #bbbbbb;
}

a {
    color: #bbbbcc;
}

[controls] {
width:100%;
margin-top:1.25em;
margin-bottom:1.25em;
}

.tile {
    filter: grayscale(0.3);
//    box-shadow: 0 1px 0 #000 inset;
    box-shadow: 0.5vmin 0.5vmin #08080B inset;
    overflow-x: hidden;

//    outline: 0.5rem solid #08080B;
}

.tileFocused {
    filter: grayscale(0) !important;
    box-shadow: 0.5vmin 0.5vmin #08080B inset;
}

.tile:hover {
    filter: grayscale(0) !important;
//    background-color: #212121cc;

}

.tile:active {
    filter: brightness(2) !important;
}

.close {
    color: #bbbbcc;
    background-color: #08080B;
    padding: 0.5em;
}

.pin {
    color: #bbbbcc;
    background-color: #223322;
    padding: 0.5em;

}

.unpin {
    color: #bbbbcc;
    background-color: #222233;
    padding: 0.5em;
}

.audioPlayer {
    padding: 1em;
}

.focus {
    font-size: 1.25vmin;
    text-align: left;
}

.unfocus {
    font-size: 1.5vmin;
    text-align: center;
    padding: 1.5em;
}

.unfocusHeaderClose {
    font-size: 2vmin;
    text-align: center;
    padding: 1em;
    background-color: #443333cc !important;
}

.unfocusMini {
    font-size: 1.25vmin;
    text-align: center;
    padding: 0.5em;
}

.hasBG {
    background-color: #212121cc;
}

.inputButton {
    padding: 0.5em;
    background-color: #bbbbbb;
    color: #212121;
    border: 0.5vmin #08080B;
}

input {
    font-size: 1vw;
}

.searchResultsLine {
    color: #bbbbcc;
    text-decoration: dashed underline;
}