:root{
    --cor_primaria: #00d9f8;
    --cor_secundaria: #1da3b8;
    --Backgroud: #dfdfdf;
    --CP_darkmode: #213872;
    --CS_darkmode: #0e2555;
    --BKG_darkmode: #303030;

    --Border_radius: 45px;
    --box-shadow: 7px 7px 9px 0px rgba(0, 0, 0, 0.3);
    --borda: 1px #00d9f8 solid;
    --borda-dk: 1px #213872 solid;
}

/*
===============================================================================================================
Estilo geral
===============================================================================================================
*/
#treinolink{
    color: var(--CS_darkmode);
}

h1{
    margin-top: 45px;
    margin-bottom: 10px;
}

#tth{
    margin-bottom: 60px;
    text-align: center;
    font-size: 120%;
}

main{
    width: 100%;
    display: block;
    margin: auto;
}

/*
===============================================================================================================
Card de treinos
===============================================================================================================
*/
.container-th1{
    display: flex;
    justify-content: center;
    padding-inline: 20px;
}

.container-th{
    display: flex;
    justify-content: center;
}

.treino-card1{
    border: var(--borda);
    width: 30%;
    border-radius: 13px;
    margin-bottom: 5%;
}

#treino-card1{
    margin-right: 7%;
}

.treino-card{
    border: var(--borda);
    width: 30%;
    border-radius: 13px;
    margin-bottom: 5%;
}

#treino-card{
    margin-right: 7%;
}

.treino-card h3, .treino-card1 h3{
    font-size: 150%;
    margin-top: -2px;
}

.treino-card1 p{
    margin: 3%;
}

.treino-card p{
    margin: 3%;
}

#treino-img{
    width: 20%;
    margin-left: 6%;
}

.treino-card1 ul {
  list-style: none;       /* remove as bolinhas padrão */
  padding-left: 0;
  margin-top: 25px;
}

.treino-card1 ul li {
  position: relative;
  padding-left: 1.2em;    /* espaço pro ícone */
  margin-right: 0;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 16px;
  
  font-family: 'Open Sans';
}

.treino-card ul {
  list-style: none;       /* remove as bolinhas padrão */
  padding-left: 0;
  margin-top: 25px;
}

.treino-card ul li {
  position: relative;
  padding-left: 1.2em;    /* espaço pro ícone */
  margin-right: 0;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 16px;
  
  font-family: 'Open Sans';
}

ul li::before {
  content: "";   /* obrigatório */
  position: absolute;
  left: 0;
  top: 0.2em;                        /* joga pro meio vertical */
  transform: none;     /* centraliza certinho */
  width: 20px;                     /* tamanho fixo */
  height: 20px;
  background: url("../Imagens/Check-Mark.png") no-repeat center / contain;
}

#ath{text-decoration: none;}

#ir-plano{
    border: var(--borda);
    border-radius: 8px;
    background-color: var(--cor_primaria);
    font-size: 110%;
    width: 50%;
    height: 38px;
    display: block;
    margin: auto;
    color: white;
    font-weight: bold;
    margin-bottom: 8%;
}

/*
===============================================================================================================
Modo Noturno
===============================================================================================================
*/
body.darkmode .treino-card1{
    border: var(--borda-dk);
}
body.darkmode .treino-card{
    border: var(--borda-dk);
}

body.darkmode ul li{
    color: white;
}

body.darkmode #ir-plano{
    border: var(--borda-dk);
    background-color: var(--CP_darkmode);
}

/*
===============================================================================================================
Responsividade
===============================================================================================================
*/

@media (max-width: 902px){
    .treino-card{
        width: 30%;
    }
    .treino-card1{
        width: 100%;
    }
    #treino-card1{
        margin-right: 20px;
    }
}

@media(max-width: 770px){
    .container-th1{
        padding-inline: 10px;
    }
    .treino-card{
        width: 33%;
    }
}

@media(max-width: 480px){
    .container-th, .container-th1{
        flex-direction: column;
    }
    .container-th{
        padding-inline: 10px;
    }
    .treino-card{
        width: 100%;
        display: block;
        margin: auto;
        margin-bottom: 25px;
    }
    
}

@media (max-width: 420px){
    
}