/* background-image: url('../img/pexels-colys-hat-1587548.jpg'); */
/* background-image: url('/public/img/chalkboard-g5e22f2049_1920.jpg'); */
/* background-image: url('../img/chalkboard-g5e22f2049_1920.jpg'); */
/* background-image: url('../img/grass-g642056eae_1920.jpg'); */
/* background-image: url('../img/pexels-nmr-hrd-3571065.jpg'); */
/* background-image: url('../img/pexels-matthias-cooper-580900.jpg'); */
/* background-image: url('../img/pexels-juan-salamanca-61135.jpg'); */
/* background-image: url('../img/pexels-juan-salamanca-61143.jpg'); */
/* background-image: url('../img/pexels-sergio-souza-2291006.jpg'); */


/* https://css-tricks.com/the-fixed-background-attachment-hack/ */
.bg {
  /* background: linear-gradient(335deg, rgba(255,140,107,1) 0%, rgba(255,228,168,1) 100%); */
  background-size: cover;
  background-image: url('../img/pexels-tobi-572007.jpg');
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100vh;
  width: 100vw;
  /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
  z-index: -1;
}

body {
  /* background-attachment: fixed; */
  /* background-image: url('../img/pexels-tobi-572007.jpg'); */
  /* background-position: center; */
  /* background-size: cover; */
  color: #D2D79F;
  /* font-family: 'Raleway', sans-serif; */
  /* font-family: 'Lato', sans-serif; */
  font-family: 'PT Sans', sans-serif;
  margin: 0;
}
a{
  text-decoration: none;
  color: #D2D79F;
}
nav {
  height: 3.5em;
  position: fixed;
  top: 0;
  transition: top 0.3s;
  width: 100%;
  z-index: 1;
  /* background-color: rgba(0,0,0,.2); */
}
nav ul{
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li a{
  display: block;
  border: 2px solid #483838;
  border-radius: .5em;
  padding: .5em 1em;
  margin: .5em;
  background-color: rgba(72,56,56, 0.7);
}
nav ul li a:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}



.container {
  position: absolute;
  margin-top: 4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  z-index: 0;

  display: flex;
  flex-direction: column;
  /* margin-top: 4em; */
  margin-left: auto;
  margin-right: auto;
}

.fit-content {
  max-width: fit-content;
}


.card {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  /* max-width: fit-content; */
  /* height:100px; */
}
.card_left {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: 'Arvo', serif;
  font-size: 20px;
  /* height:100px; */
  width: 280px;
  /* background-image: repeating-linear-gradient(125deg,rgba(66,133,91,.8),rgba(66,133,91,.8) 48%, rgba(144,183,125,.7)  52%, rgba(144,183,125,.7) ); */
  background-image: repeating-linear-gradient(125deg,rgba(72,56,56,.4),rgba(72,56,56,.9) 48%, rgba(72,56,56,.7)  52%, rgba(72,56,56,.6) );
  /* background-image: repeating-linear-gradient(125deg,rgba(144,183,125,.7),rgba(144,183,125,0.7) 48%, rgba(66,133,91,.4)  52%, rgba(66,133,91,.4) ); */
  border-style: solid;
  border-width: medium;
  border-color: #483838;
  border-right-width: 0px;
  border-radius: .5em 0 0 .5em;
}
.card_left img {
  /* max-width: 100px; */
  width: 35%;
}
.card_right{
  /* margin: 0; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: left;
  /* height:100px; */
  width: 280px;
  border-style: solid;
  border-width: medium;
  border-color: #483838;
  border-radius: 0 .5em .5em 0;
  color: #D2D79F;
  font-size: 16px;
  /* line-height: 1.3; */
  padding-left: 1em;
  background-color: #373b3b;
  background-color:  rgba(72,56,56, 0.6);
}

/*Tabela de classificacao*/
.standings-table{
display: flex;
flex-direction: column;
max-width: 1000px;
font-weight: 900;
}
.standings-table .table-header,.standings-table .table-row{
display: flex;
background-color: rgba(72,56,56, 0.6);
margin-bottom: 3px;
}
.standings-table .col{
width: 8%;
height: 25px;
text-align: center;
}
.standings-table .col-nome{
width: 45%;
text-align: left;
padding-left: .5em;
}
.standings-table .col-ico{
overflow: hidden;
max-width: 80px;
height: 25px;
}
.standings-table img{
width: 100px;
margin: -20px 0px 0px -20px;
}
.standings-table span.nome{
  display: none;
}
.standings-table .col-nome{
  width: 15%;
}


.max-968 {
  max-width: 968px
}

.linha-top-scorer {
  display: flex;
  max-width: 400px;
  margin-bottom: 15px;
  margin-left: 2px;
  /* background-color: blue */

}
.linha-top-scorer > div{
  /* background-color: red; */
  /* width: 5.5em; */
  width: 4em;
}
.linha-top-scorer .nome {
  /* background-color: green; */
  flex-grow:1
}




/*Pagina jogo*/
.container-secao {
  border: 2px solid #483838;
  border-radius: .5em;
  background-color: rgba(72,56,56, 0.6);
  padding: .5em;
  margin: .5em;
}

.cabecalho-jogo {
  /* align-items: center; */
  display: flex;
  flex-direction: column;
  line-height: 1.3rem;
  text-align: center;
}
.flex-container-center-center{
  align-items: center;
  display: flex;
  justify-content: center;
}
.cabecalho-jogo .quem {
  font-weight: 700;
}
.cabecalho-jogo > div {
  margin-left: .5em;
  margin-right: .5em;
}
.cabecalho-jogo h1 {
  font-size: xxx-large;
  /* margin-left: 9px;
  margin-right: 9px;
  margin-bottom: 40px; */
}
/* Para o cabecalho do detalhes de jogos, com gols etc*/
.lista-gols-container{
  display: flex;
  justify-content: space-between;
}
.lista-gols-esq{
  /* background-color: blue; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* height: 50px; */
  /* flex-grow: 1; */
}
.lista-gols-dir{
  /* background-color: blue; */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* height: 50px; */
  /* flex-grow: 1; */
}



.prox-jogo-container {
  display: flex;
  /* background-color: green; */
}
.prox-jogo-container > div:first-child{
  /* background-color: yellow; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 65%;
  max-width: 20em;
  column-gap: 0.2em;
}
.prox-jogo-container > div:first-child > div{
  flex: 0 1 min-content;
}

.prox-jogo-container > div:last-child{
  /* background-color: blue; */
  width: 30%
}
.prox-jogo-container > div{
  margin: 5px;
}
.margin-bottom0 {
  margin-bottom: 0;
  margin-top: auto
}
.margin-top0 {
  margin-bottom: auto;
  margin-top: 0
}


.placar-container {
  display: flex;
  justify-content: center;
}
.placar-container > div {
  margin-left: .2em;
  margin-right: .2em;
}
.placar-container > .time-1 {
  flex: 0 0 30%;
  text-align: right;
}
.placar-container > .time-2 {
  flex: 0 0 40%;
  text-align: left;
}

.metrica-container {
  align-items: center;
  display: flex;
  margin: .5em;
  /* justify-content: center; */
}
.metrica-container .nome-metrica {
  flex: 0 0 7.5em;
  font-size: 120%;
  margin-right: .5em;
  text-align: right;
  white-space: nowrap;
}
.metrica-container .metrica-meter {
  /* width: 40%; */
  /*height: 20px;*/
  background: #483838;
  border-radius: 25px;
  flex: 1 0 auto;
  /* margin: 0 0 0 0; */
  position: relative;
  padding: 5px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.metrica-container .metrica-meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    to bottom,
    rgb(66,133,91) 37%,
    rgb(144,183,125) 69%
  );
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  text-align: right;
}



@media(max-width:600px){
  .bg {
    background-image: url('../img/pexels-tobi-572007 (5).jpg');
  }
   /*body {
    background-attachment: scroll;
    background-image: url('../img/pexels-tobi-572007 (5).jpg');
    height: 100vh;
    background-size: auto;
  }
  */
    .card_right .local{
    display: none;
  }
}