html, body {
    background-color: #1a1a2e; /* Cor de fundo sólida (fallback caso a imagem não carregue) */
    background-image: url('https://i.imgur.com/SQsg8pi.jpeg'); /* URL da imagem de fundo */
    background-size: 100% 100%; /* Estica imagem para preencher 100% largura e altura */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-attachment: fixed; /* Imagem fica fixa ao fazer scroll */
    font-family: Helvetica; /* Fonte padrão para todo o texto */
    color: #fff; /* Cor do texto em branco */
    margin: 0; /* Remove margem padrão do navegador */
    padding: 10px; /* Espaçamento interno reduzido para 10px */
    height: 100vh; /* Altura exata da viewport */
    width: 100%; /* Largura de 100% */
    overflow: hidden; /* Remove barras de rolagem */
    box-sizing: border-box; /* Inclui padding no cálculo do tamanho *
}

body {
    background-image: url('../img/background-fim.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: sans-serif;
    font-size: 12px;
    text-shadow: 0px 2px 5px rgba(0,0,0,.3);
    color: #989898;
}

#l {
    width: 100%;
    height: 100%;
}

#a {
    width: 80%;
    height: 70%;
    margin: auto;
    /* background: rgba(0, 0, 0, 0.1); */
}

#a p {
    border-bottom: 1px #585858 solid;
    font-size: 14px;
    line-height: 24px;
    padding-left: 10px;
    margin: 0;
}

#a table {
    margin-left: auto;
    width: 90%;
}

#a table tr:first-child {
    background: none;
    line-height: 22px;
}

#a table tr {
    background: rgba(34, 34, 39, .3);
    line-height: 0px;
}

#i {
    position: relative;
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
    background: rgba(21, 21, 24, .3);
    margin: 30px 0 15px 0;
}

#j, #k, #q {
    z-index: -1;
    top: -31px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 300%;
    opacity: .3;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
}

#j { background-image: url('../img/logo-tr.png') }
#k { background-image: url('../img/logo-ct.png') }
#q { background-image: url('../img/logo-mix.png') }

#a table tr td {
    text-align: center;
}

#a table tr td img {
    height: 20px;
}

#a table #c {
    width: 20px;
}

#a table #d {
    padding-left: 10px;
    text-align: left;
}

#a table #t {
    padding-left: 10px;
    text-align: left;
    background: rgba(200, 200, 0, 0.1)
}

#a table #e {
    background: rgba(255, 255, 255, 0.01);
}

#a table #g {
    width: 30px;
}

#a table #e p {
    display: inline-block;
    vertical-align: super;
    font-size: 8px;
    padding: 0;
    margin: 0;
    line-height: 0;
}

#m {
    box-shadow: 0px -10px 17px rgba(0,0,0,.1);
    background: rgba(34, 34, 39, .3);
    padding: 8px 20px;
    text-align: center;
    vertical-align: middle;
    text-shadow: 0px 1px 5px rgba(0,0,0,.3);
    color: #a0a0a0;
}

#m > div {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
}

#m img {
    box-shadow: 0px 4px 5px rgba(0,0,0,.2);
    margin-bottom: 3px;
    width: 85px;
}

#m #n {
    margin-top: 5px;
    max-width: 100px;
    text-align: center;
    color: #d6be74;
}

#m #o p:first-child
{
    font-size: 20px;
    margin: 0 0 -6px 0;
}

#m #o p {
    text-align: left;
    font-size: 13px;
    margin-bottom: -11px;
}

#m #o b {
    padding-right: 20px;
    float: right;
    color: #d6be74;
}

#m #o p:last-child {
    margin-top: 15px;
}

#m #o p:last-child b {
    font-size: 14px;
    color: #bfd228;
}

/* #region ranks */

    #xa, #xb, #xc, #xd, #xe,
    #xf, #xg, #xh, #xi, #xj,
    #xk, #xl, #xm, #xn, #xo,
    #xp, #xq, #xr, #xs, #xt,
    #xu, #xv, #xw, #xx, #xy,
    #xz, #ya, #yb, #yc, #yd,
    #ye, #yf, #yg, #yh, #yi,
    #yj, #yk, #yl, #ym, #yn,
    #yo { /* sessões dos ranks */
        width: 25px;
        background-repeat: no-repeat;
        background-position: center;
        /* background-size: 35px; */
        background-size: 24px;
    }

    /* ícones dos ranks */
    #xa { background-image: url('../img/ranks/level0.png') }
    #xb { background-image: url('../img/ranks/level1.png') }
    #xc { background-image: url('../img/ranks/level2.png') }
    #xd { background-image: url('../img/ranks/level3.png') }
    #xe { background-image: url('../img/ranks/level4.png') }
    #xf { background-image: url('../img/ranks/level5.png') }
    #xg { background-image: url('../img/ranks/level6.png') }
    #xh { background-image: url('../img/ranks/level7.png') }
    #xi { background-image: url('../img/ranks/level8.png') }
    #xj { background-image: url('../img/ranks/level9.png') }
    #xk { background-image: url('../img/ranks/level10.png') }
    #xl { background-image: url('../img/ranks/level11.png') }
    #xm { background-image: url('../img/ranks/level12.png') }
    #xn { background-image: url('../img/ranks/level13.png') }
    #xo { background-image: url('../img/ranks/level14.png') }
    #xp { background-image: url('../img/ranks/level15.png') }
    #xq { background-image: url('../img/ranks/level16.png') }
    #xr { background-image: url('../img/ranks/level17.png') }
    #xs { background-image: url('../img/ranks/level18.png') }
    #xt { background-image: url('../img/ranks/level19.png') }
    #xu { background-image: url('../img/ranks/level20.png') }
    #xv { background-image: url('../img/ranks/level21.png') }
    #xw { background-image: url('../img/ranks/level22.png') }
    #xx { background-image: url('../img/ranks/level23.png') }
    #xy { background-image: url('../img/ranks/level24.png') }
    #xz { background-image: url('../img/ranks/level25.png') }
    #ya { background-image: url('../img/ranks/level26.png') }
    #yb { background-image: url('../img/ranks/level27.png') }
    #yc { background-image: url('../img/ranks/level28.png') }
    #yd { background-image: url('../img/ranks/level29.png') }
    #ye { background-image: url('../img/ranks/level30.png') }
    #yf { background-image: url('../img/ranks/level31.png') }
    #yg { background-image: url('../img/ranks/level32.png') }
    #yh { background-image: url('../img/ranks/level33.png') }
    #yi { background-image: url('../img/ranks/level34.png') }
    #yj { background-image: url('../img/ranks/level35.png') }
    #yk { background-image: url('../img/ranks/level36.png') }
    #yl { background-image: url('../img/ranks/level37.png') }
    #ym { background-image: url('../img/ranks/level38.png') }
    #yn { background-image: url('../img/ranks/level39.png') }
    #yo { background-image: url('../img/ranks/level40.png') }

/* #endregion ranks */


/* #region níveis de habilidade */

    #za, #zb, #zc, #zd, #ze, #zf, #zg,
    #zh, #zi, #zj, #zk, #zl, #zm, #zn,
    #zo, #zp, #zq, #zr, #zs { /* sessões dos níveis de habilidade */
        padding-left: 23px;
        width: 30px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30px;
    }

    #za { background-image: url('../img/skills/skill0.png') }
    #zb { background-image: url('../img/skills/skill1.png') }
    #zc { background-image: url('../img/skills/skill2.png') }
    #zd { background-image: url('../img/skills/skill3.png') }
    #ze { background-image: url('../img/skills/skill4.png') }
    #zf { background-image: url('../img/skills/skill5.png') }
    #zg { background-image: url('../img/skills/skill6.png') }
    #zh { background-image: url('../img/skills/skill7.png') }
    #zi { background-image: url('../img/skills/skill8.png') }
    #zj { background-image: url('../img/skills/skill9.png') }
    #zk { background-image: url('../img/skills/skill10.png') }
    #zl { background-image: url('../img/skills/skill11.png') }
    #zm { background-image: url('../img/skills/skill12.png') }
    #zn { background-image: url('../img/skills/skill13.png') }
    #zo { background-image: url('../img/skills/skill14.png') }
    #zp { background-image: url('../img/skills/skill15.png') }
    #zq { background-image: url('../img/skills/skill16.png') }
    #zr { background-image: url('../img/skills/skill17.png') }
    #zs { background-image: url('../img/skills/skill18.png') }

/* #endregion níveis de habilidade */

#f { 
	background-image: url('../img/icon-star.png');    
	background-repeat: no-repeat;    
	background-position: center;    
	background-size: contain;
        max-width: 30px;
}

/* ícone das mortes */
#w {    
	background-image: url('../img/icon-skull.png');    
	background-repeat: no-repeat;    
	background-position: center;    
	background-size: contain;
}

/* ícone das kills */
#h {    
	background-image: url('../img/icon-kills.png');    
	background-repeat: no-repeat;    
	background-position: center;    
	background-size: 150%;
}

#r {
    background-image: url('../img/icon-kd.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 88%;
}

@media screen and (max-height: 400px) {	
	#a, #p {
		font-size: 14px;
	}

	#i {
		font-size: 25px;
	}

	#m #o p{
		line-height: 10px;
		font-size: 15px;
	}

	#a table tr td img {
    		height: 18px;
	}

	#m #o b, #m #o p:last-child b, #a p {
		font-size: 14px;
	}

	#m #o p:first-child{
  	  font-size: 20px;
	}
}

@media screen and (max-height: 350px) {	
	#a, #p {
		font-size: 10px;
	}

	#i {
		font-size: 18px;
	}

	#m #o p{
		font-size: 15px;
	}

	#a table tr td img {
    		height: 15px;
	}

	#m #o b, #m #o p:last-child b, #a p {
		font-size: 11px;
	}

	#m #o p:first-child{
  	  font-size: 16px;
	}
}