/* Import XBOX_RG */

@font-face {
    font-family: "XBOX_RG";
    src: url("./fonts/XBOX_RG.TTF");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "XBOX_RG";
    src: url("./fonts/XBOX_RG.TTF");
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "XBOX_BD";
    src: url("./fonts/XBOX_BD.TTF");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "XBOX_T";
    src: url("./fonts/XBOX_T.TTF");
    font-weight: bold;
    font-style: italic;
}

/* ----------------------------------------------------------------------- */

/* Backwards Compatibility */

:root {
    --line-spacing: var(--message-line-spacing);
}

/* Apply styles */

::-webkit-input-placeholder, body, button, input, select, textarea {
    font-family: "XBOX_RG", sans-serif !important;
    word-spacing: var(--word-spacing, initial);
    letter-spacing: var(--letter-spacing, initial);
}

/* Adjust formatted text line-height */

[class*="messageContent-" i] {
    line-height: var(--message-line-spacing, initial) !important;
}

/* Scale up timestamps & "Edited" text */

[class*="group-spacing" i] [class*="timestamp"],
[class*="messageContent-" i] time {
    font-size: .9rem;
}

/* ----------------------------------------------------------------------- */

/* SETTINGS */

:root {
    --word-spacing: 3px;       /* Word spacing */
    --letter-spacing: 0.25px;  /* Letter Spacing */
    --message-line-spacing: 2; /* Line spacing on messages */
}

/* ----------------------------------------------------------------------- */

:root{
    --glass:            linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,.125)49%, rgba(0,0,0,.25)50%, rgba(255,255,255,.25)100%);
    --glass-btn:        linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,.125)1%, rgba(0,0,0,.25)50%, rgba(255,255,255,.25)100%);
}


body{
    background-image:   url("../img/bg4.jpg");
    background-repeat:  no-repeat;
    background-size:    cover;
    background-attachment: fixed;
    font-family:        "XBOX_RG";
    color:              white;
}

#navbar{
    background-image:   var(--glass);
    backdrop-filter:    blur(5px);
    box-shadow:         rgba(0,0,0,1) 0 0 15px;
    position:           fixed;
    width:              100%;
    top:                0;
    left:               0;
    z-index:            9000;
}

#navbtn{
    padding-top:        5px!important;
    padding-bottom:     5px!important;
    margin:             0px!important;
}

.farleft{
    margin-left:       10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.farright{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

button{
    background:         rgba(255,255,255,0);
    padding:            0 25px 0 25px;
    font-size:          16px;
    color:              white;
    text-shadow:        black 0 0 5px;
    box-shadow:         black 0 0 2px;
    background-image:   var(--glass-btn);
    border:             solid rgba(0,0,0,0) 1px;
    transition:         ease-in .25s;
}
button:hover{
    background:         rgba(200,0,0,1);
    box-shadow:         rgba(255,0,0,1) 0 0 15px;
    background-image:   var(--glass-btn);
}
button:active{
    background:         rgba(64,0,0,1);
    box-shadow:         rgba(127,0,0,1) 0 0 10px;
    text-shadow:        rgba(255,0,0,1) 0 0 5px;
    background-image:   var(--glass-btn);
    transition:         ease-in .1s;
}

#dialog_box_bg{
    background:         rgba(0,0,0,.75);
    position:           absolute;
    z-index:            9001;
    width:              100%;
    height:             100%;
    top:                0px;
    left:               0px;
    display:            none;
}

#dialog_box_btn button{
    position:           relative;
    top:                -20px;
    float:              right;
    margin:             0 auto;

}

.btnAccept:hover{
    background:         rgba(0,200,0,1);
    box-shadow:         rgba(0,255,0,1) 0 0 15px;
    background-image:   var(--glass-btn);
    color:              rgba(255,255,255,1)!important;
}
.btnAccept:active{
    background:         rgba(0,64,0,1);
    box-shadow:         rgba(0,127,0,1) 0 0 10px;
    text-shadow:        rgba(0,255,0,1) 0 0 5px;
    background-image:   var(--glass-btn);
    transition:         ease-in .1s;
    color:              rgba(255,255,255,1)!important;
}

#irc_notify{
    background:         var(--glass);
    backdrop-filter:    blur(5px);
    box-shadow:         rgba(0,0,0,1) 0 0 15px;
    border-radius:      5px;
    border:             solid rgba(0,0,0,1) 1px;
    padding:            1px 5px 5px 5px;
    position:           absolute;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
}
#irc_notify button{
    color:              rgba(0,0,0,1);
}
#irc_notify button:hover, #irc_notify button:active{
    color:              rgba(255,255,255,1)!important;
}

#mainContent{
    border-radius:      5px;
    border:             solid rgba(0,0,0,1) 1px;
    background:         rgba(255,255,255,0.25);
    background-image:   var(--glass);
    margin-top:         40px;
    box-shadow:         black 0 0 15px;
    backdrop-filter:    blur(5px);
    width:              800px;
    padding:            1px 5px 5px 5px;
}

.title{
    padding:             0px 5px 0px 5px;
    font-weight:        bold;
}

.post{
    border-radius:      3px;
    border:             solid rgba(0,0,0,.75) 1px;
    background:         rgba(255,255,255,0.75);
    color:              black;
    box-shadow:         0 0 5px rgba(0,0,0,1) inset;
    padding:            15px;
}

#featurebar{
    position:           fixed;
    left:               0px;
    bottom:             0px;
    width:              100%;
    text-align:         center;
    color:              red;
    text-shadow:        black 0 0 5px;
    background-image:   repeating-linear-gradient(45deg, yellow 25%, yellow 50%, black 50%, black 75%);
    z-index:            9000;
}