@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --cor-pricipal: #6E859F ;
    --cor-secundaria: #284260;
    --cor-destaque: #38e914;
}

/* Banner estilo YouTube */
.banner-container {
  width: 100%;
  height: 250px; /* altura parecida com o YouTube */
  overflow: hidden;
}


.banner {
  width: 100%;
  height: 100%;
  object-fit: cover; /* corta sem distorcer */
  border-radius: 15px;
}

.rounded-circle {
margin: 1em;
}

body {
    font-family: 'Chakra Petch', sans-serif;
    color: var(--cor-pricipal);
    --background: #1a2027;
}

span:hover {
    color: var(--cor-destaque);
}

h1, h2, h5 {
    color: var(--cor-secundaria);
    font-weight: 700;
}

.lead, .btn-link {
    color: var(--cor-destaque);
    font-weight: 700;
}

a, .btn-link:hover {
    color: var(--cor-pricipal)
    transparent 5s;
}

a:hover {
    color: var(--cor-destaque);
}

.card {
    border: 1px solid var(--cor-destaque);
}