:root {
   --cor-background-pcgaming: #a676ef;
   --cor-background-pcstream: #cb85f3;
   --cor-background-youtube: #D42C3A;
   --cor-background-youtube-dark: #AD2430;
   
   --cor-background-wiki-cards: #a676ef;
}
/* pagina youtube & parte wiki, na index*/
.container-card{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:30px;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--cor-back-box);
    padding: 50px;
    border-radius: 60px;
    
}
.card{
    width: 370px;
    background: var(--cor-background-youtube-dark);
    color: var(--cor-fonte-p);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 10px 50px 10px;
    border-radius: 30px;
}

.card img {
    width: 80%;
    height: auto;
    border-radius: 10px;
}

.card-saibamais {
    padding: 10px 100px 10px 100px;
    margin-top: 10px;
    border-radius: 10px;
    font-size: 18px;
}
a.card-saibamais{
    color: var(--fonte-lightgray);
}
p.card-saibamais.geral{
    opacity: 0;
}
a.card-acessar {
    background-color: var(--cor-back-box);
    color: var(--cor-fonte-p);
}
/* .card-cta {
    padding: 10px 110px 10px 110px;
    margin-top: 5px;
    background: black;
    border-radius: 10px;
} */
.card a {
    text-decoration: none;
    
}

.card-wiki{
    width: 370px;
    background: var(--cor-background-wiki-cards);
    color: var(--cor-fonte-p);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 10px 50px 10px;
    border-radius: 30px;
}

.card-wiki img {
    width: 80%;
    height: auto;
    border-radius: 10px;
}
.img-div {
    width: 80%;
    background: black;
    height: auto;
    border-radius: 10px;
}
# {
    
}

a.card-acessar-wiki {
    /* background-color: var(--cor-back-box); */ 
    color: var(--fonte-lightgray);
}
/* .card-cta {
    padding: 10px 110px 10px 110px;
    margin-top: 5px;
    background: black;
    border-radius: 10px;
} */
.card-wiki a {
    text-decoration: none;
    
}



/* pagina twitch */
.container-display-setup{
    display: flex;
    flex-direction: column;
    /* width: 1200px;
    height: ; */
    background: var(--cor-back-box);
    padding: 50px;
    border-radius: 60px;
    justify-content: center;
    align-items: center;
    gap:20px;
    margin-top: -70px;
}

.section-text, .card-setup {
    border-radius: 30px;
}
  .section-text{
    display: flex;
    flex-direction: column;
    width: 730px;
    height: 90px;
    color: var(--cor-fonte-p);
    font-size: 35px;
    justify-content: center;
    align-items: center;
    text-aligb: center;
}
.container-display-row{ /* sub-container-display-setup */
    display: flex;
    flex-direction: row;
    /* background: var(--cor-background-youtube); */
    justify-content: center;
    align-items: center;
    background: ;
    gap: 30px;
    
}
#padding-container-display-row {
    padding: 50px;
    border-radius: 50px;    
    background: var(--cor-back-box);
}
.container-display-row-visaogeral { /* pagina ds visao geral yt */
    display: flex;
    flex-direction: row;
    width: 925px;
    background: var(--cor-back-box);
    color: var(--cor-fonte-box);
    /* background: var(--cor-background-youtube); */
    justify-content: space-evenly;
    text-align: center;
    align-items: center;
    margin-top: -115px;
    gap: 30px;
    border-radius:30px;
}
.container-display-row-large { /* pagina da twitch */
    display: flex;
    flex-direction: row;
    width: 750px;
    height: 155px;
    background: var(--cor-back-box);
    color: var(--cor-fonte-box);
    /* background: var(--cor-background-youtube); */
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 30px;
    border-radius:30px;
}
.card-setup{
    display: flex;
    flex-direction: column;
    animation: ease-in-out;
    animation-duration: 1s;
    width: 350px;
    height: 400px;
    background: white;
    justify-content: center;
    align-items: center;
}
/* .card-setup h5{
    font-size: 20px;
    font-weight:;
    background:;
} */
/* .card-setup-tittle{
    width: ;
    
}
.card-setup-text{
    width: 200px;
    
} */

.text-card li {
    list-style: none;
    color: var(--fonte-preto);
    font-size: 20px;
    background:;
}

.cor-background-pcgaming{
    background: var(--cor-background-pcgaming);
}
.cor-background-pcstream{
    background: var(--cor-background-pcstream);
}

/* QUEEEEEEEEEEEEEBRAAAAAAAAAA DE LIIIIIIINHHHHHAAAAAAAAAAAAAA */

.imagem-canal {
    width: 250px;
    border-radius: 10px;
}
.imagem-thumb {
    aspect-ratio: 16 / 9;
    width: 250px;
}

.container-display-column{
    position: relative;
    display: flex;
    flex-direction: column;
    /* background: gray; */
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.info-canal-yt {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: yellow;
}
/* ul {

    display:flex;
    flex-direction: column; 
    justify-content: left;
    
} */

li {
    
}
/* nos canais do youtube */
.li{
    list-style: none;
    padding-left: 0;
    text-align: left;
    background:;
    margin-top: 15px;
    padding: 0px 20px 0px 20px;      
}
/* nos perfis narcolegas */
.li-nar {
    list-style: none;
    padding-left: 0;
    text-align: center;
    background:;
    color: var(--fonte-lightgray);
    margin-top: -10px;
    padding: 0px 20px 0px 20px; 
}
/* espaçamento para a visualizacao de canal */
.cappucino li{
    margin-top: 10px;
}
/* espacamento lista para card 2 e 3 de narcolegas */
.geregotango li{
    margin-top: 35px;
}
#none-geregotango {
    margin-top: 0px;
}
.container-display-grid-colored{ /* sub-container-display-setup */
    width: 1400;
    display: flex;
    flex-direction: row;
    background: black;
    justify-content: center;
    align-items: center;
    gap: 30px;
    /* padding: 50px; */
    color: var(--cor-fonte-p);
}
.container-display-grid-youtube{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: ;
    max-width: ;
    /* justify-content: center;
    align-items: center; */
    gap: 30px;
}

.button-yt {
    grid-column: span 2;
}
.card-canal-yt-1{
    width: 250px;
    height: 520px;    
    background: var(--cor-pure-lightgray);
    text-align: center;
    align-items: center;
    padding: 30px;
}
.card-canal-yt-2{
    width: 250px;
    background: var(--cor-pure-lightgray);
    text-align: center;
    align-items: center;
    padding: 30px;
    gap: 0px;
}


/* fim IDs para page-yt (Youtube) */

.card-canal-yt-1, .card-canal-yt-2, .button-large, .card-perfil-narcolegas, .card-perfil-narcolegas-list, .grid-bloco {
    border-radius: 20px;
}

/* QUEBROU A LINHA EMH AREA PARA PERFIS NARCOLEGASZ */
.card-perfil-narcolegas {
    position: relative;
    width: 250px;
    height: 420px;    
    background: lightgreen;
    color: var(--cor-fonte-p);  
    text-align: center;
    align-items: center;
    padding: 20px;
}
.card-perfil-narcolegas h5 {
    font-size: 20px;
}
.card-perfil-narcolegas-list {
    display: flex;
    width: 250px;
    height: 420px;    
    background: lightgreen;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#card-pfl-nrclgs-lst-right{
  justify-content: flex-end;  
}
#card-pfl-nrclgs-lst-left{
    justify-content: flex-start;  
}
.grid-container{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}
.grid-bloco{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
    background: lightgreen;
}
/* margins */
    #welcome{ /* margin do texto de Seja bem-vindo(a) */
       margin-top: -80px; 
    }
    
.margin--140{
    margin-top: -140px; 
}
.margin--50{
    margin-top: -50px; 
}
.margin--30{
    margin-top: -30px; 
    color: var(--fonte-lightgray);
}
.margin--70{
    margin-top: -70px; 
    margin-bottom: -70px;
    animation: appear ease-in-out;
    animation-timeline: view();

    
}
/* fim margins */

@keyframes appear {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
    120% {opacity: 0;}
}

.container-visao-geral{
    width: 1000px;
    height: 110px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--fonte-gray);
    gap:58px;
}
.container-visao-geral img {
    width:80px;
    height: 80px;
    margin-left: 20px;
    border-radius: 7px;
}
h6.space-p{
    width: 250px;
    text-align: center;
}
.space-p{
    width: 80px;
    text-align: center;    
}
.space-p-twitch{
    width: 180px;
    text-align: center;   
    background:; 
}

.space-p-top{
    width: 100px;
    text-align: center;
    font-size: 15px;
    /* background: red; */
}
.container-visao-geral-top{
    width: 750px;
    height: 22px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--cor-back-box);
    padding: 15px;
    margin-left: 220px;
    position: sticky;
    top: 0px;
    gap:40px;
}
.chanel{
    margin-right: 75px;
}

.container-visao-geral, .container-visao-geral-top{
    border-radius: 17px;
}

.container-powerade{
    display: flex;
    flex-direction: column;
    width: 700px;
    margin: 0 auto;
    color: var(--cor-fonte-p);
    background: var(--cor-back-box);
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 20px;
    border-radius: 40px;
    
}

/* QUEEEEEBRA DE LINNHHHAAAAAA */



/* pagina linha do tempo */

.container-tela-total{
    position: relative;
    width: 1000px;
    /* height: 650px; */
    display: flex;
    flex-direction: row;
    background:;
    margin-left: 23px;
}
.card-lateral-anos{
    position: sticky;
    top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    width: 350px;
    height: 600px;
    background-color: var(--cor-back-box);
    border-radius: 30px;
}
.card-lateral-anos a{
    text-decoration: none;
    background-color:;
    width: 280px;
    padding: 20px 0px;
    border-radius: 10px;
}
.card-lateral-anos a:hover{
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    cursor: pointer;
}
.card-lateral-texto{
    display: flex;
    flex-direction: column;
    /* text-align: center; */
    align-items: center;
    width: 650px;
    background-color:;
}
/* .p-lnhtmp{
    padding: 20px;
    background: ; */
}
.card-lateral-texto h3{}
h3.ano-titulo {
    width: 550px;
    background-color:; 
    color: var(--fonte-lightgray);  
    scroll-margin-top:50px; 
}
p.p-lnhtmp{
    width: 550px;
    background-color:;
}

.p-primeiro{
    margin-top:-20px;
}
.p-ultimo{
    margin-bottom:150px;
}

/* pagina wiki */
.div-pic {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 296px;
    height: 296px;
    background: var(--cor-back-box);
    border-radius: 10px;
}
.div-pic p {
    margin: 20px;
    font-size: 90px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    /* overflow-wrap: break-word; */
    word-break: break-word;
    overflow: hidden;
    opacity: 0.2;
    line-height: 0.9;
    background-color:;
}
.border-wiki {
  /* border: solid 3px rgba(0, 0, 0, 0.1);   */
}


#clr-brlh-intrn-1{
    box-shadow: inset 0 0 50px 10px var(--card-yt-background-mount); /* x, y, blur, expansão interna */
}
#clr-brlh-intrn-1 p {color: #556dff;} 

/*    quebrou   */
#clr-brlh-intrn-2{
    box-shadow: inset 0 0 50px 10px var(--card-yt-background-mountgameplays);
}
#clr-brlh-intrn-2 p {color: #ff95fc ;}

/*    quebrou   */
#clr-brlh-intrn-3{
    box-shadow: inset 0 0 50px 10px var(--card-yt-background-mountvods);
}
#clr-brlh-intrn-3 p {color:  #fff4d5;}

/*    quebrou   */
#clr-brlh-intrn-4{
    box-shadow: inset 0 0 50px 10px var(--card-yt-background-mountlives); 
}
#clr-brlh-intrn-4 p {color: #bfffff;}

/*    quebrou   */
#clr-brlh-intrn-5{
    box-shadow: inset 0 0 50px 10px var(--card-yt-background-mountgameplays); 
}
#clr-brlh-intrn-5 p {color: #ff95fc ;}

/*    quebrou   */
#clr-brlh-intrn-6{
    box-shadow: inset 0 0 50px 10px var(--card-yt-background-mount);
}
#clr-brlh-intrn-6 p {color: #556dff ;}

img.pic-vis-notion {
    width: 700px;
    border-radius: 25px;
}
img.foto-marlon{
    width: 400px;
    border-radius: 25px;
}