IdreXyz/static/css/base.css

/* General */

body {
  background: url("/static/img/bg.png") no-repeat center center fixed;
  background-color: white;
  background-size: cover;
  color: #393939;
  font-family: "Lato", sans-serif;
}

#global {
  max-width: 1000px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px 10px 10px 10px;
}


/* Header */

header {
  margin: 0px;
  margin-bottom: 6px;

}

header img {
  max-width: 100%;
  border-radius: 5px;
}


/* Nav bar */

nav {
  margin: 0;
  margin-bottom: 2em;
  text-align: center;
}

nav .link {
  padding: 0.3em 1em;
  margin: 0 0.3em;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.3s;
}

nav .link:nth-child(1):hover { background-color: #ff6188; }
nav .link:nth-child(2):hover { background-color: #a9dc76; }
nav .link:nth-child(3):hover { background-color: #fc9867; }
nav .link:nth-child(4):hover { background-color: #ab9df2; }
nav .link:nth-child(5):hover { background-color: #78dce8; }


/* Content */

#content {
  margin: 10px;
}

#content a,
#content a:visited,
#content a:active {
  color: #929292;
  text-decoration: none;
  transition: .5s;
}

#content a:hover {
  color: #c9c9c9;
}

#content h1,
#content h2,
#content h3,
#content h4 {
  font-weight: bold;
}

#content img {
  max-width: 800px;
  margin: auto;
}


/* Extras */

.grayscale {
  /* Firefox 10+ (& Android) */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* IE 6-9 */
  filter: gray;
  /* Chrome 19+, Safari 6+ (& iOS), Opera 15+ */
  -webkit-filter: grayscale(100%);
}