@font-face{
    font-family:Whitney;
    font-weight:300;
    src:url(https://discordapp.com/assets/6c6374bad0b0b6d204d8d6dc4a18d820.woff) format("woff")
}
@font-face{
    font-family:Whitney;
    font-weight:400;
    src:url(https://discordapp.com/assets/e8acd7d9bf6207f99350ca9f9e23b168.woff) format("woff")
}
@font-face{
    font-family:Whitney;
    font-weight:500;
    src:url(https://discordapp.com/assets/3bdef1251a424500c1b3a78dea9b7e57.woff) format("woff")
}
@font-face{
    font-family:Whitney;
    font-weight:600;
    src:url(https://discordapp.com/assets/be0060dafb7a0e31d2a1ca17c0708636.woff) format("woff")
}
@font-face{
    font-family:Whitney;
    font-weight:700;
    src:url(https://discordapp.com/assets/8e12fb4f14d9c4592eb8ec9f22337b04.woff) format("woff")
}
.noselect{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
#discordInviteBox{
    background-color:transparent;
    display:block;
    width:100%
}
#discordInvite{
    text-align:left;
    box-sizing:border-box;
    width:100%!important;
    color:#dcddde;
    background:
      linear-gradient(90deg,rgba(244,210,161,.08),transparent 18%,transparent 82%,rgba(244,210,161,.08)),
      linear-gradient(180deg,rgba(47,49,54,.88),rgba(24,25,29,.94)),
      radial-gradient(ellipse 45% 65% at 88% 45%,rgba(244,210,161,.07),transparent 58%),
      url(../about-s21/char_dragon.png);
    background-size:cover,cover,cover,cover;
    background-position:center,center,center,right center;
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
    border:1px solid rgba(244,210,161,.42);
    box-shadow:
      0 14px 28px rgba(0,0,0,.5),
      0 0 0 1px rgba(255,255,255,.05) inset,
      inset 0 0 22px rgba(0,0,0,.48),
      0 0 14px rgba(244,210,161,.07);
    font-family:Ellipsis,JapanHeavy,TLHeader,Times,"Times New Roman",serif;
    margin:0;
    padding:clamp(15px,1.45vw,20px) clamp(16px,1.6vw,24px);
    display:block;
    position:relative;
    overflow:hidden;
    clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
    transition:box-shadow .22s ease,filter .22s ease,transform .22s ease
}
#discordInvite:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 34px rgba(0,0,0,.56),0 0 0 1px rgba(244,210,161,.16) inset,0 0 18px rgba(166,107,66,.16)
}
#discordInvite:before{
    content:"";
    position:absolute;
    inset:6px;
    border:1px solid rgba(244,210,161,.30);
    box-shadow:inset 0 0 18px rgba(166,107,66,.08);
    clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
    pointer-events:none
}
#discordInvite:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:10px;
    background:
      linear-gradient(90deg,transparent,rgba(244,210,161,.55),transparent),
      radial-gradient(circle at 50% 50%,rgba(244,210,161,.85) 0 2px,transparent 3px);
    opacity:.72;
    pointer-events:none
}
.discordInvite-grid{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.28fr) minmax(196px,.72fr);
    align-items:stretch;
    gap:clamp(12px,1.25vw,18px)
}
.discordInvite-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
    gap:7px;
    padding-right:clamp(8px,1vw,14px)
}
.discordInvite-side{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:10px;
    border-left:1px solid rgba(244,210,161,.20);
    border-top:none;
    padding-left:clamp(12px,1.2vw,17px);
    padding-top:0
}
#onlineInd{
    height:8px;
    width:8px;
    border-radius:50%;
    margin:0;
    display:inline-block;
    background:#43b581;
    box-shadow:0 0 8px rgba(67,181,129,.8)
}
#introText{
    color:#b9bbbe;
    display:block;
    letter-spacing:.14em;
    text-transform:uppercase;
    text-shadow:none;
    font-family:Ellipsis,JapanHeavy,TLHeader,Times,"Times New Roman",serif;
    font-weight:400;
    font-size:clamp(10px,.78vw,12px);
    line-height:1.3;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis
}
#serverImg{
    width:38px;
    height:38px;
    flex:0 0 auto;
    border-radius:50%;
    background:rgb(54,57,63) 50%/cover no-repeat;
    border:1px solid rgba(244,210,161,.36);
    box-shadow:0 0 10px rgba(0,0,0,.24)
}
#discordInviteError{
    background-color:#c82030;
    color:#fff
}
#discordInfo{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:9px 11px;
    border:1px solid rgba(244,210,161,.20);
    border-radius:2px;
    background:
      linear-gradient(135deg,rgba(244,210,161,.06),transparent 55%),
      linear-gradient(180deg,rgba(36,37,42,.72),rgba(24,25,29,.84))
}
.discordInvite-serverMeta{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    text-align:left
}
#serverNameBox{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    flex-wrap:wrap;
    color:#f6f6f7;
    cursor:pointer;
    text-shadow:0 1px 4px rgba(0,0,0,.45);
    font-family:Ellipsis,JapanHeavy,TLHeader,Times,"Times New Roman",serif;
    font-weight:400;
    font-size:clamp(12px,.9vw,15px);
    line-height:1.2;
    margin:0
}
#serverNameBox:hover{
    text-decoration:underline;
}
.discordInvite-online{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#9fe6b8;
    font-family:Ellipsis,JapanHeavy,TLHeader,Times,"Times New Roman",serif;
    font-weight:400;
    font-size:10px;
    line-height:12px;
    letter-spacing:.14em
}
#statusIndicators{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    color:#9da1aa;
    font-family:"Rajdhani",sans-serif;
    font-weight:600;
    font-size:clamp(10px,.76vw,11px);
    line-height:1.35;
    letter-spacing:.04em
}
#numOnline{
    color:#dcddde;
    display:inline
}
.discordInvite-statDivider{
    color:rgba(244,210,161,.52)
}
#numTotal{
    color:#9da1aa;
    display:inline
}
.discordInvite-title{
    color:#f6f6f7;
    font-family:Ellipsis,JapanHeavy,TLHeader,Times,"Times New Roman",serif;
    font-weight:400;
    font-size:clamp(18px,1.35vw,24px);
    line-height:1.12;
    letter-spacing:.02em;
    margin:0;
    text-shadow:0 1px 5px rgba(0,0,0,.62)
}
.discordInvite-title strong{
    color:#f4d2a1;
    font-weight:400;
    -webkit-text-stroke:.35px rgba(232,184,64,.62)
}
.discordInvite-copy{
    color:rgba(220,221,222,.88);
    font-family:"Rajdhani",sans-serif;
    font-weight:500;
    font-size:clamp(13px,.95vw,15px);
    line-height:1.45;
    margin:0;
    max-width:none
}
#callToAction{
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    width:100%;
    min-height:clamp(34px,2.8vw,38px);
    padding:0 clamp(14px,1.25vw,18px);
    border:1px solid rgba(244,210,161,.68);
    justify-content:center;
    background:
      linear-gradient(180deg,rgba(244,210,161,.16),transparent 46%),
      linear-gradient(135deg,#2a180e 0%,#5f361b 48%,#a66b42 100%);
    border-radius:2px;
    font-family:Ellipsis,JapanHeavy,TLHeader,Times,"Times New Roman",serif;
    font-weight:400;
    font-size:clamp(12px,.92vw,14px);
    line-height:1.4;
    letter-spacing:.14em;
    white-space:nowrap;
    text-transform:uppercase;
    text-shadow:0 1px 2px rgba(0,0,0,.75);
    box-shadow:0 6px 16px rgba(0,0,0,.34),0 0 12px rgba(166,107,66,.18),inset 0 1px 0 rgba(255,255,255,.12);
    transition:filter .17s ease,box-shadow .17s ease,transform .17s ease
}
#callToAction:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
    box-shadow:0 8px 22px rgba(0,0,0,.38),0 0 16px rgba(244,210,161,.24)
}
.discordInvite-btnIcon{
    display:inline-flex;
    width:17px;
    height:17px;
    color:#fff;
    flex:0 0 auto
}
.discordInvite-btnIcon svg{
    width:100%;
    height:100%
}
.discordInvite-buttonIcon{
    font-size:13px;
    line-height:1;
    opacity:.85
}
#callToAction-clicked{
    color:#dcddde;
    display:flex;
    overflow-wrap:break-word;
    word-wrap:break-word;
    align-items:center;
    justify-content:center;
    user-select:none;
    background:rgba(0,0,0,0);
    border:1px solid rgba(114,118,126,.298);
    border-radius:3px;
    font:normal normal 500 normal 14px/20px Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif;
    transition:color .17s ease 0s,background-color .17s ease 0s,border-color .17s ease 0s
}
.discordInvite-brand{
    display:none!important
}
.discordInvite-brand svg,
.discordInvite-glyph{
    width:100%;
    height:100%
}
#callToAction-clicked:hover{
    border-color:hsla(218,5%,47%,.6)
}
#discordSVG{
    color:#dcddde;
    height:18px;
    width:18px;
    margin:0 0 0 8px
}
#gDiscord{
    fill-rule:evenodd
}
#discordPoly{
    text-decoration:none solid #dcddde;
    fill-rule:evenodd;
    stroke:#dcddde;
    stroke-width:2px;
    caret-color:#dcddde;
    outline:#dcddde 0
}
#joinedDiscord{
    color:#dcddde;
    cursor:pointer;
    display:flex;
    height:20px;
    overflow-wrap:break-word;
    text-align:center;
    font:normal normal 500 normal 14px/20px Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif;
    overflow:hidden
}
#buttonText{
    cursor:pointer;
    display:flex;
    min-height:20px;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    text-align:center;
    font:inherit;
    margin:0
}
.loadHidden{
    display:none
}

@keyframes s21-card-border-glow{
    0%,100%{box-shadow:0 14px 28px rgba(0,0,0,.5),0 0 0 1px rgba(244,210,161,.12) inset,0 0 18px rgba(166,107,66,.08)}
    50%{box-shadow:0 14px 28px rgba(0,0,0,.5),0 0 0 1px rgba(244,210,161,.22) inset,0 0 22px rgba(166,107,66,.12)}
}

@media (max-width:900px){
    .discordInvite-grid{
        grid-template-columns:1fr;
        gap:14px
    }
    .discordInvite-content{
        align-items:center;
        text-align:center;
        padding-right:0
    }
    .discordInvite-side{
        grid-template-columns:1fr;
        border-top:1px solid rgba(244,210,161,.22);
        padding-left:0;
        padding-top:12px;
        max-width:100%;
        margin:0 auto;
        width:100%
    }
    .discordInvite-copy{
        max-width:100%
    }
    #callToAction{
        width:100%
    }
}

@media (max-width:768px){
    #discordInvite{
        padding:16px 14px
    }
}
