@font-face {
  font-family: "Antonio";
  src: url(Antonio-Bold.ttf);
}
body {
  background: black;
  color: #72efff;
  font-family: Antonio, "Arial Narrow", "Avenir Next Condensed", sans-serif;
  font-size: 1.25rem;
}

h2,
h3 {
  color: #abcaff;
}

textarea,
input[type=text],
input[type=password],
input[type=email] {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  color: white;
  background: #222;
  border: 1px solid #cad1ff;
  border-radius: 4px;
}
textarea:focus, textarea:active,
input[type=text]:focus,
input[type=text]:active,
input[type=password]:focus,
input[type=password]:active,
input[type=email]:focus,
input[type=email]:active {
  color: white;
  background: #222;
  box-shadow: 0 0 4px #ffcc99;
}

.lcars-btn {
  position: relative;
  height: 3rem;
  margin: 5px;
  padding: 0;
  border-radius: 1.5rem;
}
.lcars-btn a,
.lcars-btn span {
  position: absolute;
  bottom: 0.25rem;
  right: 1.25rem;
  color: black;
}
.lcars-btn:focus, .lcars-btn:active {
  outline: thin dotted #f8fbdb;
}

.edit-btn {
  height: 2rem;
  width: 100%;
  max-width: 7rem;
  margin: 0.5rem 0.1rem;
  background: #cad1ff;
  color: black;
  border: none;
}
.edit-btn span {
  right: 1rem;
  bottom: 0.1rem;
}
.edit-btn:hover {
  background: #e7eaff;
}

.post-btn {
  float: right;
  width: 100%;
  max-width: 10rem;
  padding: 0.5rem 1.5rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: right;
  vertical-align: bottom;
  color: black;
  background: #cad1ff;
  border: 1px solid #cad1ff;
}
.post-btn:hover {
  background: #e7eaff;
}

.like-btn {
  height: 2.5rem;
  width: 100%;
  max-width: 7rem;
  margin-top: 0.3rem;
}
.like-btn span {
  position: absolute;
  right: 0.9rem;
  bottom: 0;
  pointer-events: none;
}
.like-btn.unliked {
  color: #ff9900;
  background: black;
  border: 2px solid #ff9900;
}
.like-btn.unliked span {
  color: #ff9900;
}
.like-btn.unliked:hover {
  background: #282828;
}
.like-btn.liked {
  color: black;
  background: #ff9900;
  border: 2px solid #ff9900;
}
.like-btn.liked:hover {
  background: #ffd597;
  border: 2px solid #ffd597;
}

.main-title-container {
  display: flex;
  width: 100%;
}

.main-title-before {
  flex-grow: 2;
  min-height: 3.5rem;
}

.main-title {
  padding: 0rem 1rem 0.4rem;
  margin: 0;
  font-size: 3.5rem;
  line-height: 100%;
  color: #ff9900;
  background: black;
}
.main-title:hover {
  text-decoration: none;
  color: #ff9900;
}

.main-title-after {
  width: 3rem;
  margin-right: 5px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.lcars-nav-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.lcars-nav-container ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
}
.lcars-nav-container li {
  list-style: none;
}
.lcars-nav-container .lcars-btn {
  display: inline-block;
  width: 10rem;
  color: black;
}
.lcars-nav-container .lcars-btn:hover {
  color: black;
}

.nav-user,
.nav-following,
.nav-register {
  background: #9999ff;
}
.nav-user:hover,
.nav-following:hover,
.nav-register:hover {
  background: #c5c5fc;
}

.nav-allposts {
  background: #ff9900;
}
.nav-allposts:hover {
  background: #ffd597;
}

.nav-logout {
  background: #ff9966;
}
.nav-logout:hover {
  background: #ffc3a4;
}

.nav-login {
  background: #ffcc99;
}
.nav-login:hover {
  background: #ffe4ca;
}

.vt-panel-container {
  display: flex;
  flex-direction: column;
  width: 15%;
}

.hz-panel-container {
  display: flex;
  justify-content: flex-start;
  height: 1rem;
  width: 100%;
  text-align: right;
}

.header-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 85rem;
  margin: 1.5rem auto 0;
  text-align: right;
}
.header-container .header-content {
  width: 85%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  min-width: 19rem;
  width: 100%;
  max-width: 85rem;
  margin: 0 auto;
}

.main-container {
  min-width: 19.5rem;
  width: 50%;
  padding: 2rem;
}

.helpful-suggestion {
  clear: both;
}

.conference-container {
  order: 1;
  display: flex;
  flex-grow: 2;
  margin-top: 10px;
}
.conference-container .vt-panel-container {
  min-height: 50rem;
}
.conference-container .conference-content {
  flex-grow: 2;
  width: 85%;
  max-width: 92%;
}

.respond-container {
  order: 2;
  display: flex;
  align-self: flex-start;
  min-width: 30%;
  width: 30%;
  margin-top: 10px;
}
.respond-container .vt-panel-container {
  width: 8%;
}
.respond-container .respond-content {
  flex-grow: 2;
  max-width: 92%;
}

#add-post {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2rem;
}
#add-post form {
  width: 100%;
}

.two-column-body {
  display: flex;
  width: 100%;
}
.two-column-body .conference-container .vt-panel-container {
  width: 23.5%;
}
.two-column-body .panels-conference .hz-p4,
.two-column-body .panels-conference .hz-p5 {
  display: none;
}
.two-column-body .panels-respond.hz-top .hz-p0,
.two-column-body .panels-respond.hz-top .hz-p1,
.two-column-body .panels-respond.hz-top .hz-p2,
.two-column-body .panels-respond.hz-top .hz-p3 {
  display: none;
}
.two-column-body .panels-respond.hz-btm .hz-p0,
.two-column-body .panels-respond.hz-btm .hz-p1,
.two-column-body .panels-respond.hz-btm .hz-p2,
.two-column-body .panels-respond.hz-btm .hz-p3 {
  display: none;
}

@media (max-width: 85rem) {
  /* Note about specificity
      .respond-container is only used on a two-column page, so
      its settings were all applied as plain ".respond-container".

      .conference-container is used for posts on single-column-only
      pages as well, so the two-column CSS was all applied via 
      ".two-column-body .conference-container".
  */
  .respond-container {
    order: 1;
    width: 100%;
  }
  .respond-container .respond-content {
    max-width: 85%;
  }
  .respond-container .vt-panel-container {
    width: 15%;
  }
  .respond-container textarea {
    height: 7rem;
  }

  .two-column-body {
    flex-wrap: wrap;
  }
  .two-column-body .conference-container {
    order: 2;
    width: 100%;
  }
  .two-column-body .conference-container .conference-content {
    max-width: 92%;
  }
  .two-column-body .conference-container .vt-panel-container {
    width: 15%;
  }
  .two-column-body .panels-conference .hz-p4,
.two-column-body .panels-conference .hz-p5 {
    display: inline;
  }
  .two-column-body .panels-respond.hz-top .hz-p0,
.two-column-body .panels-respond.hz-top .hz-p1,
.two-column-body .panels-respond.hz-top .hz-p2,
.two-column-body .panels-respond.hz-top .hz-p3 {
    display: inline;
  }
  .two-column-body .panels-respond.hz-top .hz-p4 {
    background: #cc6666;
  }
  .two-column-body .panels-respond.hz-btm .hz-p0,
.two-column-body .panels-respond.hz-btm .hz-p1,
.two-column-body .panels-respond.hz-btm .hz-p2,
.two-column-body .panels-respond.hz-btm .hz-p3 {
    display: inline;
  }
  .two-column-body .panels-respond.hz-btm .hz-p4 {
    background: #ff9966;
  }
}
.posts-container {
  padding: 0 2rem;
}

.one-post {
  display: flex;
  width: 100%;
  margin-top: 2rem;
}
.one-post .post-section-date-edit {
  width: 8rem;
  padding-top: 0.6rem;
}
.one-post .post-section-date-edit .date {
  font-size: 1.1rem;
  color: #cad1ff;
}
.one-post .post-section-date-edit small {
  white-space: nowrap;
}
.one-post .post-section-content {
  flex-grow: 1;
  padding: 0.5rem;
}
.one-post .post-section-content a {
  font-size: 1.7rem;
  font-weight: bold;
  color: #aba3ff;
}
.one-post .post-section-content a:hover {
  color: #dedbff;
  text-decoration: none;
}
.one-post .post-section-content a:active, .one-post .post-section-content a:focus {
  outline: thin dotted;
}
.one-post .post-section-likes {
  min-width: 7.5rem;
  text-align: right;
  color: #f8fbdb;
}

.edit-failed {
  width: 18rem;
  margin: 0 auto 1rem;
  padding: 5px 10px 10px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  color: red;
  background: none;
  border: 1px solid red;
  border-radius: 4px;
}
.edit-failed span {
  font-size: 3rem;
}

.error-message {
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
}
.error-message h2 {
  font-weight: bold;
  font-size: 3rem;
  color: red;
}
.error-message span {
  font-size: 2rem;
  color: red;
}

#pagination-nav {
  margin: 2rem 0 2rem;
}

.page-item {
  width: 18%;
  max-width: 8rem;
}
.page-item:focus, .page-item:active {
  outline: thin dotted;
  box-shadow: none;
}

.page-item.active .page-link {
  z-index: -2;
  padding: 0;
  line-height: 2rem;
  text-align: center;
  color: #9999ff;
  background: black;
  border: none;
}

.page-item.disabled .page-link {
  padding: 0.9rem 0.7rem 0 0.1rem;
  text-align: right;
  color: #777;
  background: black;
  border: 1px solid #555;
}

a.page-link {
  padding: 0.9rem 0.7rem 0 0.1rem;
  text-align: right;
  font-weight: bold;
  color: black;
  border: none;
}
a.page-link:hover {
  color: black;
}
a.page-link:focus, a.page-link:active {
  outline: thin dotted #f8fbdb;
  box-shadow: none;
}

a.page-next {
  background: #ffcc99;
}
a.page-next:hover {
  background: #ffe4ca;
}

a.page-oldest {
  border-left: 4px solid black;
  background: #ff9900;
}
a.page-oldest:hover {
  border-left: 4px solid black;
  background: #ffd597;
}

a.page-previous {
  background: #cc99cc;
}
a.page-previous:hover {
  background: #e9cfe9;
}

a.page-newest {
  border-right: 4px solid black;
  background: #9999ff;
}
a.page-newest:hover {
  border-right: 4px solid black;
  background: #c5c5fc;
}

.page-item:first-child .page-link {
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

.page-item:last-child .page-link {
  padding-right: 1rem;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

.follow-stats-container {
  margin-top: 2rem;
}
.follow-stats-container .user-follows,
.follow-stats-container .following-user {
  display: flex;
  height: 3rem;
  margin-top: 0.5rem;
}
.follow-stats-container .stats-label {
  display: flex;
  justify-content: flex-end;
  width: 12rem;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  color: black;
  text-align: right;
}
.follow-stats-container label {
  align-self: flex-end;
  margin: 0;
  padding: 0 0.2rem 0 0;
}
.follow-stats-container .stats-block {
  height: 100%;
  width: 1.5rem;
  border-left: 4px solid black;
  border-right: 4px solid black;
}
.follow-stats-container .stats-result-btn {
  display: flex;
}
.follow-stats-container .stats-result {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  width: 6rem;
  margin-top: 0.1rem;
  padding-right: 1rem;
  font-size: 3.3rem;
  line-height: 3.8rem;
}
.follow-stats-container span {
  align-self: flex-end;
  pointer-events: none;
}
.follow-stats-container .follow-btn {
  position: relative;
  height: 100%;
  width: 10rem;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}
.follow-stats-container .follow-btn span {
  position: absolute;
  bottom: 0.1rem;
  right: 1.5rem;
}
.follow-stats-container .follow-btn:active, .follow-stats-container .follow-btn:focus {
  outline: thin dotted #f8fbdb;
}
.follow-stats-container .user-follows .stats-label {
  background: #ff9900;
}
.follow-stats-container .user-follows span {
  color: #ff9900;
}
.follow-stats-container .user-follows .stats-block {
  background: black;
}
.follow-stats-container .following-user .stats-label {
  background: #9999ff;
}
.follow-stats-container .following-user span {
  color: #9999ff;
}
.follow-stats-container .following-user .stats-block {
  background: #cad1ff;
}
.follow-stats-container .following {
  background: #cad1ff;
  border: none;
}
.follow-stats-container .following span {
  color: black;
}
.follow-stats-container .following:hover {
  background: #e7eaff;
}
.follow-stats-container .notfollowing {
  background: black;
  border: 1px solid #cad1ff;
}
.follow-stats-container .notfollowing span {
  color: #cad1ff;
}
.follow-stats-container .notfollowing:hover {
  background: #282828;
}

@media (max-width: 700px) {
  .conference-container .conference-content {
    width: 85%;
    max-width: 85%;
  }

  #pagination-nav {
    font-size: 1.1rem;
  }

  textarea {
    margin-bottom: 0.5rem;
  }

  .posts-container {
    padding: 0 1rem;
  }

  .one-post {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 1rem;
    border-bottom: 1px solid #aba3ff;
  }
  .one-post a.username {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 1.3rem;
  }
  .one-post .date {
    display: block;
    position: absolute;
    top: 1.9rem;
    left: 0;
    width: 100%;
    font-size: 0.9rem;
  }
  .one-post .pcont-content {
    display: block;
    width: 100%;
    padding-top: 3.7rem;
    padding-bottom: 0.6rem;
    font-size: 1.1rem;
  }
  .one-post p.like-counter {
    display: block;
    height: 2.8rem;
    margin: 0;
    padding: 0.5rem 0;
    font-size: 1rem;
  }
  .one-post .like-btn,
.one-post .edit-btn {
    position: absolute;
    bottom: 6px;
    right: 0;
    height: 2rem;
    width: 5.5rem;
    margin-bottom: 0px;
    font-size: 0.9rem;
  }
  .one-post .post-section-date-edit,
.one-post .post-section-content,
.one-post .post-section-likes {
    width: 100%;
  }
  .one-post .post-section-date-edit {
    width: auto;
    margin-top: 0;
    padding: 0;
  }
  .one-post .post-section-content {
    padding: 0;
  }
  .one-post .post-section-likes {
    text-align: left;
  }
}
.corner-box {
  height: 2rem;
  width: 2rem;
}
.corner-box .corner {
  background: black;
  height: 100%;
  width: 100%;
}
.corner-box .internal-top-left-corner {
  border-top-left-radius: 2rem;
}
.corner-box .internal-bottom-left-corner {
  border-bottom-left-radius: 2rem;
}

@media (max-width: 385px) {
  .corner-box {
    height: 1rem;
    width: 1rem;
  }
  .corner-box .internal-top-left-corner {
    border-top-left-radius: 1rem;
  }
  .corner-box .internal-bottom-left-corner {
    border-bottom-left-radius: 1rem;
  }
}
.panel-num {
  position: absolute;
  bottom: 0;
  right: 0.2rem;
  color: black;
}

.panels-respond .extra-digits {
  display: none;
}
.panels-respond .vt-p2 .panel-num {
  top: 0;
}

@media (max-width: 85rem) {
  .panels-respond .extra-digits {
    display: inline;
  }
}
@media (max-width: 607px) {
  .extra-digits,
.panels-respond .extra-digits {
    display: none;
  }

  .header-container .header-content,
.respond-container .respond-content,
.conference-container .conference-content {
    width: 92%;
    max-width: 92%;
  }

  .two-column-body .conference-container .vt-panel-container,
.conference-container .vt-panel-container,
.respond-container .vt-panel-container,
.vt-panel-container {
    width: 8%;
  }
}
.tl-panel {
  position: relative;
  flex-grow: 3;
  border-top-left-radius: 5.5rem;
}

.vt-panel {
  position: relative;
  width: 100%;
  border-top: 4px solid black;
}

.hz-panel {
  height: 1rem;
  min-width: 1rem;
  border-right: 4px solid black;
}

.hz-p0 {
  flex-grow: 2.8;
}

.hz-p1 {
  width: 2rem;
}

.hz-p2 {
  width: 10rem;
}

.hz-p3 {
  width: 2rem;
}

.hz-p4 {
  flex-grow: 2;
}

.hz-p5 {
  width: 2rem;
}

.panels-header .internal-top-left-corner {
  border-top-left-radius: 1rem;
}
.panels-header.corner-box.hz-top {
  height: 1rem;
  width: 1rem;
}
.panels-header .vt-p0,
.panels-header .main-title-before,
.panels-header .main-title-after, .panels-header.corner-box.hz-top {
  background: #ff9900;
}
.panels-header .vt-p2,
.panels-header .hz-p0, .panels-header.corner-box {
  background: #9999ff;
}
.panels-header .vt-p0 {
  flex-grow: 2;
  width: 100%;
}
.panels-header .vt-p1 {
  height: 1rem;
  background: #cc99cc;
}
.panels-header .vt-p2 {
  flex-grow: 1;
  border-bottom-left-radius: 3rem;
}
.panels-header .hz-p1 {
  background: #ff9900;
}
.panels-header .hz-p2 {
  background: #cc99cc;
}
.panels-header .hz-p3 {
  background: #ffcc99;
}
.panels-header .hz-p4 {
  background: #cc99cc;
}
.panels-header .hz-p5 {
  background: #ffcc99;
}

.panels-conference .vt-p0,
.panels-conference .hz-p0, .panels-conference.corner-box {
  background: #cc6666;
}
.panels-conference .hz-p1,
.panels-conference .hz-p2 {
  background: #ffcc99;
}
.panels-conference .hz-p3 {
  background: #ff9966;
}
.panels-conference .hz-p4 {
  background: #9999ff;
}
.panels-conference .hz-p5 {
  background: #cc99cc;
}
.panels-conference .vt-p1 {
  flex-grow: 2;
  background: #cc6666;
}
.panels-conference .vt-p2 {
  flex-grow: 3;
  background: #ff9966;
}
.panels-conference .vt-p3 {
  height: 1rem;
  background: #9999ff;
}
.panels-conference .vt-p4 {
  flex-grow: 2;
  background: #ff9900;
}
.panels-conference .vt-p5 {
  height: 1rem;
  background: #cc6666;
}
.panels-conference .vt-p6 {
  flex-grow: 3;
  background: #9999ff;
}
.panels-conference .vt-p7 {
  flex-grow: 2;
  background: #cc99cc;
}
.panels-conference .vt-p8 {
  height: 1rem;
  background: #cc99cc;
}
.panels-conference .vt-p9 {
  flex-grow: 3;
  background: #ff9966;
}

.panels-respond {
  /*  Note: On a wide screen, Respond moves to the right column
      with Conference on the left. hz-p0 to hz-p3 are hidden and hz-p4 
      becomes a component of the "L-shaped corner".

      On a narrow screen, Respond and Conference are stacked, so both
      take up the full page width and all horizontal panes are visible.
      hz-p0 is a corner component, as usual, and hz-p4 can do its own thing.

      Plan: hz-p0 is set to the corner colour at all times, since it's hidden
      when not in use. hz-p4 is set to the corner colour here, then a media
      query below changes it to a different colour in portrait mode.
  */
}
.panels-respond .vt-p0, .panels-respond.hz-top .hz-p0, .panels-respond.hz-top .hz-p4, .panels-respond.hz-top.corner-box {
  background: #9999ff;
}
.panels-respond .vt-p2, .panels-respond.hz-btm .hz-p0, .panels-respond.hz-btm .hz-p4, .panels-respond.hz-btm.corner-box {
  background: #ffcc99;
}
.panels-respond .vt-p1 {
  flex-grow: 2;
  background: #ff9966;
}
.panels-respond .vt-p2 {
  flex-grow: 3;
  border-bottom-left-radius: 3rem;
}
.panels-respond.hz-top .hz-p1 {
  background: #cc6666;
}
.panels-respond.hz-top .hz-p2 {
  background: #ff9900;
}
.panels-respond.hz-top .hz-p3 {
  background: #cc99cc;
}
.panels-respond.hz-top .hz-p5 {
  background: #ffcc99;
}
.panels-respond.hz-btm .hz-p1 {
  background: #ff9900;
}
.panels-respond.hz-btm .hz-p2 {
  background: #cc6666;
}
.panels-respond.hz-btm .hz-p3 {
  background: #ffcc99;
}
.panels-respond.hz-btm .hz-p5 {
  background: #cc99cc;
}

.panels-profile .vt-p0,
.panels-profile .hz-p0, .panels-profile.corner-box {
  background: #ff9966;
}
.panels-profile .hz-p1 {
  background: #ffcc99;
}
.panels-profile .hz-p2 {
  background: #ff9900;
}
.panels-profile .hz-p3 {
  background: #ff9966;
}
.panels-profile .hz-p4 {
  background: #cc6666;
}
.panels-profile .hz-p5 {
  background: #cc99cc;
}
.panels-profile .vt-p1 {
  flex-grow: 2;
  background: #ff9900;
}
.panels-profile .vt-p2 {
  flex-grow: 3;
  background: #9999ff;
}
.panels-profile .vt-p3 {
  height: 1rem;
  background: #9999ff;
}
.panels-profile .vt-p4 {
  flex-grow: 2;
  background: #cc99cc;
}
.panels-profile .vt-p5 {
  height: 1rem;
  background: #cc6666;
}
.panels-profile .vt-p6 {
  flex-grow: 3;
  background: #9999ff;
}
.panels-profile .vt-p7 {
  flex-grow: 2;
  background: #cc99cc;
}
.panels-profile .vt-p8 {
  height: 1rem;
  background: #cc99cc;
}
.panels-profile .vt-p9 {
  flex-grow: 3;
  background: #ff9966;
}

.panels-following .vt-p0,
.panels-following .hz-p0, .panels-following.corner-box {
  background: #cc99cc;
}
.panels-following .hz-p1 {
  background: #ff9900;
}
.panels-following .hz-p2 {
  background: #ffcc99;
}
.panels-following .hz-p3 {
  background: #cc6666;
}
.panels-following .hz-p4 {
  background: #ff9966;
}
.panels-following .hz-p5 {
  background: #9999ff;
}
.panels-following .vt-p1 {
  flex-grow: 2;
  background: #ffcc99;
}
.panels-following .vt-p2 {
  flex-grow: 3;
  background: #ff9966;
}
.panels-following .vt-p3 {
  height: 1rem;
  background: #9999ff;
}
.panels-following .vt-p4 {
  flex-grow: 2;
  background: #ff9900;
}
.panels-following .vt-p5 {
  height: 1rem;
  background: #cc6666;
}
.panels-following .vt-p6 {
  flex-grow: 3;
  background: #9999ff;
}
.panels-following .vt-p7 {
  flex-grow: 2;
  background: #cc99cc;
}
.panels-following .vt-p8 {
  height: 1rem;
  background: #cc99cc;
}
.panels-following .vt-p9 {
  flex-grow: 3;
  background: #ff9966;
}

.panels-login .vt-p0,
.panels-login .hz-p0, .panels-login.corner-box {
  background: #ffcc99;
}
.panels-login .vt-p0 {
  flex-grow: 2;
}
.panels-login .vt-p1 {
  height: 1rem;
  background: #ff9900;
}
.panels-login .vt-p2 {
  flex-grow: 1;
  background: #ffcc99;
}
.panels-login .vt-p3 {
  flex-grow: 3;
  background: #9999ff;
}
.panels-login .hz-p1 {
  background: #9999ff;
}
.panels-login .hz-p2 {
  background: #ff9966;
}
.panels-login .hz-p3 {
  background: #9999ff;
}
.panels-login .hz-p4 {
  background: #ff9900;
}
.panels-login .hz-p5 {
  background: #ff9900;
}

.panels-register .vt-p0,
.panels-register .hz-p0, .panels-register.corner-box {
  background: #ff9900;
}
.panels-register .vt-p0 {
  flex-grow: 2;
}
.panels-register .vt-p1 {
  height: 1rem;
  background: #9999ff;
}
.panels-register .vt-p2 {
  flex-grow: 1;
  background: #ffcc99;
}
.panels-register .vt-p3 {
  flex-grow: 3;
  background: #cc99cc;
}
.panels-register .hz-p1 {
  background: #ff9900;
}
.panels-register .hz-p2 {
  background: #cc99cc;
}
.panels-register .hz-p3 {
  background: #9999ff;
}
.panels-register .hz-p4 {
  background: #ffcc99;
}
.panels-register .hz-p5 {
  background: #ff9966;
}

.panels-error .vt-p0,
.panels-error .hz-p0, .panels-error.corner-box {
  background: red;
}
.panels-error .vt-p0 {
  flex-grow: 2;
}
.panels-error .vt-p1 {
  height: 1rem;
  background: white;
}
.panels-error .vt-p2 {
  flex-grow: 1;
  background: white;
}
.panels-error .vt-p3 {
  flex-grow: 3;
  background: red;
}
.panels-error .hz-p1,
.panels-error .hz-p3,
.panels-error .hz-p4 {
  background: red;
}
.panels-error .hz-p2,
.panels-error .hz-p5 {
  background: white;
}
.panels-error hr {
  margin: 2rem 0 3rem;
  border-color: #ff9900;
}

/* Dominoes:
    * Teeny little nav buttons and a huge h1 looks silly, so shrink the entire panel
    * h1 being smaller means h2s also need to be smaller
    * h2 being smaller means:
        ** the "transmit" button on the respond form looks too big
        ** the follows/ed stat boxes on profiles look HUGE
*/
@media (max-width: 865px) {
  .lcars-nav-container {
    margin-left: 0;
    padding-left: 0;
  }
  .lcars-nav-container ul {
    padding: 0;
  }
  .lcars-nav-container .lcars-btn {
    height: 1.9rem;
    width: 3.7rem;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0.8rem;
  }
  .lcars-nav-container .lcars-btn span {
    right: 4px;
    bottom: 3px;
    font-size: 0.75rem;
  }

  h1 {
    display: block;
    margin: 0;
    font-size: 1em;
    font-weight: normal;
  }

  .main-title {
    width: 12rem;
    padding: 0rem 0.5rem 0rem;
    font-size: 1.4rem;
    line-height: 1.5rem;
  }

  .main-title-before {
    min-height: 1rem;
    height: 1.8rem;
  }

  .main-title-after {
    height: 1.8rem;
    width: 1.5rem;
  }

  .hz-panel,
.hz-panel-container {
    height: 0.7rem;
  }

  .corner-box,
.panels-header.corner-box.hz-top {
    height: 0.7rem;
    width: 0.7rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  .post-btn {
    height: 2.2rem;
    width: 7rem;
    padding: 0.5rem 0.8rem 0;
    font-size: 0.9rem;
  }

  .follow-stats-container .user-follows,
.follow-stats-container .following-user {
    height: 2.2rem;
  }
  .follow-stats-container .stats-label {
    min-width: 5.5rem;
    width: 5.5rem;
    font-size: 1rem;
  }
  .follow-stats-container .stats-result {
    width: 3.5rem;
    padding-right: 0.5rem;
    font-size: 2rem;
    line-height: 2.7rem;
  }
  .follow-stats-container .follow-btn {
    width: 6.7rem;
    font-size: 1rem;
  }
  .follow-stats-container .follow-btn span {
    right: 0.8rem;
  }
  .follow-stats-container .stats-block {
    min-width: 10px;
  }

  .main-container {
    width: 75%;
  }
}

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