@import url('https://fonts.googleapis.com/css?family=Satisfy');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Cutive+Mono');

.hl-red {
    color: #f78c6a;
}

.hl-orange {
    color: #ffcb6b;
}

.hl-green {
    color: #96dc8d;
}

.hl-blue {
    color: #648494;
}

.hl-gray {
    color: #8c8c8b;
}

body {
    background-image: url("https://s3.amazonaws.com/indieobscura-www/assets/article/2017/01/06/Firewatch-Mod-Night-Final_feature.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #010028;
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgba(52, 52, 52, 0.75);
}

#header {
    text-align: center;
    margin: auto;
    padding: 50px 0px;
}

#header span {
    font-family: "Roboto";
    font-weight: 200;
    font-size: 55px;
    color: #f2f2f2;
}

.search-row {
    width: 1010px;
    height: 50px;
    margin: 10px auto 20px auto;
    padding: 0px 20px;
    background-color: #272727;
    border: solid 1px #272727;
    opacity: 0.9;
    border-radius: 10px;
}

#search-field {
    width: 1010px;
    height: 50px;
    padding: 0px 10px 0px 0px;
    background-color: #272727;
    border: solid 0px #272727;
    font-family: "Cutive Mono";
    font-size: 18px;
    color: #f2f2f2;
    float: left;
    outline: none;
}

#search-field::-moz-placeholder {
    color: #8c8c8b !important;
}

.terminal-con {
    margin: auto;
    text-align: center;
}

.terminal-row {
    width: 1010px;
    height: 40px;
    margin: auto;
    padding: 0px 20px;
    background-color: #272727;
    border: solid 1px #272727;
    opacity: 0.9;
    text-align: left;
}

.i1 {
    padding: 10px 0px 0px 20px !important;
}

.ext-top {
    padding: 20px 20px 0px 20px !important;
    border-radius: 10px 10px 0px 0px;
}

.ext-btm {
    padding: 0px 20px 20px 20px !important;
    border-radius: 0px 0px 10px 10px;
}

.terminal-label {
    height: 20px;
    padding: 10px 0px;
    font-family: "Cutive Mono";
    font-size: 18px;
    color: #f2f2f2;
    float: left;
    text-align: left;
}

.ext {
    width: 100% !important;
    height: 10px !important;
}

.terminal-innerCon {
    width: 1010px;
    height: 300px;
    margin: auto;
    padding: 0px 20px;
    background-color: #272727;
    border: solid 1px #272727;
    opacity: 0.9;
}

.favCon {
    width: 290px;
    margin: 20px 20px;
    padding: 0px;
    border: solid 1px #648494;
    float: left;
}

.favCon-header {
    padding: 5px 0px;
    background: #648494;
    font-family: "Cutive Mono";
    font-size: 18px;
    color: #f2f2f2;
}

.favCon-body {
    margin: 0px;
    padding: 5px 0px 10px 0px;
    text-align: center;
}

.favCon-body a {
    border: none;
}

.favCon-el {
    width: 95%;
    height: 30px;
    margin: 5px auto 0px auto;
    padding: 0px 20px;
    box-sizing: border-box;
}

.favCon-el:hover {
    background: #648494;
}

.favCon-el-content {
    width: 100%;
    height: 100%;
    padding: 5px 0px 0px 0px;
    font-family: "Cutive Mono";
    font-size: 18px;
    color: #f2f2f2;
    text-align: left;
    float: left;
}

#time {
    width: 100px
    height: 20px;
    padding: 10px 10px 0px 10px;
    text-align: left;
    font-family: "Cutive Mono";
    font-size: 18px;
    color: #f2f2f2;
    float: left;
}