@font-face {
  font-family:'Roboto';
  src:url("fonts/Roboto-Light.ttf") format("truetype")
}

@font-face {
  font-family:'Roboto Medium';
  src:url("fonts/Roboto-Medium.ttf") format("truetype")
}

@font-face {
  font-family:'Rajdhani';
  src:url("fonts/Rajdhani-Medium.ttf") format("truetype")
}

@font-face {
  font-family:'Inconsolata';
  src:url("fonts/Inconsolata-Regular.ttf") format("truetype")
}

* {
  margin:0;
  padding:0;
  outline:none;
  font-family:"Roboto"
}

body {
  background-color:#333;
  font-size:15px;
  color:#999;
  overflow-x:hidden
}

a {
  color:#ccc;
  text-decoration:none;
  -webkit-transition:all ease 0.25s;
  -moz-transition:all ease 0.25s;
  -ms-transition:all ease 0.25s;
  -o-transition:all ease 0.25s;
  transition:all ease 0.25s
}

a:hover {
  color:#fff !important
}

h1,
h2,
h3 {
  font-weight:normal;
  font-family:"Rajdhani";
  color:#3a7300
}

h1 {
  font-size:28px;
  margin-bottom:20px
}

h2 {
  font-size:22px
}

h3 {
  font-size:18px
}

h1 a {
  font-size:inherit;
  font-family:inherit;
  color:inherit
}

h2 a {
  font-size:inherit;
  font-family:inherit;
  color:inherit
}

h3 a {
  font-size:inherit;
  font-family:inherit;
  color:inherit
}

#main input:not([type=submit]):not([type=button]):not([type=reset]):not([type=file]),
#main select,
#main textarea,
#join input:not([type=submit]):not([type=button]):not([type=reset]):not([type=file]),
#join select,
#join textarea,
#login-wrap input:not([type=submit]):not([type=button]):not([type=reset]):not([type=file]),
#login-wrap select,
#login-wrap textarea {
  width:100%;
  max-width:250px;
  margin:5px 0;
  padding:10px;
  background-color:#111;
  border:none;
  border-radius:2px;
  font-size:14px;
  color:#fff;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

#main input[type=radio],
#main input[type=checkbox],
#join input[type=radio],
#join input[type=checkbox],
#login-wrap input[type=radio],
#login-wrap input[type=checkbox] {
  display:none
}

#main input[type=radio]:not(.accordion-toggle):not(#login)+label,
#main input[type=checkbox]:not(.accordion-toggle):not(#login)+label,
#join input[type=radio]:not(.accordion-toggle):not(#login)+label,
#join input[type=checkbox]:not(.accordion-toggle):not(#login)+label,
#login-wrap input[type=radio]:not(.accordion-toggle):not(#login)+label,
#login-wrap input[type=checkbox]:not(.accordion-toggle):not(#login)+label {
  cursor:pointer
}

#main input[type=radio]:not(.accordion-toggle):not(#login)+label:before,
#main input[type=checkbox]:not(.accordion-toggle):not(#login)+label:before,
#join input[type=radio]:not(.accordion-toggle):not(#login)+label:before,
#join input[type=checkbox]:not(.accordion-toggle):not(#login)+label:before,
#login-wrap input[type=radio]:not(.accordion-toggle):not(#login)+label:before,
#login-wrap input[type=checkbox]:not(.accordion-toggle):not(#login)+label:before {
  margin:0 10px 0 0;
  width:14px;
  height:14px;
  display:inline-block;
  background-repeat:no-repeat;
  vertical-align:middle;
  content:'\0020'
}

#main input[type=radio]:not(.accordion-toggle)+label:before,
#join input[type=radio]:not(.accordion-toggle)+label:before,
#login-wrap input[type=radio]:not(.accordion-toggle)+label:before {
  background-color:#111;
  border-radius:50%
}

#main input[type=radio]:checked:not(.accordion-toggle)+label:before,
#join input[type=radio]:checked:not(.accordion-toggle)+label:before,
#login-wrap input[type=radio]:checked:not(.accordion-toggle)+label:before {
  background-image:url("icons/radio.png");
  background-size:6px 6px;
  background-position:4px center
}

#main input[type=checkbox]:not(.accordion-toggle)+label:before,
#join input[type=checkbox]:not(.accordion-toggle)+label:before,
#login-wrap input[type=checkbox]:not(.accordion-toggle)+label:before {
  background-color:#111;
  border-radius:3px
}

#main input[type=checkbox]:checked:not(.accordion-toggle)+label:before,
#join input[type=checkbox]:checked:not(.accordion-toggle)+label:before,
#login-wrap input[type=checkbox]:checked:not(.accordion-toggle)+label:before {
  background-image:url("icons/checkbox.png");
  background-size:14px 14px;
  background-position:2px center
}

#main input[type=submit],
#main input[type=button],
#main input[type=reset],
#join input[type=submit],
#join input[type=button],
#join input[type=reset],
#login-wrap input[type=submit],
#login-wrap input[type=button],
#login-wrap input[type=reset] {
  margin:5px 0;
  padding:8px 20px;
  background-color:#111;
  border:none;
  border-radius:2px;
  font-family:"Roboto Medium";
  font-size:15px;
  color:#aaa;
  cursor:pointer;
  -webkit-transition:all ease 0.3s;
  -moz-transition:all ease 0.3s;
  -ms-transition:all ease 0.3s;
  -o-transition:all ease 0.3s;
  transition:all ease 0.3s
}

#main input[type=submit]:hover,
#main input[type=button]:hover,
#main input[type=reset]:hover,
#join input[type=submit]:hover,
#join input[type=button]:hover,
#join input[type=reset]:hover,
#login-wrap input[type=submit]:hover,
#login-wrap input[type=button]:hover,
#login-wrap input[type=reset]:hover {
  background-color:#151515;
  color:#fff
}

#main input[type=submit].bg-red,
#main input[type=button].bg-red,
#main input[type=reset].bg-red,
#join input[type=submit].bg-red,
#join input[type=button].bg-red,
#join input[type=reset].bg-red,
#login-wrap input[type=submit].bg-red,
#login-wrap input[type=button].bg-red,
#login-wrap input[type=reset].bg-red {
  background-color:#FF6060 !important;
  color:#fff !important
}

#main input:-webkit-autofill,
#join input:-webkit-autofill,
#login-wrap input:-webkit-autofill {
  color:#aaa !important;
  -webkit-text-fill-color:#aaa !important;
  -webkit-box-shadow:0 0 0px 1000px #111111 inset
}

#main select,
#main label,
#join select,
#join label,
#login-wrap select,
#login-wrap label {
  cursor:pointer
}

#main textarea,
#join textarea,
#login-wrap textarea {
  height:100px;
  resize:none
}

#main textarea.resizable,
#join textarea.resizable,
#login-wrap textarea.resizable {
  resize:both !important
}

#main textarea.h150,
#join textarea.h150,
#login-wrap textarea.h150 {
  height:150px !important
}

#main textarea.h200,
#join textarea.h200,
#login-wrap textarea.h200 {
  height:200px !important
}

#main textarea.h250,
#join textarea.h250,
#login-wrap textarea.h250 {
  height:250px !important
}

#main textarea.h300,
#join textarea.h300,
#login-wrap textarea.h300 {
  height:300px !important
}

#main textarea.h350,
#join textarea.h350,
#login-wrap textarea.h350 {
  height:350px !important
}

#main textarea.h400,
#join textarea.h400,
#login-wrap textarea.h400 {
  height:400px !important
}

#main textarea.h450,
#join textarea.h450,
#login-wrap textarea.h450 {
  height:450px !important
}

#main textarea.h500,
#join textarea.h500,
#login-wrap textarea.h500 {
  height:500px !important
}

#main form.alt-design,
#join form.alt-design,
#login-wrap form.alt-design {
  padding:0 !important;
  background-color:transparent !important
}

#main form.alt-design input,
#main form.alt-design select,
#main form.alt-design textarea,
#join form.alt-design input,
#join form.alt-design select,
#join form.alt-design textarea,
#login-wrap form.alt-design input,
#login-wrap form.alt-design select,
#login-wrap form.alt-design textarea {
  background-color:#3a7300 !important;
  color:#fff !important
}

#main form.small input,
#main form.small select,
#main form.small textarea,
#join form.small input,
#join form.small select,
#join form.small textarea,
#login-wrap form.small input,
#login-wrap form.small select,
#login-wrap form.small textarea {
  padding:3px !important;
  font-size:13px !important
}

#main form.small input[type=submit],
#main form.small input[type=button],
#main form.small input[type=reset],
#join form.small input[type=submit],
#join form.small input[type=button],
#join form.small input[type=reset],
#login-wrap form.small input[type=submit],
#login-wrap form.small input[type=button],
#login-wrap form.small input[type=reset] {
  padding:3px 8px !important;
  font-size:13px !important
}

input.icon,
select.icon {
  padding:10px 10px 10px 40px !important;
  background-repeat:no-repeat;
  background-position:10px center;
  background-size:20px 20px
}

input.icon.user,
select.icon.user {
  background-image:url("icons/user.png")
}

input.icon.pass,
select.icon.pass {
  background-image:url("icons/key.png")
}

input.icon.email,
select.icon.email {
  background-image:url("icons/mail.png")
}

input.icon.address,
select.icon.address {
  background-image:url("icons/ip.png")
}

input.icon.country,
select.icon.country {
  background-image:url("icons/country.png")
}

input.icon.sleep,
select.icon.sleep {
  background-image:url("icons/sleep.png")
}

input.icon.file,
select.icon.file {
  background-image:url("icons/file.png")
}

input.icon.search,
select.icon.search {
  background-image:url("icons/search-wh.png")
}

input.icon.serverpass,
select.icon.serverpass {
  background-image:url("icons/password.png")
}

input.icon.user-msg,
select.icon.user-msg {
  background-image:url("icons/message-user.png")
}

input.icon.subject,
select.icon.subject {
  background-image:url("icons/message-subject.png")
}

.container {
  margin:0 auto;
  max-width:1440px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

.row:after {
  height:0;
  clear:both;
  content:'\0020';
  display:block;
  visibility:hidden;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

.th {
  padding:5px;
  background-color:#111;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  color:#fff;
  font-family:"Roboto Medium"
}

.th+.row {
  padding-top:5px
}

.col {
  float:left;
  display:inline-block;
  padding-right:20px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

.col:last-of-type {
  padding-right:0
}

.col.w5 {
  width:5%
}

.col.w10 {
  width:10%
}

.col.w15 {
  width:15%
}

.col.w20 {
  width:20%
}

.col.w25 {
  width:25%
}

.col.w30 {
  width:30%
}

.col.w33 {
  width:33.33%
}

.col.w35 {
  width:35%
}

.col.w40 {
  width:40%
}

.col.w45 {
  width:45%
}

.col.w50 {
  width:50%
}

.col.w55 {
  width:55%
}

.col.w60 {
  width:60%
}

.col.w65 {
  width:65%
}

.col.w66 {
  width:66.66%
}

.col.w70 {
  width:70%
}

.col.w75 {
  width:75%
}

.col.w80 {
  width:80%
}

.col.w85 {
  width:85%
}

.col.w90 {
  width:90%
}

.col.w95 {
  width:95%
}

.col.w100 {
  width:100%
}

.accordion {
  margin:0 0 20px 0
}

.accordion form {
  padding:5px;
  background-color:rgba(255,
  255,
  255,
  0.1);
  border-radius:3px
}

.accordion input[type=checkbox].accordion-toggle {
  display:none !important
}

.accordion input[type=checkbox].accordion-toggle+label {
  width:100%;
  padding:5px 10px;
  display:block;
  background-color:#3a7300;
  background-image:url("icons/expand.png");
  background-repeat:no-repeat;
  background-position:right 15px center;
  border-bottom:5px solid #111;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  color:#fff;
  font-family:"Roboto Medium";
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  cursor:pointer
}

.accordion input[type=checkbox].accordion-toggle+label+.accordion-box {
  display:none;
  width:100%;
  padding:5px 10px 10px 10px;
  background-color:#111;
  border-bottom-left-radius:2px;
  border-bottom-right-radius:2px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

.accordion input[type=checkbox].accordion-toggle:checked+label {
  background-image:url("icons/collapse.png")
}

.accordion input[type=checkbox].accordion-toggle:checked+label+.accordion-box {
  display:block
}

.message {
  max-width:100%;
  display:block;
  margin:0 0 1em 0;
  padding:15px 15px 15px 50px;
  background-repeat:no-repeat;
  background-size:22px 22px;
  background-position:15px 15px;
  border-radius:2px;
  color:#fff
}

.message a {
  color:inherit;
  border-bottom:1px solid #fff !important
}

.message.error {
  background-color:#FF6060;
  background-image:url("icons/error.png")
}

.message.success {
  background-color:#87D37C;
  background-image:url("icons/success.png")
}

.message.warning {
  background-color:#F89406;
  background-image:url("icons/warning.png")
}

.message.info {
  background-color:#4183D7;
  background-image:url("icons/info.png")
}

.message.help {
  background-color:#4183D7;
  background-image:url("icons/help.png")
}

.message.news {
  background-color:#4183D7;
  background-image:url("icons/bubble.png")
}

.message.locked {
  background-color:#95A5A6;
  background-image:url("icons/key.png")
}

.message.quote {
  background-color:#333;
  background-image:url("icons/quote.png");
  background-size:18px 18px !important;
  background-position:10px 10px !important;
  padding:10px 10px 10px 35px !important
}

.red {
  color:#c00
}

.orange {
  color:#f89406
}

.green {
  color:#390
}

.white {
  color:#ffffff
}

.black {
  color:#000000
}

.bg-green {
  background-color:#390
}

.bg-orange {
  background-color:#f89406
}

.bg-red {
  background-color:#c00
}

.dark-bg {
  padding:10px 15px;
  background-color:#111;
  border-radius:3px
}

.light-bg {
  padding:10px 15px;
  background-color:rgba(255,
  255,
  255,
  0.1);
  border-radius:3px
}

img.img-left {
  float:left;
  margin-right:5px
}

img.img-right {
  float:right;
  margin-right:5px
}

img.size-down {
  width:100px !important;
  height:100px !important
}

img.frame {
  border:1px solid #111
}

img.rounded {
  border-radius:5px
}

img.rounded15px {
  border-radius:15px
}

img.bg {
  padding:3px;
  background-color:#111
}

img.fade-out {
  box-shadow:0 0 10px 5px #111
}

img.fade-out-hard {
  box-shadow:0 0 15px 10px #000
}

.note {
  font-size:85%;
  color:#f89406
}

.monospace {
  font-family:"Inconsolata" !important;
  font-size:16px !important
}

.font-smaller {
  font-size:85%
}

.font-bigger {
  font-size:130%
}

.bold,
b,
strong {
  font-family:"Roboto Medium";
  font-weight:500
}

.italic,
i,
em {
  font-style:italic
}

.underline,
ins {
  text-decoration:underline
}

.cross-out,
s,
del {
  text-decoration:line-through
}

.left {
  text-align:left
}

.right {
  text-align:right
}

.center {
  text-align:center
}

.mv10 {
  margin:10px 0
}

.pv10 {
  padding:10px 0
}

.mh10 {
  margin:0 10px
}

.ph10 {
  padding:0 10px
}

.mb10 {
  margin:0 0 10px 0
}

.pb10 {
  padding:0 0 10px 0
}

.w100i {
  width:100% !important;
  max-width:100% !important;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

.h100i {
  height:100% !important;
  max-height:100% !important;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

.hr {
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid #222
}

.hr-light {
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid #333
}

.container {
  max-width:1000px !important
}

section {
  padding:50px 0
}

a.ghost-button {
  padding:10px 25px;
  border:2px solid #fff;
  border-radius:5px;
  font-family:"Rajdhani";
  color:#fff;
  font-size:22px
}

header {
  background-color:#111;
  background-image:url("images/bg5.png");
  background-position:center;
  background-attachment:fixed;
  background-repeat:repeat;
  text-align:center
}

header h1,
header h2,
header h2 span,
header p {
  color:#fff
}

header h2,
header h2 span {
  text-shadow:0 0 2px #fff
}

header h2 span {
  font-family:"Rajdhani";
  font-size:26px
}

header .bg-mask {
  padding:50px 0;
  background-color:rgba(0,
  0,
  0,
  0.5)
}

header nav {
  height:101px;
  background-image:url("images/logo2.png");
  background-repeat:no-repeat;
  background-size:296px 101px;
  background-position:center
}

header nav>ul {
  padding:0;
  list-style-type:none;
  list-style-position:outside
}

header nav>ul>li {
  display:inline-block;
  vertical-align:middle
}

header nav>ul>li#logo {
  width:320px;
  height:101px
}

header nav>ul>li>a,
header nav>ul>li>label {
  padding:10px 20px;
  color:#fff;
  font-family:"Rajdhani";
  font-size:24px;
  cursor:pointer
}

header #about {
  padding:60px 0 0 0;
  font-family:"Roboto Medium"
}

header #about p {
  line-height:150%
}

header #login-wrap {
  position:relative
}

header #login-wrap input[type=checkbox] {
  display:none
}

header #login-wrap input[type=checkbox]:checked+label+#login-panel {
  display:block
}

header #login-wrap #login-panel {
  display:none;
  position:absolute;
  top:40px;
  right:0;
  width:200px;
  padding:10px;
  background-color:#3a7300;
  border-radius:3px;
  box-sizing:border-box;
  box-shadow:0 1px 10px 1px #111
}

header #login-wrap #login-panel:before {
  content:'\0020';
  display:block;
  width:0;
  height:0;
  float:right;
  margin:-15px 20px 0 0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #3a7300
}

header #login-wrap #login-panel input {
  width:100%
}

header #login-wrap #login-panel span {
  font-size:14px
}

#features {
  background-color:#111
}

#features .row:not(:last-of-type) {
  margin:0 auto 25px auto
}

#features .col.w20 img {
  width:100%;
  height:auto
}

#features p {
  line-height:200%;
  text-align:justify
}

#join {
  background-color:#222;
  background-image:url("images/bg1.png")
}

#join input[type=text],
#join input[type=email],
#join input[type=password],
#join select {
  display:block;
  max-width:300px !important
}

#join input[type=text]+span,
#join input[type=email]+span,
#join input[type=password]+span,
#join select+span {
  margin:0;
  padding:0;
  font-size:12px;
  opacity:0;
  -webkit-transition:all ease 0.5s;
  -moz-transition:all ease 0.5s;
  -ms-transition:all ease 0.5s;
  -o-transition:all ease 0.5s;
  transition:all ease 0.5s
}

#join input[type=text]:focus+span,
#join input[type=email]:focus+span,
#join input[type=password]:focus+span,
#join select:focus+span {
  opacity:1
}

#join form {
  padding:20px;
  background-color:rgba(255,
  255,
  255,
  0.1);
  border-radius:2px
}

#screenshots {
  background-color:#111
}

#screenshots #screenshots-panel,
#screenshots #screenshots-images {
  text-align:center
}

#screenshots #screenshots-dots {
  margin:35px 0 0 0
}

#screenshots img {
  display:none;
  width:75%;
  height:auto;
  max-width:600px;
  background-color:#000;
  margin:0 auto;
  padding:5px;
  border:1px solid #3a7300;
  border-radius:3px;
  text-align:center
}

#screenshots input[type=radio] {
  display:none;
  opacity:0
}

#screenshots input[type=radio]:checked+img {
  display:block;
  opacity:1
}

#screenshots label {
  display:inline-block;
  margin:0 5px;
  width:10px;
  height:10px;
  background-color:#222;
  border:1px solid #111;
  border-radius:50%;
  cursor:pointer
}

footer {
  padding:20px 0;
  background-color:#000;
  background-image:url("images/logo6.png");
  background-repeat:no-repeat;
  background-size:91px 50px;
  color:#666
}

footer p:not(:last-of-type) {
  margin-bottom:10px !important
}

@media all and (min-width: 768px) {
  footer {
    background-position:center
  }

footer p {
    line-height:100% !important
  }


}

@media all and (max-width: 767px) {
  .container {
    width:100%
  }

header nav {
    padding:120px 0 0 0;
    box-shadow:0 0 10px 10px rgba(0,
    0,
    0,
    0.5)
  }

header nav>ul>li {
    padding:10px 0;
    width:100% !important;
    background-color:rgba(0,
    0,
    0,
    0.5)
  }

header nav>ul>li#logo {
    display:none
  }

header #login-panel {
    right:40%
  }

header #about {
    padding:250px 0 0 0
  }

#join .col.w50 {
    width:100% !important;
    padding:0 20px
  }

footer {
    background-position:top center
  }

footer p {
    line-height:100%
  }

footer .col.w50 {
    margin:0 0 25px 0;
    min-width:100%;
    display:block;
    text-align:center
  }

footer .col.w50:last-of-type {
    margin-bottom:0
  }


}

/* ===== HackerForever CSS update patch =====
   Drop-in improvements: safer sizing, visible focus states, reusable theme values,
   smoother responsive behavior, and cleaner form/button defaults.
*/
:root {
  --hf-bg: #333;
  --hf-panel: #111;
  --hf-panel-soft: #222;
  --hf-text: #999;
  --hf-text-bright: #fff;
  --hf-text-muted: #ccc;
  --hf-accent: #3a7300;
  --hf-accent-bright: #66b300;
  --hf-danger: #ff6060;
  --hf-success: #87d37c;
  --hf-warning: #f89406;
  --hf-info: #4183d7;
  --hf-radius-sm: 2px;
  --hf-radius-md: 5px;
  --hf-transition: 0.25s ease;
  --hf-font-body: "Roboto", Arial, sans-serif;
  --hf-font-heading: "Rajdhani", Arial, sans-serif;
  --hf-font-code: "Inconsolata", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--hf-bg);
  color: var(--hf-text);
  font-family: var(--hf-font-body);
  line-height: 1.45;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  transition: color var(--hf-transition), border-color var(--hf-transition), background-color var(--hf-transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-visible {
  outline: 2px solid var(--hf-accent-bright);
  outline-offset: 2px;
}

h1,
h2,
h3,
h1 a,
h2 a,
h3 a {
  font-family: var(--hf-font-heading);
}

.container {
  width: min(100% - 40px, 1000px);
  max-width: 1000px !important;
}

.row {
  display: flow-root;
}

#main input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
#main select,
#main textarea,
#join input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
#join select,
#join textarea,
#login-wrap input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
#login-wrap select,
#login-wrap textarea {
  border: 1px solid transparent;
  transition: border-color var(--hf-transition), background-color var(--hf-transition), color var(--hf-transition);
}

#main input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):focus,
#main select:focus,
#main textarea:focus,
#join input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):focus,
#join select:focus,
#join textarea:focus,
#login-wrap input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):focus,
#login-wrap select:focus,
#login-wrap textarea:focus {
  border-color: var(--hf-accent);
  background-color: #151515;
}

#main input[type="submit"],
#main input[type="button"],
#main input[type="reset"],
#join input[type="submit"],
#join input[type="button"],
#join input[type="reset"],
#login-wrap input[type="submit"],
#login-wrap input[type="button"],
#login-wrap input[type="reset"],
a.ghost-button {
  transition: background-color var(--hf-transition), color var(--hf-transition), border-color var(--hf-transition), transform var(--hf-transition);
}

#main input[type="submit"]:active,
#main input[type="button"]:active,
#main input[type="reset"]:active,
#join input[type="submit"]:active,
#join input[type="button"]:active,
#join input[type="reset"]:active,
#login-wrap input[type="submit"]:active,
#login-wrap input[type="button"]:active,
#login-wrap input[type="reset"]:active,
a.ghost-button:active {
  transform: translateY(1px);
}

.accordion input[type="checkbox"].accordion-toggle + label,
.th,
.message,
.dark-bg,
.light-bg,
#join form,
#screenshots img,
header #login-wrap #login-panel {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.monospace {
  font-family: var(--hf-font-code) !important;
}

header nav > ul > li > a:hover,
header nav > ul > li > label:hover,
a.ghost-button:hover {
  color: var(--hf-text-bright) !important;
  border-color: var(--hf-accent-bright);
}

#screenshots label:hover,
#screenshots input[type="radio"]:checked + img + label,
#screenshots label:focus-visible {
  background-color: var(--hf-accent);
  border-color: var(--hf-accent-bright);
}

@media all and (max-width: 767px) {
  .container {
    width: min(100% - 30px, 100%);
  }

  section {
    padding: 35px 0;
  }

  .col,
  .col:last-of-type {
    padding-right: 0;
  }

  header #login-wrap #login-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  header #about {
    padding-top: 210px;
  }

  #screenshots img {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}