/* General Reset & Basic Styles */
html {
    font-family: 'Manrope', sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body, div, h1, h2, h3, h4, p, span, a, html {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: 'Manrope', sans-serif;
    vertical-align: baseline;
}

a, a:active, a:focus {
    outline: 0;
    text-decoration: none;
}

a {
    color: #fff;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4 {
    margin-top: 0;
    margin-bottom: .5rem;
}

p {
    margin: 0 0 10px;
    margin-top: 0;
    margin-bottom: 1rem;
}

body {
    background-color: #000000;
}

/* Layout & Container */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-12, .col-md-4, .col-md-6, .col-md-8, .col-xs-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    background-color: #000000;
}

.col-xs-6 {
    float: left;
    width: 50%;
}

/* Responsive Grid */
@media (min-width: 768px) {
    .container { max-width: 720px; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-12 { flex: 0 0 100%; width: 100%; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { width: 1000px; }
}

/* Header & Navigation */
.navbar {
    background-color: #000;
    right: 0;
    left: 0;
    z-index: 1030;
    width: 100%;
    float: left;
}

.logo {
    display: none; /* Hidden by default, shown on larger screens */
}

.logomobi {
    padding-top: 10px;
    border-bottom: 2px solid #8A2BE2;
    border-radius: 10px;
}

.content {
    padding-top: 110px; /* Space for fixed navbar on mobile */
}

@media (min-width: 768px) {
    .logomobi { display: none; }
    .logo { display: block; border-bottom: 2px solid #8f1274; border-radius: 10px; margin-top: 19px; }
    .logform { padding-top: 2rem; }
    .content { padding-top: 0; }
    .navbar { position: static; }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 5px;
    font: 250 16px 'Manrope', sans-serif;
    width: 100%;
    color: #fff;
    text-shadow: 0 0 3px #000;
    letter-spacing: 1.1px;
}

.btn-daf {
    margin: 30px 0;
    background: radial-gradient(circle 214px at 46.5% 54.2%, #8f1274 0, #101b4d 96%);
    animation: blinking .5s infinite;
    transition: all .4s;
}

.tron-login, .tron-regis {
    border-radius: 15px;
    color: #fff;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 2.2px;
    padding: 10px;
    text-decoration: none;
    display: flex;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    width: 100%;
}

.tron-login {
    background-color: #8f1274;
    border: 2px solid #8f1274;
}

.tron-login:hover {
    background: #18bcd1;
    border: 2px solid #18bcd1;
    border-radius: 0;
}

.tron-regis {
    background: radial-gradient(circle 214px at 46.5% 54.2%, #8f1274 0, #27104d 96%);
    animation: blinkings .5s infinite;
    transition: all .4s;
}

.tron-regis:hover {
    background: #ffc107;
    border: 2px solid #ffc107;
}

/* Table Styles */
table.QQSUBUR {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    font-size: calc(8px + 1vh);
    margin: 0;
}

table.QQSUBUR td, table.QQSUBUR th {
    border: 2px solid #8f1274;
    padding: 5px;
}

table.QQSUBUR tbody td {
    font-weight: 500;
    color: #dfdfdf;
}

table.QQSUBUR thead th {
    font-size: calc(12px + 1vh);
    font-weight: 700;
    color: #dfdfdf;
    text-align: center;
    background: radial-gradient(circle 214px at 46.5% 54.2%, #8f1274 0, #27104d 96%);
}

/* Footer */
.copyleft {
    color: #dfdfdf;
    padding: 20px 0;
    border-top: 2px solid #8f1274;
}

.copyleft a {
    color: #dfdfdf;
}

/* Carousel */
.carousel-container {
    width: 100%;
    overflow: hidden;
}

.carousel-slide {
    display: flex;
}

.carousel-slide img {
    width: 100%;
    flex-shrink: 0;
}

/* Utility Classes */
.acenter { text-align: center; }
.clear { clear: both; }
.spacer { margin: 0 0 30px 0; display: block; }
.mtop { margin-top: .75rem; }
.mt-3 { margin-top: 1rem; }

/* Animations */
@keyframes blinking {
    0% { border: 2px solid #fff; }
    100% { border: 2px solid #ffae36; }
}

@keyframes blinkings {
    0% { border: 2px solid #fff; }
    100% { border: 2px solid orange; }
}