:root {
    --color-primary: #e9922a;
    --color-cyan: #00f9ff;
    --color-faded: #60796f;

    --bg-dark: #191918;
    --bg-medium: #343434;

    --border-1: #bcbcbc;

    /* Main Button */
    --button-1-bg: #0c5a3e;
    --button-1-border: #bcbcbc;
    --button-1-hover-bg: #b19535;
    --button-1-hover-border: var(--color-primary);
    /* Secondary Button */
    --button-2-bg: #19362d;
    --button-2-border: #19362d;
    --button-2-hover-bg: #22473b;
    --button-2-hover-border: #245e4b;
}

html, body {
    background-image :url('https://zyrarsps.io/img/background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: var(--bg-dark);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#7eab9a;
    font-family:'Poppins', sans-serif;
    text-shadow: 0 2px 1px rgba(0,0,0,0.65); 
}

.container {
    max-width: 1420px;
}
.container-xl {
    max-width: 1700px;
}
a {
    font-weight:700;
    color:#fff;
    transition:.2s all;
}

a:hover {
    color:var(--color-primary);
    text-decoration: none;
}

p {
    color:var(--color-primary);
}

h1 {
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
}

h2 {
    color:var(--color-primary);
    font-weight:700;
    text-transform:uppercase;
    font-size:72px;
}

h6 {
    color: #ffffff;
}

h3 {
    font-family:'Spectral SC', serif;
    font-weight:700;
    text-transform:uppercase;
    color:var(--color-primary);
    text-shadow:0 0 24px rgba(221,79,0, 0.75);
    margin-bottom:20px;
}

h4 {
    font-family:'Spectral SC', serif;
    font-weight:400;
    color: var(--color-cyan);
}

p {
    font-size:14px;
    line-height:30px;
}

#header__topbar {
    background:rgba(0,0,0,0.5);
    height:55px;
    padding:16px 10%;
}

#header__topbar p {
    color:#b2b4b7;
    font-weight:200;
    font-size:14px;
}

.players-online {
    font-weight:700;
    color:var(--color-primary);
}

nav {
    display: none;
}

nav ul {
    padding-inline-start: 0;
    display: none;
}

.nav__flex {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    max-height: 84px;
    align-items: center;
}
#nav__left, #logo, #nav__right {
    list-style:none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 30%;
    margin: 0;
    text-align: center;
}

#nav__right {
    float:right;
}

#logo {
    margin:0 auto;
    display:block;
    position:relative;
    text-align:center;
    width: 500px;
    max-width: 40%;
    opacity: 1;
    transition:.2s all;
}

#logo:hover {
    filter: brightness(120%);
}

#nav__left a, #nav__right a {
    color:#fff;
    font-weight:700;
    padding: 30px 0px;
    text-transform: uppercase;
}

#nav__left a:hover, #nav__right a:hover {
    box-shadow: 0 -3px 0 var(--color-primary) inset;
    padding-top:25px;
    padding-bottom:35px;
}

#header__content {
    margin:100px auto 70px auto;
    text-align:center;
}

#header__content #buttons {
    max-width: 600px;
    width: 100%;
    margin: 10px auto;
}


.btn__red {
    padding:10px 40px;
    color:#fff;
    font-weight:bold;
    background-color:rgba(255,0,0,0.1);
    border-radius:10px;
    border:3px solid #e70000;
    transition:.2s all;
    display:inline-block;
}

.btn__red:hover {
    background-color:rgba(255,0,0,0.3);
}


.btn__blurple {
    padding:10px 40px;
    color:#fff;
    font-weight:bold;
    background-color:rgba(99,121,213,0.1);
    border-radius:10px;
    border:3px solid #6379d5;
    transition:.2s all;
    display:inline-block;
}

.btn__blurple:hover {
    background-color:rgba(91,121,213,0.3);
}

.btn--header {
    padding:10px 50px;
    color:#fff;
    font-weight:bold;
    border-radius:10px;
    transition:.2s all;
    width: 100%;
}
.btn__cyan {
    background-color:rgba(81,216,254,0.1);
    border:3px solid var(--color-cyan);
}

.btn__cyan:hover {
    background-color:rgba(81,216,254,0.3);
}

.btn__white {
    background-color:rgba(255,255,255,0.1);
    border:3px solid #fff;
}

.btn__white:hover {
    background-color:rgba(255,255,255,0.3);
}

.btn__orange, .btn__white, .btn__blurple {
    box-shadow:0 3px 7px rgba(0,0,0,0.5);
}

.section {
    padding:55px 10%;
}

.card {
    background:var(--bg-dark);
    box-shadow:0 0 7px rgba(0,0,0,0.35) inset;
    border:1px solid rgba(221,79,0,0.3);
}

#about, #discord, .content-container, .vote-card {
    background-image:url('https://zyrarsps.io/img/section.png'), url('https://zyrarsps.io/img/section-bg.png');
    background-repeat: no-repeat, repeat;
    background-position: top left, center;
    background-color: var(--bg-medium);
    box-shadow:0 0 17px rgba(0,0,0,0.3);
}

.vote-card {
    background-position: top center, center;
}

#features {
    margin-top:50px;
}

.content-box {
    background:var(--bg-dark);
    box-shadow:0 0 7px rgba(0,0,0,0.35) inset;
    border:1px solid rgba(221,79,0,0.3);
    border-radius:5px;
    text-align:center;
    padding:20px 15px;
}

.video-details {
    text-align:right;
}


.copyright {
    font-size: 14px;
    padding: 20px 10%;
    text-transform: uppercase;
}

.main-content {
   background-color: var(--bg-dark);
   box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 0px 15px rgba(0,0,0,0.6);
}

.video-container {
  width: 100%;
  padding-top: 56.25%;
  height: 0px;
  position: relative;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

::-webkit-scrollbar-track{
    border-radius: 0px;
    background-color: var(--bg-medium);
}

::-webkit-scrollbar{
    width: 12px;
}

::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: var(--color-primary);
}

.form-control {
	background-color:var(--bg-medium);
	border-color: var(--border-1);
    color: white;
}

.form-control:focus, .form-control:active {
	outline: 0 !important;
	box-shadow: none !important;
	border-color: var(--color-primary) !important;
    background-color: var(--bg-dark);
    color: var(--color-primary);
}

.alert-danger {
    color: #999999;
	background-color: var(--bg-dark);
	border-color: var(--border-1);
}

.alert-basic {
    color: #999999;
	background-color: var(--bg-dark);
	border-color: var(--border-1);
}


.add-btn, .add-btn:hover, .add-btn:focus, .add-btn:active{
	color:white !important;
	background-color: var(--bg-medium) !important;
	border-color: var(--border-1) !important;
	outline: 0 !important;
}

.badge {
    background-color:var(--bg-medium);
    border-radius:2px;
    padding: 5px;
    margin-right: 5px;
    color: var(--color-cyan);
}

.btn-success {
    color: #ffffff;
    background-color: var(--button-1-bg);
    border-color: var(--button-1-border);
}
.btn-success:hover, .btn-success:active, .btn-success:focus {
    background-color: var(--button-1-hover-bg);
        border-color: var(--button-1-hover-border) !important;
}

.btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus {
    color: #ffffff;
    background-color: var(--button-1-hover-bg);
    border-color: var(--button-1-hover-border) !important;
}

.btn-primary {
    color: #ffffff;
    background-color: var(--button-2-bg);
    background-color: var(--button-2-border);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--button-2-hover-bg);
    background-color: var(--button-2-hover-border);
}