/* =========================================================
   BRASIL EM CENA
   Cinema Brasileiro
   HTML + CSS
   ========================================================= */


/* =========================================================
   CORES
   ========================================================= */

:root {

    --verde: #16442d;
    --verde-escuro: #0d2e20;

    --verde-folha: #64823b;

    --amarelo: #f2c52d;
    --amarelo-claro: #f5df7d;

    --laranja: #e66d2f;

    --vermelho: #b83e2e;

    --rosa: #d9655c;

    --azul: #17696d;

    --papel: #fff6dc;

    --creme: #f1e4c3;

    --marrom: #51301e;

    --texto: #241f18;

}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    background: #d5b54f;

    color: var(--texto);

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    line-height: 1.55;

}


/* =========================================================
   TEXTURA
   ========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 999;

    opacity: .10;

    background-image:

        repeating-linear-gradient(
            0deg,
            transparent 0 4px,
            rgba(30,20,10,.18) 5px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0 5px,
            rgba(255,255,255,.18) 6px
        );

}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color: var(--verde);

    font-weight: bold;

    text-decoration-thickness: 2px;

    text-underline-offset: 3px;

}


a:hover {

    color: var(--vermelho);

}


/* =========================================================
   SITE
   ========================================================= */

.site {

    width: min(
        1180px,
        calc(100% - 28px)
    );

    margin: 28px auto 50px;

    background: var(--creme);

    border: 3px solid var(--verde);

    box-shadow:
        14px 14px 0 rgba(70,45,25,.25);

}


/* =========================================================
   TOPO
   ========================================================= */

header {

    background: var(--verde);

}


.top-info {

    display: flex;

    justify-content: space-between;

    padding: 7px 12px;

    background:
        var(--verde-escuro);

    color:
        var(--amarelo-claro);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: bold;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    position: relative;

    min-height: 300px;

    overflow: hidden;

    display: flex;

    align-items: center;

    border-bottom: 3px solid var(--verde);

    background:
        var(--laranja);

}


.hero-image {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            90deg,
            rgba(8,48,30,.80),
            rgba(8,48,30,.20)
        ),

        url("assets/brasil-collage.jpg");

    background-size: cover;

    background-position: center;

}


.hero-content {

    position: relative;

    z-index: 2;

    padding: 45px;

    max-width: 760px;

    color: white;

    text-shadow:
        3px 3px 0 var(--verde);

}


.small-title {

    display: inline-block;

    padding: 4px 8px;

    margin-bottom: 10px;

    background: var(--amarelo);

    color: var(--texto);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: bold;

    text-shadow: none;

}


.hero h1 {

    margin: 0;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size:
        clamp(65px, 10vw, 120px);

    line-height: .78;

    letter-spacing: -4px;

}


.hero h1 em {

    color: var(--amarelo);

    font-style: normal;

}


.hero-content p {

    max-width: 510px;

    margin-top: 25px;

    padding-top: 12px;

    border-top: 2px solid white;

    font-family: Georgia, serif;

    font-size: 16px;

    line-height: 1.4;

}


/* =========================================================
   SELO
   ========================================================= */

.stamp {

    position: absolute;

    right: 35px;

    top: 80px;

    z-index: 3;

    padding: 18px 14px;

    background: var(--papel);

    border: 2px solid var(--texto);

    color: var(--texto);

    font-family: Impact, sans-serif;

    font-size: 22px;

    line-height: .9;

    text-align: center;

    transform: rotate(5deg);

    box-shadow:
        5px 5px 0 var(--vermelho);

}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

nav {

    display: flex;

    flex-wrap: wrap;

    background: var(--amarelo);

}


nav a {

    flex: 1 1 130px;

    padding: 11px;

    border-right: 2px solid var(--verde);

    color: var(--verde);

    text-align: center;

    text-decoration: none;

    font-size: 12px;

    letter-spacing: 1.5px;

    font-weight: 900;

}


nav a:hover {

    background: var(--vermelho);

    color: var(--papel);

}


/* =========================================================
   LAYOUT
   ========================================================= */

.layout {

    display: grid;

    grid-template-columns:
        245px
        minmax(0, 1fr);

    align-items: start;

}


/* =========================================================
   SIDEBAR
   ========================================================= */

aside {

    padding: 14px;

    border-right: 3px solid var(--verde);

    background:

        linear-gradient(
            rgba(244,232,201,.94),
            rgba(244,232,201,.94)
        ),

        url("assets/espirito-brasileiro.jpg");

    background-size: cover;

}


.side-box {

    margin-bottom: 14px;

    padding: 11px;

    background: rgba(
        255,
        247,
        223,
        .96
    );

    border: 2px solid var(--verde);

    box-shadow:
        4px 4px 0 rgba(20,63,43,.18);

}


.box-title {

    margin:
        -11px
        -11px
        10px;

    padding: 6px 7px;

    background: var(--verde);

    color: var(--papel);

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 900;

}


.side-box p {

    margin: 7px 0;

    font-size: 12px;

}


.hand-note {

    display: block;

    margin-top: 12px;

    color: var(--vermelho);

    font-family:
        "Comic Sans MS",
        cursive;

    transform: rotate(-2deg);

}


.side-box ul {

    margin: 0;

    padding-left: 18px;

}


.side-box li {

    margin: 5px 0;

    font-size: 11px;

}


.film-index {

    columns: 1;

}


.film-index li {

    margin: 3px 0;

}


.film-index a {

    text-decoration: none;

}


.side-box strong {

    color: var(--vermelho);

}


.side-image {

    display: block;

    width: 100%;

    height: 170px;

    object-fit: cover;

}


/* =========================================================
   MAIN
   ========================================================= */

main {

    min-width: 0;

    background:

        radial-gradient(
            circle at 5% 4%,
            rgba(231,104,45,.12) 0 45px,
            transparent 46px
        ),

        var(--creme);

}


/* =========================================================
   PAPER
   ========================================================= */

.paper {

    margin: 17px;

    padding: 22px;

    background: var(--papel);

    border: 2px solid var(--verde);

    box-shadow:
        8px 8px 0 rgba(31,48,28,.20);

}


.section-number {

    display: block;

    margin-bottom: 9px;

    color: var(--vermelho);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 900;

}


.paper h2 {

    margin:
        0
        0
        13px;

    color: var(--verde);

    font-family: Georgia, serif;

    font-size:
        clamp(28px, 4vw, 43px);

    line-height: 1;

}


.paper p {

    max-width: 760px;

    font-size: 14px;

}


/* =========================================================
   PALAVRAS
   ========================================================= */

.words {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 20px;

    border: 2px solid var(--verde);

}


.words span {

    padding: 9px;

    background: var(--azul);

    color: white;

    border-right:
        2px solid var(--verde);

    text-align: center;

    font-size: 10px;

    font-weight: 900;

}


.words span:nth-child(2) {

    background: var(--vermelho);

}


.words span:nth-child(3) {

    background: var(--amarelo);

    color: var(--texto);

}


.words span:last-child {

    background: var(--verde);

    border-right: 0;

}


/* =========================================================
   SOBRE
   ========================================================= */

.about {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        170px;

    gap: 25px;

    align-items: center;

}


.number-card {

    padding: 18px 13px;

    background: var(--vermelho);

    color: var(--papel);

    border: 3px solid var(--verde);

    text-align: center;

    transform: rotate(2deg);

    box-shadow:
        7px 7px 0 var(--amarelo);

}


.number-card strong {

    display: block;

    font-family: Impact, sans-serif;

    font-size: 70px;

    line-height: .85;

}


.number-card span {

    display: block;

    font-size: 11px;

    letter-spacing: 1px;

    font-weight: 900;

}


.number-card hr {

    margin: 12px 0;

    border: 0;

    border-top:
        2px solid var(--amarelo);

}


.number-card small {

    font-size: 10px;

}


/* =========================================================
   IMAGEM GRANDE
   ========================================================= */

.visual-break {

    position: relative;

    min-height: 260px;

    margin:
        18px
        17px
        28px;

    overflow: hidden;

    border: 3px solid var(--verde);

    box-shadow:
        7px 7px 0 rgba(20,63,43,.2);

}


.visual-break img {

    display: block;

    width: 100%;

    height: 260px;

    object-fit: cover;

    object-position: center;

    filter: saturate(1.2);

}


.visual-text {

    position: absolute;

    left: 25px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    padding: 9px 13px;

    background: var(--amarelo);

    color: var(--texto);

    border: 2px solid var(--verde);

    transform: rotate(-2deg);

}


.visual-text span {

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: bold;

}


.visual-text strong {

    font-family: Impact, sans-serif;

    font-size: 35px;

    line-height: .95;

}


/* =========================================================
   TÍTULO DOS FILMES
   ========================================================= */

.films-title {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 20px;

    margin-bottom: 18px;

}


.films-title p {

    margin: 0;

}


.instruction {

    padding: 7px 10px;

    background: var(--amarelo);

    border: 2px solid var(--verde);

    color: var(--verde);

    font-size: 10px;

    font-weight: bold;

    transform: rotate(2deg);

}


/* =========================================================
   GRID DOS FILMES
   ========================================================= */

.films {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

}


/* =========================================================
   CARD DO FILME
   ========================================================= */

.film {

    position: relative;

    padding: 12px;

    border: 2px solid var(--verde);

    background: #fffdf0;

    box-shadow:
        4px 4px 0 rgba(20,63,43,.16);

}


.film:nth-child(4n + 1) {

    background: #fff3c9;

}


.film:nth-child(4n + 2) {

    background: #f8dcd1;

}


.film:nth-child(4n + 3) {

    background: #e2edd6;

}


.film:nth-child(4n) {

    background: #dbe9e6;

}


/* =========================================================
   NÚMERO
   ========================================================= */

.film-number {

    position: absolute;

    top: 8px;

    right: 8px;

    z-index: 5;

    width: 31px;

    height: 31px;

    display: grid;

    place-items: center;

    background: var(--verde);

    color: white;

    border-radius: 50%;

    font-family: Impact, sans-serif;

}


/* =========================================================
   CARTAZ
   ========================================================= */

.poster {

    display: grid;

    place-items: center;

    min-height: 205px;

    margin-bottom: 10px;

    border: 2px dashed var(--verde);

    background:

        linear-gradient(
            135deg,
            rgba(242,195,40,.3),
            rgba(231,104,45,.2)
        ),

        repeating-linear-gradient(
            45deg,
            transparent 0 12px,
            rgba(20,63,43,.07) 12px 14px
        );

    color: var(--verde);

    font-family: Impact, sans-serif;

    font-size: 26px;

    line-height: .9;

    text-align: center;

}


/* =========================================================
   DETAILS
   ========================================================= */

.film details {

    border-top:
        2px solid var(--verde);

}


.film summary {

    padding: 10px 25px 10px 0;

    cursor: pointer;

    color: var(--verde);

    font-family: Impact, sans-serif;

    font-size: 20px;

    line-height: 1;

}


.film summary::marker {

    color: var(--vermelho);

}


/* =========================================================
   INFORMAÇÕES DO FILME
   ========================================================= */

.film-info {

    padding-top: 10px;

    font-size: 12px;

}


.film-info p {

    margin: 10px 0;

    font-size: 12px;

}


.film-info strong {

    color: var(--vermelho);

    font-size: 10px;

    letter-spacing: 1px;

}


/* =========================================================
   TRAILER
   ========================================================= */

.trailer {

    min-height: 135px;

    display: grid;

    place-items: center;

    padding: 15px;

    background: var(--verde);

    color: var(--papel);

    border: 2px solid var(--verde);

    font-size: 10px;

    letter-spacing: 1px;

    text-align: center;

}


/* =========================================================
   ANOTAÇÕES
   ========================================================= */

.notes {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

}


.note {

    min-height: 190px;

    padding: 17px;

    background: var(--amarelo-claro);

    border: 2px solid var(--texto);

    box-shadow:
        6px 6px 0 var(--vermelho);

    transform: rotate(-1deg);

}


.note:nth-child(2) {

    background: #efbcae;

    transform: rotate(2deg);

}


.note:nth-child(3) {

    background: #b7ce91;

    transform: rotate(-2deg);

}


.note > span {

    color: var(--vermelho);

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: bold;

}


.note h3 {

    margin:
        12px 0 8px;

    color: var(--verde);

    font-family: Georgia, serif;

    font-size: 23px;

    line-height: 1;

}


.note p {

    margin: 0;

    font-size: 12px;

}


/* =========================================================
   LINKS
   ========================================================= */

.links {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 8px;

}


.links a {

    padding: 11px;

    background: var(--amarelo);

    border: 2px solid var(--verde);

    color: var(--texto);

    text-decoration: none;

    font-size: 11px;

}


.links a:hover {

    background: var(--vermelho);

    color: white;

}


/* =========================================================
   RODAPÉ
   ========================================================= */

footer {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        auto;

    gap: 15px;

    padding: 14px 17px;

    background: var(--verde);

    color: var(--papel);

    font-size: 10px;

}


footer div:last-child {

    padding: 6px 8px;

    background: var(--amarelo);

    color: var(--texto);

    font-weight: bold;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {


    .layout {

        grid-template-columns: 1fr;

    }


    aside {

        display: grid;

        grid-template-columns:
            repeat(2,1fr);

        gap: 12px;

        border-right: 0;

        border-bottom:
            3px solid var(--verde);

    }


    .side-box {

        margin-bottom: 0;

    }


    .films {

        grid-template-columns:
            repeat(2,1fr);

    }


    .notes {

        grid-template-columns: 1fr;

    }


}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 620px) {


    .site {

        width:
            calc(100% - 12px);

        margin:
            6px auto 25px;

    }


    .top-info {

        font-size: 8px;

    }


    .hero {

        min-height: 330px;

    }


    .hero-content {

        padding: 25px;

    }


    .hero h1 {

        font-size: 70px;

    }


    .stamp {

        display: none;

    }


    nav a {

        flex-basis: 33.33%;

    }


    aside {

        grid-template-columns: 1fr;

    }


    .paper {

        margin: 10px;

        padding: 15px;

    }


    .about {

        grid-template-columns: 1fr;

    }


    .number-card {

        max-width: 170px;

        margin: 10px auto;

    }


    .words {

        grid-template-columns:
            repeat(2,1fr);

    }


    .films-title {

        flex-direction: column;

        align-items: flex-start;

    }


    .films {

        grid-template-columns: 1fr;

    }


    .links {

        grid-template-columns: 1fr;

    }


    footer {

        grid-template-columns: 1fr;

    }

}