@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 {
  width: 90%;
  max-width: calc(14em + 700px);
  margin: 2em auto 4em; }
  main #main-inner {
    display: flex;
    justify-content: center;
    align-items: flex-start; }
    main #main-inner aside#user-info {
      flex: 0 0 12em;
      margin-top: 2rem;
      padding: 1em; }
      @media screen and (max-width: 800px) {
        main #main-inner aside#user-info {
          margin-top: 4rem;
          margin-bottom: 2em; } }
      @media screen and (max-width: 480px) {
        main #main-inner aside#user-info {
          margin-top: 11.66667vw; } }
    main #main-inner #user-content {
      flex: 0 1 700px;
      margin-left: 2em; }
      @media screen and (max-width: 800px) {
        main #main-inner #user-content {
          flex: 1;
          margin-left: 0; } }
    @media screen and (max-width: 800px) {
      main #main-inner {
        flex-direction: column; } }

h1 {
  height: 5rem;
  margin: 0;
  margin-right: 0.35714em;
  font-size: 2.8em;
  text-align: right; }
  h1 span {
    color: #333; }

#user-info img {
  display: block;
  width: 150px;
  margin: calc(-75px - 1em) auto 1em; }
  @media screen and (max-width: 480px) {
    #user-info img {
      width: 31.25vw;
      margin: calc(-75 / 480 * 100vw - 1em) auto 1em; } }
#user-info span.title {
  color: #b3253b; }
#user-info #user-info-details {
  text-align: center;
  font-size: 0.8em; }
#user-info #user-info-actions {
  display: flex;
  justify-content: space-around;
  margin: 0.5em 1em;
  color: #b3253b;
  font-size: 1.5em; }
  #user-info #user-info-actions li {
    display: inline-block; }
#user-info #user-info-links ul {
  padding-left: 2em;
  color: #b3253b;
  list-style-type: circle;
  line-height: 2em; }
  #user-info #user-info-links ul a {
    color: #333; }
  @media screen and (max-width: 800px) {
    #user-info #user-info-links ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; }
      #user-info #user-info-links ul li {
        width: 80px;
        margin: 0 42px; } }
  @media screen and (max-width: 450px) {
    #user-info #user-info-links ul li {
      width: 17.77778vw;
      margin: 0 4.44444vw; } }

#user-about h3, #user-about-small-screen h3 {
  height: 2rem;
  margin: 0;
  margin-left: 0.66667em; }
#user-about .block, #user-about-small-screen .block {
  padding: 1.5em; }

#user-about-small-screen {
  display: none; }

/*
@media screen and (max-width: 800px) {
  #user-about {
    display: none;
  }
  #user-about-small-screen {
    display: block;
    flex: 1 0 12em;
    margin-left: 2em;
    margin-top: 2rem;

    @media screen and (max-width: 450px) {
      margin-left: 0;
    }
  }
}
*/
#user-content #featured-characters ul {
  display: flex;
  justify-content: space-between; }
  #user-content #featured-characters ul li {
    flex: 1;
    margin-right: 1.5em; }
    #user-content #featured-characters ul li:last-child {
      margin-right: 0; }
    #user-content #featured-characters ul li .character {
      display: flex;
      flex-wrap: wrap;
      color: #b3253b;
      line-height: 2em; }
      #user-content #featured-characters ul li .character .character-image {
        position: relative;
        flex: 0 0 100%;
        border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em; }
        #user-content #featured-characters ul li .character .character-image .character-image-inner {
          height: 0;
          padding-top: 100%; }
          #user-content #featured-characters ul li .character .character-image .character-image-inner img {
            position: absolute;
            top: 0;
            left: 0; }
      #user-content #featured-characters ul li .character .character-name {
        margin-left: 0.6em;
        margin-right: auto;
        font-family: "Courier New", Courier, monospace;
        color: #b3253b;
        font-weight: bold;
        font-size: 1.2em;
        text-transform: uppercase; }
      #user-content #featured-characters ul li .character .character-action {
        margin-right: 0.6em; }
#user-content #user-comments li {
  display: flex;
  margin-bottom: 1.5em; }
  #user-content #user-comments li .comment-user-icon {
    flex: 0 0 5em;
    height: 5em;
    margin-right: 1em;
    border-radius: 0.5em; }
  #user-content #user-comments li .comment-content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    min-height: 3.2em;
    padding: 0.5em 1em; }
    #user-content #user-comments li .comment-content .comment-header {
      color: #b3253b;
      font-weight: bold;
      display: flex;
      justify-content: space-between; }
    #user-content #user-comments li .comment-content p {
      margin-top: 0.6em;
      margin-bottom: 0;
      padding: 0.5em; }

#popular-characters, #newest-characters, #random-characters {
  margin-bottom: 4em; }
  #popular-characters .characters-view-all, #newest-characters .characters-view-all, #random-characters .characters-view-all {
    float: right;
    margin: 1em 1em 0 0;
    color: #b16c50;
    border-bottom: 1px solid #e0c5ba; }
    @media screen and (max-width: 600px) {
      #popular-characters .characters-view-all, #newest-characters .characters-view-all, #random-characters .characters-view-all {
        border-bottom: 0;
        font-size: 3vw; } }
    #popular-characters .characters-view-all i, #newest-characters .characters-view-all i, #random-characters .characters-view-all i {
      margin-left: 0.3em; }

#popular-characters .characters-list .character {
  font-size: 1em; }
  @media screen and (max-width: 1150px) {
    #popular-characters .characters-list .character {
      font-size: 0.9em; } }
  @media screen and (max-width: 950px) {
    #popular-characters .characters-list .character {
      font-size: 0.8em; } }

#newest-characters .characters-list .character, #random-characters .characters-list .character {
  font-size: 0.9em; }
  @media screen and (max-width: 1150px) {
    #newest-characters .characters-list .character, #random-characters .characters-list .character {
      font-size: 0.8em; } }
  @media screen and (max-width: 950px) {
    #newest-characters .characters-list .character, #random-characters .characters-list .character {
      font-size: 0.7em; } }

@media screen and (max-width: 600px) {
  #popular-characters, #newest-characters, #random-characters {
    width: 100%;
    margin-bottom: 12vw; }
    #popular-characters .characters-list, #newest-characters .characters-list, #random-characters .characters-list {
      background-color: #ece4d7;
      padding: 0.5em 0.2em; }
      #popular-characters .characters-list li, #newest-characters .characters-list li, #random-characters .characters-list li {
        margin-right: 0.2em;
        margin-left: 0.2em; }
        #popular-characters .characters-list li:nth-child(5), #newest-characters .characters-list li:nth-child(5), #random-characters .characters-list li:nth-child(5) {
          display: none; }
        #popular-characters .characters-list li .character, #newest-characters .characters-list li .character, #random-characters .characters-list li .character {
          font-size: 2.5vw; }
          #popular-characters .characters-list li .character .character-image, #newest-characters .characters-list li .character .character-image, #random-characters .characters-list li .character .character-image {
            order: 2;
            border-radius: 0.5em; }
          #popular-characters .characters-list li .character .character-name, #newest-characters .characters-list li .character .character-name, #random-characters .characters-list li .character .character-name {
            flex: 0 0 100%;
            margin-left: 0;
            text-align: center;
            text-transform: none;
            order: 1; }
          #popular-characters .characters-list li .character .character-action, #newest-characters .characters-list li .character .character-action, #random-characters .characters-list li .character .character-action {
            font-size: 1.2em; }
          #popular-characters .characters-list li .character .action-comment, #newest-characters .characters-list li .character .action-comment, #random-characters .characters-list li .character .action-comment {
            order: 3;
            margin-left: auto; }
          #popular-characters .characters-list li .character .action-heart, #newest-characters .characters-list li .character .action-heart, #random-characters .characters-list li .character .action-heart {
            order: 4;
            margin-right: auto; } }

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