/* ********** */
/* HTML STUFF */
/* ********** */

body {
    background: #07070f;
    font-family: "Share Tech Mono", monospace;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
}

h1, h2, h3, h4, h5 {
    font-family: "Press Start 2P", monospace;
}

/* *************** */
/* BOOTSTRAP STUFF */
/* *************** */


.form-control, .form-control:focus {
    background: rgb(28, 16, 16);
    border: 1px solid rgba(255, 40, 40, 0.2);
    color: rgb(255, 224, 224);
    outline: none;
    font-family: "Exo 2", sans-serif;
    border-radius: 0;
    height: 50px;
}

.form-control::placeholder {
    color: rgba(255, 224, 224, 0.4);
}

.btn-login, .btn-login:hover {
    background: rgb(255, 40, 40, 0.9);
    border: 0px;
    border-radius: 0;
    height: 50px;
}

.form-group {
    color: rgb(170, 102, 102);
    font-family: "Share Tech Mono", monospace;
    text-align: left;
}


/* ************ */
/* CUSTOM STUFF */
/* ************ */

.bg-custom {
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
    border: 1px solid rgba(255, 40, 40, 0.18);
    color: white;
}

.btn-logout {
    color: rgb(170, 102, 102);
    font-weight: bold;
}

.btn-custom {
    border: 1px solid rgba(255, 40, 40, .7);
    border-radius: 0;
    background: rgba(255, 40, 40, .1);
    color: rgb(255, 40, 40);
}

.btn-custom-md {
    height: 42px;
}

.btn-custom-lg {
    height: 48px;
}

.btn-custom:hover {
    background: rgb(255, 119, 0);
    border: 0px;
    border-radius: 0;
    height: 36px;
}

.btn-custom-secondary {
    border: 1px solid rgba(255, 40, 40, .7);
    border-radius: 0;
    height: 48px;
    color: white !important;
    background: rgba(255, 40, 40, .7);
}

.btn-custom-secondary:hover {
    color: rgba(255, 40, 40, .9);
    border: 1px solid rgba(255, 40, 40, .7);
    border-radius: 0;
    height: 48px;
}

.btn-google, .btn-google:hover {
    width: 100%;
    background: white;
    color: black !important;
    font-family: "Exo 2", sans-serif !important;
}

.form-custom {
    height: 42px;
    border: 1px solid rgba(255, 40, 40, .7);
}

.border-custom {
    border-color: rgba(255, 40, 40, 0.25) !important;
}

.initial {
    color: rgb(170, 102, 102);
    margin-top: 1px !important;
}

.initial h1 {
    font-weight: bold;
    color: rgba(255, 40, 40, .9);
    font-size: 24px;
    text-transform: uppercase;
}

.initial h4 {
    font-size: 14px;
    text-transform: uppercase;
}

.initial h5 {
    font-size: 14px;
    text-transform: uppercase;
}

.initial a {
    color: rgba(255, 40, 40, 0.7);
}

.initial-title h1 {
    color: rgba(255, 40, 40, 0.8) !important;
}

.initial-subtitle i {
    color: rgba(255, 40, 40, 0.9);
}

.initial-content {
    border: 1px solid rgba(255, 40, 40, 0.30);
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
}

.initial-content-login {
    border: 1px solid rgba(255, 40, 40, 0.30);
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
    width: 90% !important;
}

.initial-content h4 {
    color: rgb(255, 224, 224);
}

.initial-content p {
    font-size: 14px !important;
}

.player-box {
    border: 1px solid rgba(255, 40, 40, 0.45);
    background: rgb(37, 18, 18);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
}

.player-box h4 {
    color: rgb(255, 224, 224);
}

.player-1 {
    color: rgb(231, 76, 60);
    font-weight: bold;
    text-transform: uppercase;
}

.btn-player-1 {
    background: rgb(231, 76, 60);
    border: 0px;
    font-weight: bold;
    color: white;
    border-radius: 10px !important;
    height: 48px;
}

.btn-player-1:disabled {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid gray;
    font-weight: normal;
}

.player-2 {
    color: rgb(41, 128, 185);
    font-weight: bold;
    text-transform: uppercase;
}

.btn-player-2 {
    background: rgb(41, 128, 185);
    border: 0px;
    font-weight: bold;
    color: white;
    border-radius: 10px !important;
    height: 48px;
}

.btn-player-2:disabled {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid gray;
    font-weight: normal;
}

.initial-credits {
    color: rgb(255, 204, 0) !important;
}

.navbar-custom {
    color: rgb(255, 40, 40);
    height: 96px;
}

.navbar-custom img {
    height: 48px;
}

.navbar-custom a, .navbar-custom a:hover {
    color: rgb(255, 40, 40) !important;
}

.nav-credits {
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.5);
}

.nav-credits a {
    color: rgb(255, 204, 0) !important;
    font-family: "Share Tech Mono", monospace !important;
}

.nav-profile {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
}

.nav-profile i {
    color: rgba(255, 40, 40, 0.8);
}

.nav-game {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
    color: rgba(255, 204, 0, 0.9);
}

.nav-nickname {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 80px;
}

.card-custom {
    border-radius: 0 !important;
    border: 1px solid rgba(255, 40, 40, 0.18);
    background: rgb(17, 8, 8);
    box-shadow: rgba(255, 40, 40, 0.07) 0px 0px 50px;
    color: rgb(255, 224, 224);
}

.card-label {
    color: rgb(170, 102, 102) !important;
}

.card-credits {
    color: rgb(255, 204, 0) !important;
    font-family: "Share Tech Mono", monospace !important;
}

.card-price {
    font-family: "Exo 2", sans-serif;
    font-weight: bold;
}

.nav-profile {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
}

.nav-profile i {
    color: rgba(255, 40, 40, 0.8);
}

.nav-game {
    background: rgba(255, 40, 40, 0.1);
    border: 1px solid rgba(255, 40, 40, 0.2);
    color: rgba(255, 204, 0, 0.9);
}

.toast-container {
    z-index: 10;
}

.toasty {
    border-radius: 0;
    background: rgb(17, 8, 8);
    border: 1px solid red;
    color: red;
    box-shadow: rgba(255, 40, 40, 0.3) 0px 0px 24px;
}

.toasty .button {
    color: red;
}

.custom-width-block {
  width: 100%;
}

  /* Switches to 50% width at the standard Bootstrap MD breakpoint */
@media (min-width: 1080px) {
    .custom-width-block {
        width: 1000px;
    }
}

.login-title {
    border-bottom: 1px solid rgba(255, 40, 40, 0.1);
}

.login-btn {
    width: 50%;
    border-bottom: rgb(170, 102, 102) !important;
}

.login-btn a {
    width: 50%;
    text-decoration: none !important;
}

.login-btn-active {
    border-bottom: 2px solid rgba(255, 40, 40, 0.8) !important;
    font-weight: bold !important;
}