style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* Colour variables */
:root{
  --bodybackground: #eeeeee;
  --cardbackground: #FFFFFF;
  --accentcolour1: #1a237e;
  --accentcolour2: #009688;
}

body{
  font-family: "Open Sans",sans-serif;
  background-color: var( --bodybackground);
}

.jumbotron{
  background-image: linear-gradient(120deg, var(--accentcolour1), var(--accentcolour2));
  color: white;
  padding: 20px;
}

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

.grid {
  border: 0px solid #333;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .searchable-item ---- */

 .searchable-item {
  position: relative;
  float: left;
  margin: 5px;
  padding: 20px;
  color: #262524;
  width: 250px;
}

.searchable-item > * {
  margin: 0;
  padding: 0;
}

input[type=text]{
  padding: 12px 20px;
  border-radius: 4px;
  width: 100%;
  border: 1px solid grey;
}

/* This is a cheeky hack to search for creating alternative search words / keywords that you don't want displayed, but still want searchable. See readme for more. */
.hiddentext{
  display:none;
}

/* Spotlight cards */

.card{
  padding: 10px;
  background-color: var(--cardbackground);
  text-align: center;
  border: 3px solid #ecf0f1;
  /*border-radius: 7px;*/
}

img {
  width: 100%;
}

/* Gauge Styles */

.standard{
    background-color: #E57373;
    color: white;
}

.3foot{
    background-color: #AED581;
    color: white;
}

.indian{
    background-color: #64B5F6;
    color: white;
}

.kyoki{
    background-color: #FFD54F;
    color: black;
}

.scotch{
    background-color: #7986CB;
    color: black;
}

.russian{
    background-color: #880E4F;
    color: white;
}

.irish{
    background-color: #81C784;
    color: #1B5E20;
}

.iberian{
    background-color: #FFB74D;
    color: #B71C1C;
}