/* Use default value for mailer style since Gmail doesn't support custom CSS properies. */
:root {
  --font-size: 15px;
  --link-color: #edb020;
}

@font-face {
  font-family: ABeeZee;
  src: local("ABeeZee"), url("/assets/ABeeZee-Regular-df1b714c.ttf") format("truetype");
}

html {
  overflow-x: hidden;
  min-width: 550px;
}

body {
  background-color: #fff;
  color: #333;
  border-top: 7px solid var(--link-color, #edb020);
  font-family: ABeeZee, verdana, arial, helvetica, sans-serif;
  font-size: var(--font-size);
}

nav {
  display: inline-block;
  float: right;
}

nav li {
  text-align: right;
  border: none;
  min-width: calc(var(--font-size) * 7);
  display: inline-block;
}

#content, header {
  margin: auto;
  max-width: 650px;
}

#content img, header img {
  margin: 0px 2px 0px 2px;
  padding: 1px;
  max-width: 100%;
  border-radius: 5px;
  transition-property: box-shadow;
  transition-duration: 0.5s;
  transition-timing-function: default;

  --scale:   7px;
  --shading: 0.9;
  box-shadow: 0 var(--scale) calc(var(--scale) * 2) #d6d6d6, 0 calc(var(--scale) / 2) calc(var(--scale) * 2) #8a8a8a;
}

#content img:hover, header img:hover {
  --scale:   9px;
  --shading: 0.7;
}

header {
  padding-top: 60px;
}

header h1 {
  display: inline-block;
}

#content {
  padding: 0px 60px 30px 60px;
}

a {
  color: var(--link-color, #edb020);
  text-decoration: none;
}

a:visited {
  color: var(--link-color, #edb020);
}

a:hover {
  text-decoration: underline;
}

ul {
  padding: 0;
}

li {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0 6px 0;
}

.repo_name {
  font-size: calc(var(--font-size) * 1.2);
}

.starred_at, .stargazers {
  display: inline-block;
  text-align: right;
  float: right;
}

.stargazers > .starred_at {
  float: none;
}

.starred_at {
  font-size: calc(var(--font-size) / 1.3);
  font-style: italic;
}

.description {
  display: block;
  font-size: calc(var(--font-size) * 0.9);
  min-height: calc(var(--font-size) * 0.9);
}

#catch-phrase {
  font-size: calc(var(--font-size) * 1.15);
}

#members {
  display: block;
  min-height: 320px;
  padding: 40px 17px 0px 17px;
}

#members li {
  display: inline-block;
  width: calc(100% / 5 - 1%);
  text-align: center;
  border: 0;
}

#usage ol li {
  display: list-item;
  border: none;
  margin: 10px 0px;
}

#usage .join-us {
  margin: 30px 0px;
  display: block;
  font-size: calc(var(--font-size) * 1.5);
  text-align: center;
}

#notice {
  font-size: calc(var(--font-size) * 1.38);
  color: green;
}

#alert {
  font-size: calc(var(--font-size) * 1.38);
  color: red;
}

#feed {
  float: right;
  display: inline-block;
  text-align: right;
}

footer {
  background: #eee;
  width: 100%;
  padding: calc(var(--font-size) * 4) 0px;
  text-align: right;
  border-top: 1px solid #ddd;
}

footer span {
  display: block;
  margin-right: calc(var(--font-size) * 2.5);
  color: #888;
  font-size: calc(var(--font-size));
}