body {
    background: url(https://www.starlightchat.com/slc2018/images/bg_2.jpg) no-repeat #000000;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    background-size: contain;
    width: 100%;
    color: white;
    background-repeat: no-repeat;
}

.logo img {
    margin: auto;
    display: block;
    max-width: 450px;
}

.heroImg {
    margin-top: 2.5%;
    margin-bottom: -2.5%;
    width: 100%;
    align-content: center;
}

.heroImg img {
    max-width: 100%;
    margin: auto;
    display: block;
}

.indexinfo {
    background-color: black;
    padding: 5% 2.5%;
}

.title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 34px;
    color: white;
    letter-spacing: -2px;
}

.title,
.byline {
    text-align: center;
}

.warning {
    font-size: 16px;
    font-weight: bold;
}

.indexlinks {
    text-align: center;
}

.indexlinks a {
    display: inline-block;
    text-align: center;
    background: #559db8;
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 20px;
    border: 2px solid white;
    margin: 0 20px;
}

.mainpginfo {
    background-color: #00000085;
    padding: 0 40px;
    padding-top: 3%;
    padding-bottom: 3%;
    margin-top: 2.5%;
    border-color: #000000;
}

.roomsinfo {
    padding-top: 2%;
}

.roomsinfo .box {
    border-left: 0;
}

.roomsinfo .box:first-child {
    border: 0;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    background-color: #1f5ba3 !important;
    border-bottom: 4px solid white;
}

.navbar-light .navbar-nav .nav-link {
    color: #ffffff;
}

footer {
    text-align: center;
    margin-top: 35px;
    font-size: 14px;
    margin: 50px auto 0;
    padding-bottom: 30px;
}

footer p {
    margin: 10px auto;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0, 0, 0, .9);
    background: #ffffff;
    border-radius: 4px;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    width: 100%;
    margin-top: 20px;
}

.box h4 a {
    font-size: 16px;
    color: #559db8;
}

.box>a {
    background: #559db8;
    color: black;
    padding: 4px 12px;
    border-radius: 4px;
}

.toolsbox {
    text-align: center;
    margin: 15px 0;
}

.toolsbox a {
    font-size: 20px;
    background: #eef3f6;
    padding: 8px 20px;
    border-radius: 4px;
    color: black;
}

.contact img {
    margin: auto;
    display: block;
}

.contact input,
.contact select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #559db8;
}

.contact input[type='submit'] {
    background-color: #559db8;
    border: 2px solid white;
    font-size: 18px;
    width: 50%;
    margin: 10px auto;
    display: block;
    font-weight: bold;
}

.contact input[type='reset'] {
    background-color: #011219;
    border: 2px solid white;
    color: white;
    font-size: 18px;
    width: 50%;
    margin: 10px auto;
    display: block;
    font-weight: bold;
}

.users_text {
    text-align: center;
}

.users_text p {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.user_text_2 {
    text-align: center;
    border: 1px solid #ddd;
    padding: 15px;
}

.user_text_2 h3 {
    font-size: 18px;
    color: blue;
    margin: 0;
    padding: 0;
}

.first_user {
    margin-bottom: 20px;
    margin-top: 15px;
    border: 0;
    padding: 15px;
    background: #f9f9f9;
}

.top_titlebg {
    text-align: center;
}

.top_titlebg h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    padding: 0 0 20px 0;
}

.user_text_2 p {
    margin: 0;
    padding: 0;
}

.main_titlebg {
    text-align: center;
}

.main_titlebg h2 {
    padding: 0 0 15px 0;
    font-size: 30px;
}

.titlebg p {
    font-size: 16px;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 30px;
}

.bg-dark {
    background-color: #ffffff!important;
    border-bottom: 3px solid #ff840b;
}

.pricebox {
    background: #204b5e;

    /* Old browsers */
    background: -moz-linear-gradient(top, #204b5e 0%, #306d89 100%);

    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #204b5e 0%, #306d89 100%);

    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #204b5e 0%, #306d89 100%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204b5e', endColorstr='#306d89', GradientType=0);

    /* IE6-9 */
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.pricebox .benefits {
    padding-right: 10px;
}

.pricebox .amt {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#306d89+10,204b5e+100 */
    background: #306d89;

    /* Old browsers */
    background: -moz-linear-gradient(top, #306d89 10%, #204b5e 100%);

    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #306d89 10%, #204b5e 100%);

    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #306d89 10%, #204b5e 100%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#306d89', endColorstr='#204b5e', GradientType=0);

    /* IE6-9 */
    border-bottom: 2px solid white;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    padding: 20px 0;
    margin-bottom: 20px;
}

.colorscheme ul {
    display: flex;
    padding: 0;
}

.colorscheme ul li {
    display: flex;
    list-style: none;
    flex: 1;
}

.colorscheme li.ownercolor {
    color: #ff8800;
    font-size: 20px;
}

.colorscheme li.modcolor {
    color: #FF0000;
    font-size: 20px;
}

.colorscheme li.rownercolor {
    color: #FFD700;
    font-size: 20px;
}

.colorscheme li.membercolor {
    color: #38B0DE;
    font-size: 20px;
}

.online .row>h5 {
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 10px;
    width: 30%;
    padding: 5px 0 5px;
}

.online .row>h3 {
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 10px;
    width: 95%;
    padding: 5px 0 5px;
}

ul.navbar-nav.mr-auto {
    margin: auto;
}

.chatbox_bg input {
    display: block;
}

.chatbox_bg .submitbtn a {
    background-color: #1f5ba3;
    color: white;
    padding: 10px 20px;
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 4px 14px -3px #90cee4;
}

.colorscheme li.singlecolor:before {
    content: "• ";
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.chatinfo .col-4 {
    padding: 25px;
    text-align: center;
}

.chatinfo a {
    font-size: 18px;
}

.chatinfo .users {
    font-size: 16px;
}

.numberofusers {
    font-family: Arial;
    color: #FFD700;
    font-size: 23px;
}

.rooms {
    font-size: 120%;
    text-decoration: none;
}

.sectiondiv {
    color: #FFF;
    font-size: 24px;
    font-family: Verdana, Geneva, sans-serif;
}

.subs {
    color: #a3b3e6;
    text-align: center;
    font-size: 16px;
}

.users {
    color: #FFF;
}

.usersonline {
    font-family: Arial;
    color: #FFF;
    font-size: 155%;
}

/* Sample CSS to style the two tickers in the demo */
.slcclass {
    width: 300px;
    padding: 5px;
    border: 0;
    margin-bottom: 1em;
    filter: progid:DXImageTransform.Microsoft.alpha(opacity=80);

    /* Specify fade effect in IE. Remove if desired. */
    -moz-opacity: 0.8;

    /* Specify fade effect in Firefox. Remove if desired. */
}

.slcclass a {
    text-decoration: none;
}

.rsstitle {
    /* shared class for all title elements in an RSS feed */
    font-weight: bold;
}

.rssdate {
    /* shared class for all date elements in an RSS feed */
    color: gray;
    font-size: 85%;
}

.rssdescription {
    /* shared class for all description elements in an RSS feed */
}

/* ************************ Media Queries ************************** */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

@media (max-width: 768px) {
    button.navbar-toggler {
        background-color: white;
    }

    div#navbarSupportedContent {
        background-color: white;
        padding: 15px;
    }

    div#navbarSupportedContent a {
        color: black;
    }

    .indexinfo {
        margin-top: 10%;
    }

    .colorscheme li.ownercolor {
        color: #00AE27;
        font-size: 16px;
    }

    .colorscheme li.modcolor {
        color: #FF0000;
        font-size: 16px;
    }

    .colorscheme li.rownercolor {
        color: #FFD700;
        font-size: 16px;
    }

    .colorscheme li.membercolor {
        color: #38B0DE;
        font-size: 16px;
    }
}

@media (max-width: 415px) {
    .mainpginfo {
        padding: 0 20px;
        text-align: justify;
    }

    .indexinfo {
        padding-top: 15%;
    }

    .container.logo {
        margin-top: 28%;
    }

    .indexlinks a {
        margin: 20px auto;
    }
}