@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400&?family=Roboto:wght@400;700&display=swap');

:root {
    --cor-base: #FDFDFD;
    --cor-cont: #000101;
    --cor-verd: #34CB66;
    --cor-fund: #62ce68;
    --logo: url(img/logo.svg);
    --charge: url(img/charge.webp);
    --balao: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 581.62 409.14"><style>.cls-1{stroke:black;stroke-width: 3px}</style><path class="cls-1" fill="rgb(255,255,255)" d="m382.37,409.14c-1.44-.23-2.92-.19-4.32-.74-9.58-3.8-17.44-13.02-23.45-26.56-7.79-17.54-17.99-24.42-30.02-25.09-11.86-.66-23.58,1.9-35.06,6.49-15.94,6.37-31.46,3.13-47.04-3.24-11.13-4.56-44.29-2.34-104.61-.35-42.72,1.41-72.06-4.41-91.18-13.54C30.34,338.31,0,304.96.54,209.85c-1.29-28.39-.32-56.47,3.32-84.21C9.63,81.69,22.97,48.22,45.63,27.29,62.32,11.87,80.28,5.62,98.7,2.42c21.5-3.74,42.99-2.92,64.43.97,25.54,4.63,51.05,10.02,76.57,15,19.89,3.87,39.75,8.36,59.68,11.19,5.29.75,10.59,1.3,15.88,1.6,34.54,1.95,63.81-23.37,129.25-22.11,38.52.74,78.47,16.52,107.45,51.27,19.04,23.92,29.45,55.81,29.18,98.31-.15,23.06.83,46.17.31,69.19-.25,11.15-.15,22.46-1.7,33.49-7.24,51.35-43.49,76.52-73.46,85.38-39.97,11.81-83.74,5.64-102.53,2.84-4.51-.67-9.26-.16-13.67,1.64-16.47,6.73-16.76,34.77-9.48,51.54.7,1.61,1.43,3.18,2.15,4.77-.13.55-.27,1.1-.4,1.65Z"/></svg>');
}

* {
    margin: 0;
    padding: 0;
    font-optical-sizing: auto;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--cor-fund);
}

h1,
h2,
h3,
li {
    letter-spacing: 1.5px;
    font-family: "Big Shoulders Display", sans-serif;
    font-style: normal;
}

li {
    font-weight: 400;
}

h1,
h2,
h3 {
    font-weight: bold;
}

h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

p,
.gallery-caption,
.gallery-link,
td.episodio-tt h3,
.card {
    font-family: "Roboto", sans-serif;
}

p,
.gallery-caption,
.gallery-link {
    line-height: 1.5rem;
}

td.episodio-tt h3 {
    font-size: 1rem;
}

.banner {
    height: 30vh;
    min-height: 140px;
    padding-top: 3%;
    padding-bottom: 3%;
    border-bottom: 1px solid var(--cor-cont);
}

.banner-img {
    margin: auto;
    background-image: var(--logo);
    height: 100%;
    width: 90%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

header {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    top: 0;
    background-color: var(--cor-fund);
    height: 10vh;
    min-height: 62px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
header a {
    letter-spacing: 3px;
}
section {
    min-height: 25vh;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10vh;
    padding-bottom: 10vh;
    margin: auto;
}


ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

li {
    margin: 0 15px;
}

header a {
    text-decoration: none;
    color: var(--cor-cont);
    font-weight: bold;
    padding: 8px;
    border-radius: 5px;
}

p+p, .privacidade h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

footer {
    height: 30vh;
    padding-top: 10vh;
    padding-left: 10%;
    padding-right: 10%;
    background-color: var(--cor-fund);
    color: var(--cor-cont);
}
footer a {
    text-decoration: none;
    color: var(--cor-cont);
}
.footer-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; 
    gap: 10px; 
  }

  .footer-logo {
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: top;
  }
  .cr {
    padding-top: 62px;
    text-align: center;
  }

  @media (max-width: 930px) {
    .footer-container {
      grid-template-columns: 1fr; 
    }
    .footer-item:first-of-type {
        height: 150px;
        background-size: contain;
        margin-bottom: 24px;
    }
    .footer-item:last-of-type {
        margin-top: 24px;
        text-align: center;
    }
  }

::-webkit-scrollbar {
    width: 12px; 
    height: 12px;
}

.privacidade::-webkit-scrollbar-track {
    background: var(--cor-fund);
}

::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 6px; 
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.social {
    background-image: var(--balao);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    height: 125px;
    width: 171px;
    color: var(--cor-cont);
    text-align: center;
    font-weight: 600;
    align-content: center;
    font-size: 0.85rem;
    margin-left: auto;
    margin-right: auto;
}

.social p {
    padding-top: 3px;
    line-height: 20px;
    font-family: 'Bubblegum Sans', cursive;
    font-size: 18px;
}

.social p a+a {
    margin-left: 16px;
}

#charge {
    background-image: var(--charge);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    height: 150px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#about {
    min-height: 30vh;
    background-color: var(--cor-cont);
    color: var(--cor-base);
}

.tiktok-embed {
    border-radius: 5px;
}

#episodes {
    background-color: #FFFFFF;
}

#video {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-link {
    padding: 10px;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 24px;
}

.bt-yt {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(255,0,0)" viewBox="0 0 16 16"><path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/></svg>');
}

.bt-sf {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(29, 185, 84)" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"/></svg>');
}
.container {
    margin-top: 5vh;
    height: 90vh;
    overflow-y: scroll;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 24px;
    justify-content: center;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 240px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card a {
    color: var(--cor-cont);
    text-decoration: none;
}

.card-img {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: auto;
    height: 180px;
}

.card-content {
    flex-grow: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-title {
    font-size: 1.1em;
    margin-bottom: 10px;
}

.card-caption {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}

.card-links {
    margin-top: auto;
    display: flex;
}

.card-links a {
    display: inline-block;
    margin-right: 10px;
    text-decoration: none;
}


#gallery {
    color: var(--cor-base);
    background-color: var(--cor-cont);
}

.gallery-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 520px;
    text-align: center;
    margin-top: 10vh;
}

.image-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 373px;
}

.gallery-image {
    max-width: 100%;
    height: auto;
}

.gallery-caption {
    margin-top: 10px;
    font-size: 16px;
    color: var(--cor-base);
}

.gallery-link {
    margin-top: 5px;
    font-size: 16px;
    color: var(--cor-verd);
    text-decoration: none;
    display: block;

}

.controls {
    margin-top: 20px;
}

.controls button {
    margin: 0 5px;
    cursor: pointer;
    background-color: transparent;
    border: 0;
}

#pause-button {
    margin-left: 24px;
    margin-right: 24px;
}

#about a {
    text-decoration: none;
    color: var(--cor-base);
}

#contact svg,
#about svg {
    transform: translateY(20%);
}
.privacidade {
    height: 25vh;
    min-height: 180px;
    overflow-y: auto;
    border-top: 2px dotted var(--cor-cont);
    border-bottom: 2px dotted var(--cor-cont);
    margin-left: 24px;
    margin-right: 24px;
    padding: 0.5rem; 
}