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: 0px;
  margin-bottom: 6px;

  text-align: center;
  color: #929292;
}

nav a {
  color: #929292;
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

nav a:hover {
  color: #c9c9c9;
}



/* Content */

#content {
  margin: 10px;
}

#content a,
#content a:visited,
#content a:active {
  color: #929292;
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  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;
}



/* Extra */

.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%);
}