@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
html {
  height: 100%; }

body {
  min-height: 100%;
  display: flex;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px; }
  @media screen and (max-width: 467px) {
    body {
      font-size: 3vw; } }

#edge-startpage {
  width: 40px;
  background: linear-gradient(to right, #85513c, #623c2c);
  z-index: 1; }

#page {
  flex: 1;
  display: flex;
  flex-direction: column; }

#edge-endpage {
  width: 40px;
  background: linear-gradient(to left, #85513c, #623c2c);
  z-index: 1; }

@media screen and (max-width: 900px) {
  body {
    min-height: calc(100% - 130px);
    margin: 65px 0; }

  #edge-startpage {
    position: fixed;
    top: 0;
    width: 100%;
    height: 15px;
    background: linear-gradient(to bottom, #85513c, #623c2c); }

  #edge-endpage {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 15px;
    background: linear-gradient(to top, #85513c, #623c2c); } }
@media screen and (max-width: 480px) {
  body {
    min-height: calc(100% - 130 / 480 * 100vw);
    margin: 13.54167vw 0; }

  #edge-startpage, #edge-endpage {
    height: 3.125vw; } }
main {
  flex: 1;
  background-color: #fff; }

.heading {
  font-family: "Courier New", Courier, monospace;
  color: #b3253b; }

h1 {
  font-size: 2.2em;
  margin: 1.5em 0.5em 0.5em 0.5em; }
  @media screen and (max-width: 1150px) {
    h1 {
      font-size: 1.9em; } }
  @media screen and (max-width: 950px) {
    h1 {
      font-size: 1.8em; } }
  @media screen and (max-width: 600px) {
    h1 {
      font-size: 1.7em; } }

h2 {
  font-size: 2em;
  margin: 1.5em 0.5em 0.5em 0.5em; }
  @media screen and (max-width: 1150px) {
    h2 {
      font-size: 1.8em; } }
  @media screen and (max-width: 950px) {
    h2 {
      font-size: 1.7em; } }
  @media screen and (max-width: 600px) {
    h2 {
      font-size: 1.6em; } }

h3 {
  font-size: 1.5em;
  margin: 1.5em 0.5em 0.5em 0.66667em; }
  @media screen and (max-width: 1150px) {
    h3 {
      font-size: 1.4em; } }
  @media screen and (max-width: 950px) {
    h3 {
      font-size: 1.35em; } }
  @media screen and (max-width: 600px) {
    h3 {
      font-size: 1.3em; } }

.block {
  background-color: #ece4d7;
  border-radius: 0.5em; }

a {
  text-decoration: none;
  color: inherit; }

.textlink {
  color: #333;
  border-bottom: 1px solid #b3253b; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6em;
  height: 1.6em;
  border-radius: 0.33333em;
  background-color: #b3253b;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 0.05em; }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

input, select {
  font-family: 'Open Sans', sans-serif;
  border: 0; }

img[src=""] {
  display: none; }

header {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  background-color: #ece4d7;
  font-size: 14px; }
  header #logo {
    position: relative;
    top: 0.2em;
    margin: 0 0.6em;
    font-weight: bold;
    font-size: 1.8em;
    letter-spacing: -0.04em; }
    header #logo span:nth-child(1) {
      font-size: 1em; }
    header #logo span:nth-child(2) {
      font-size: 1.2em;
      color: #333; }
  header nav.menu ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  header nav.menu li {
    display: inline;
    margin-right: 1.2em; }
    header nav.menu li:last-child {
      margin-right: 0; }
  header nav.menu li a {
    color: #b3253b; }
  header nav.menu .fa-home {
    position: relative;
    top: 0.1em;
    font-size: 2.3em; }
  header .searchbar {
    position: relative;
    flex: 1;
    margin: 0 5em;
    font-size: 0.9em; }
    @media screen and (max-width: 1130px) {
      header .searchbar {
        margin: 0 2em; } }
    header .searchbar input {
      box-sizing: border-box;
      width: 100%;
      height: 2.4em;
      border-radius: 0.5em;
      padding: 0 2.4em 0 0.8em; }
    header .searchbar .fa-search {
      position: absolute;
      top: 0.2em;
      right: 0.3em;
      color: #b3253b;
      font-size: 1.6em; }
  header .notifications ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  header .notifications li {
    position: relative;
    display: inline;
    margin-right: 1.2em; }
    header .notifications li::last-child {
      margin-right: 0; }
  header .notifications li a {
    color: #b3253b; }
    header .notifications li a i {
      position: relative; }
      header .notifications li a i .notification-amount {
        position: absolute;
        top: -0.18em;
        right: -0.45em;
        height: 0.75em;
        padding: 0.3em;
        background: #333;
        color: #fff;
        font-size: 0.4em;
        line-height: 0.75em; }
        header .notifications li a i .notification-amount.empty {
          display: none; }
  header .menu-button {
    display: inline-flex;
    align-items: center;
    margin: 0 1.6em;
    color: #b3253b;
    font-weight: bold; }
    header .menu-button .profile-image {
      display: inline-block;
      width: 2.2em;
      height: 2.2em;
      border-radius: 1.1em;
      margin-left: 0.7em;
      background: #b3253b; }
    @media screen and (max-width: 1000px) {
      header .menu-button {
        margin-left: 1em; }
        header .menu-button span {
          display: none; }
        header .menu-button .profile-image {
          margin: 0; } }
  header #btn-signin {
    margin-left: auto;
    margin-right: 0.6em; }
  header #btn-register {
    margin-right: 1.08em; }
  @media screen and (max-width: 1000px) {
    header .searchbar.small-searchbar {
      display: block;
      flex: 0;
      width: auto;
      margin: 0 1em 0 1.5em; }
      header .searchbar.small-searchbar input {
        display: none; }
      header .searchbar.small-searchbar .fa-search {
        position: static;
        font-size: 2em; } }
  @media screen and (max-width: 900px) {
    header {
      position: fixed;
      top: 15px;
      width: 100%;
      height: 50px;
      z-index: 1; }
      header #logo {
        margin-right: 0; }
      header nav.menu {
        flex: 1; }
        header nav.menu ul {
          justify-content: space-evenly; }
          header nav.menu ul li {
            margin-right: 0; }
      header .menu-button {
        margin-left: 0; }
      header .searchbar, header .notifications, header #btn-signin, header #btn-register {
        display: none; }
      header .searchbar.small-searchbar {
        margin-left: 0; } }
  @media screen and (max-width: 480px) {
    header {
      top: 3.125vw;
      height: 10.41667vw;
      font-size: 2.91667vw; }
      header #logo {
        top: 0.34em; }
      header nav.menu {
        font-size: 1.2em; }
      header .menu-button {
        margin-right: 1em; } }

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height: 60px;
  padding: 0 25px;
  background-color: #ece4d7;
  font-size: 14px; }
  @media screen and (max-width: 1000px) {
    footer {
      flex-direction: column;
      justify-content: space-evenly; } }
  @media screen and (max-width: 550px) {
    footer {
      padding: 0;
      font-size: 2.5vw;
      height: 10.90909vw; } }
  footer #footer-links #users-online {
    margin-right: 0.2em; }
  footer #footer-links ul {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  footer #footer-links li {
    display: inline;
    margin-left: 0.2em; }
  @media screen and (max-width: 900px) {
    footer {
      border-bottom: 1px solid #c7b299; } }

#sticky-footer {
  display: none; }
  @media screen and (max-width: 900px) {
    #sticky-footer {
      position: fixed;
      bottom: 15px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 100%;
      height: 50px;
      background-color: #ece4d7;
      font-size: 14px;
      z-index: 1; }
      #sticky-footer .notifications {
        width: 100%; }
        #sticky-footer .notifications ul {
          display: flex;
          justify-content: space-evenly;
          list-style-type: none;
          margin: 0;
          padding: 0; }
        #sticky-footer .notifications li {
          position: relative;
          display: inline; }
          #sticky-footer .notifications li::last-child {
            margin-right: 0; }
        #sticky-footer .notifications li a {
          color: #b3253b; }
          #sticky-footer .notifications li a i {
            position: relative; }
            #sticky-footer .notifications li a i .notification-amount {
              position: absolute;
              top: -0.18em;
              right: -0.45em;
              height: 0.75em;
              padding: 0.3em;
              background: #333;
              color: #fff;
              font-size: 0.4em;
              line-height: 0.75em; }
              #sticky-footer .notifications li a i .notification-amount.empty {
                display: none; } }
  @media screen and (max-width: 480px) {
    #sticky-footer {
      bottom: 3.125vw;
      height: 10.41667vw;
      font-size: 2.91667vw; }
      #sticky-footer .notifications {
        font-size: 1.2em; } }

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  max-width: 960px;
  margin: 2em auto 4em; }
  @media screen and (max-width: 900px) {
    main {
      width: 95%; } }
  @media screen and (max-width: 680px) {
    main {
      width: 100%;
      margin: 0 auto 2em; } }

@media screen and (max-width: 680px) {
  section {
    width: 95%;
    margin: 1em auto 1em; } }

#welcome {
  flex-basis: 55%; }
  @media screen and (max-width: 680px) {
    #welcome {
      flex-basis: 90%; } }
  #welcome #join-us {
    width: 7em;
    margin: 1.5em 0 1em; }
    #welcome #join-us i {
      margin-left: 0.7em;
      font-size: 0.8em; }
  #welcome ul {
    padding-left: 2em; }
    #welcome ul li::before {
      content: "\002022";
      color: #b3253b;
      font-size: 2em;
      line-height: 0.5em;
      vertical-align: sub;
      position: relative;
      top: 0.1em;
      margin-right: 0.3em; }

#character-search {
  flex-basis: 40%;
  margin-top: 0.6em; }
  @media screen and (max-width: 1150px) {
    #character-search {
      margin-top: 0.4em; } }
  @media screen and (max-width: 950px) {
    #character-search {
      margin-top: 0.2em; } }
  @media screen and (max-width: 680px) {
    #character-search {
      flex-basis: 90%; } }
  #character-search h2 {
    text-align: right; }
    @media screen and (max-width: 680px) {
      #character-search h2 {
        text-align: center; } }
  #character-search .block {
    padding: 1em 1em 1.5em; }
    #character-search .block input {
      box-sizing: border-box;
      width: 100%;
      height: 2.2em;
      padding: 0 1em;
      border-radius: 0.33333em;
      font-size: 1.5em;
      color: #b16c50; }
      #character-search .block input::placeholder {
        color: #b16c50; }
    #character-search .block #explore-cafe {
      box-sizing: border-box;
      width: 100%;
      height: 2.2em;
      margin: 0.7em 0 1em;
      padding: 0 1em;
      border-radius: 0.33333em;
      font-size: 1.5em; }
      #character-search .block #explore-cafe i {
        margin-right: 0.5em;
        margin-bottom: 0.2em; }
    @media screen and (max-width: 1050px) {
      #character-search .block input, #character-search .block #explore-cafe {
        font-size: 1.3em; } }
    @media screen and (max-width: 950px) {
      #character-search .block input, #character-search .block #explore-cafe {
        font-size: 1.2em; } }
    @media screen and (max-width: 800px) {
      #character-search .block input, #character-search .block #explore-cafe {
        font-size: 1em; } }
    #character-search .block #advanced-search {
      margin-left: 0.5em; }

#gallery {
  flex-basis: 100%; }
  #gallery .gallery-list {
    display: flex;
    justify-content: space-between; }
    #gallery .gallery-list li {
      flex: 1;
      margin-right: 2.5em; }
      @media screen and (max-width: 850px) {
        #gallery .gallery-list li {
          margin-right: 1.5em; } }
      #gallery .gallery-list li:last-child {
        margin-right: 0; }
      #gallery .gallery-list li .character {
        display: flex;
        flex-wrap: wrap;
        color: #b3253b;
        line-height: 2em; }
        @media screen and (max-width: 1150px) {
          #gallery .gallery-list li .character {
            font-size: 0.9em; } }
        @media screen and (max-width: 950px) {
          #gallery .gallery-list li .character {
            font-size: 0.8em; } }
        #gallery .gallery-list li .character .character-name {
          flex: 0 0 100%;
          font-family: "Courier New", Courier, monospace;
          color: #b3253b;
          font-weight: bold;
          font-size: 1.2em;
          text-align: center;
          text-transform: uppercase; }
        #gallery .gallery-list li .character .character-image {
          position: relative;
          flex: 0 0 100%; }
          #gallery .gallery-list li .character .character-image .character-image-inner {
            height: 0;
            padding-top: 100%; }
            #gallery .gallery-list li .character .character-image .character-image-inner img {
              position: absolute;
              top: 0;
              left: 0; }
        #gallery .gallery-list li .character .character-author {
          margin-left: 0.6em;
          margin-right: auto;
          color: #333; }
          #gallery .gallery-list li .character .character-author i {
            margin-right: 0.3em;
            color: #b3253b; }
        #gallery .gallery-list li .character .character-action {
          margin-right: 0.6em; }
    @media screen and (max-width: 680px) {
      #gallery .gallery-list {
        background-color: #ece4d7;
        padding: 0.5em 0.2em; }
        #gallery .gallery-list li {
          margin-right: 0.2em;
          margin-left: 0.2em; }
          #gallery .gallery-list li:nth-child(5) {
            display: none; }
          #gallery .gallery-list li .character {
            font-size: 2.5vw; }
            #gallery .gallery-list li .character .character-name {
              text-transform: none; }
            #gallery .gallery-list li .character .character-image {
              border-radius: 0.5em; }
            #gallery .gallery-list li .character .character-author {
              flex: 0 0 100%;
              order: 5;
              margin: 0;
              text-align: center; }
            #gallery .gallery-list li .character .action-comment {
              order: 2;
              margin-left: auto; }
            #gallery .gallery-list li .character .action-heart {
              order: 3;
              margin-right: auto; } }

#cc-by-numbers {
  flex-basis: 100%; }
  #cc-by-numbers h2 span {
    color: #333; }
  @media screen and (max-width: 680px) {
    #cc-by-numbers h2 {
      text-align: center; } }
  #cc-by-numbers .cc-number-list {
    display: flex;
    justify-content: space-between; }
    #cc-by-numbers .cc-number-list li {
      flex: 1;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 7em;
      margin-right: 1em; }
      @media screen and (max-width: 1150px) {
        #cc-by-numbers .cc-number-list li {
          font-size: 0.9em; } }
      @media screen and (max-width: 950px) {
        #cc-by-numbers .cc-number-list li {
          font-size: 0.8em; } }
      @media screen and (max-width: 800px) {
        #cc-by-numbers .cc-number-list li {
          font-size: 0.7em; } }
      #cc-by-numbers .cc-number-list li:last-child {
        margin-right: 0; }
      #cc-by-numbers .cc-number-list li .cc-number {
        font-family: "Courier New", Courier, monospace;
        color: #b3253b;
        font-size: 2em;
        font-weight: bold; }
    @media screen and (max-width: 680px) {
      #cc-by-numbers .cc-number-list {
        flex-wrap: wrap;
        justify-content: space-evenly; }
        #cc-by-numbers .cc-number-list li {
          flex: 0 0 28%;
          margin-right: 0;
          margin-bottom: 2em; } }

/*# sourceMappingURL=landing.css.map */