@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


@font-face {
    font-family: 'happynessV2';
    src: url('font/happynessV2.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* 
 * {
    outline: 1px solid red;
}      */

header {
    background-color: #FB5C5BCC;
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: 5;
    gap: 15px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    min-height: 60px;

    img {
        width: 20%;
    }

    a {
        text-decoration: none;
        color: #ffffff;

    }

    a:visited {
        color: #ffffff;
    }

    .instituto {
        text-decoration: underline white;
    }

    .contato {
        padding: 1%;
        border: 1px solid #ffff;
        border-radius: 10px;

    }
}

.background {
    background-color: #edcfcf;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .start {
        width: 100%;
        text-align: center;

    }

    .end {
        width: 100%;
        text-align: center;

    }

    video {
        position: relative;
        z-index: 4;
        margin-top: 10%;
        bottom: -60px;
        background-color: black;

    }

    .card {
        position: relative;
        z-index: 3;

        background-color: #ffff;
        border-radius: 20px;
        width: 80%;
        padding: 20% 5% 5% 5%;
        color: #0C306C;

        h1 {
            font-family: 'happynessV2';
            font-size: 30px;
            padding: 2%;
        }

        p {
            padding: 2%;
            font-family: "Roboto", sans-serif;
        }

        .pilares {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .pilar {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                img {
                    padding: 2%;
                    width: 30%;
                }

                h2 {
                    font-family: 'happynessV2';
                    font-size: 25px;
                }

                p {
                    text-align: center;
                }
            }
        }
    }
}

h1 {
    font-family: 'happynessV2';
    font-size: 30px;
    padding: 2%;
    color: #0C306C;
}

.organizadores {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    img {
        padding: 5%;
        width: 60%;
    }

    .organizador {
        text-align: center;
        width: 70%;
        border-radius: 20px;
        background-color: #ffff;
        font-family: "Roboto", sans-serif;
        color: #0C306C;

        h2 {
            font-weight: 700;
        }

        h3 {
            padding: 2%;
        }
    }
}

.conselho {
    display: flex;
    flex-direction: column;
    align-items: center;


    img {
        padding: 5%;
        width: 50%;
    }

    .conselheiro {
        width: 70%;
        text-align: center;
        border-radius: 20px;
        background-color: #ffff;
        font-family: "Roboto", sans-serif;
        color: #0C306C;
        margin: 0% 2% 8% 2%;

        h2 {
            font-weight: 700;
            padding: 5%;
        }
    }
}

footer {
    display: flex;
    min-height: 70px;
    align-items: center;
    background-color: #FB5C5B;
    gap: 30%;

    img {
        padding: 2%;
        width: 30%;
    }

    a {
        font-family: "Roboto", sans-serif;
        text-decoration: none;
        color: #ffffff;
        font-size: 15px;
        width: 70%;
    }

    a:visited {
        color: #ffffff;
    }

    .contato {

        display: flex;
        flex-direction: column;
        font-weight: 200;
        text-align: center;

        a {
            padding: 3%;
            width: 100%;
        }
    }
}


@media(min-width:768px) {
    header {
        width: 100%;
        justify-content: space-around;
        font-size: 20px;
        gap: 0px;

        img {
            padding: 1%;
        }
    }

    .background {


        video {

            position: relative;
            z-index: 4;
            margin-top: 10%;
            bottom: -60px;
            background-color: black;
        }

        .start {
            width: 90%;
            text-align: start;
            padding-left: 10%;
        }

        .end {
            width: 90%;
            text-align: end;
            padding-right: 10%;
        }

    }

    .organizadores {
        flex-direction: row;
        padding: 2%;
    }

    .conselho {

        flex-direction: row;
        padding: 2%;

        .conselheiro {
            img {
                padding: 5% 2% 2% 2%;
            }
        }
    }

    footer {
        gap: 50%;

        img {
            width: 20%;
        }

        a {
            font-size: 20px;

        }

    }
}

@media(min-width:1024px) {
    header {
        width: 100%;
        font-size: 25px;

        a {
            font-size: 20px;
        }
    }

    .background {
        display: flex;
        justify-content: center;
        align-items: center;

        video {
            width: 600px;
        }

        .start {
            width: 90%;
            text-align: start;
            padding-left: 0%;
        }

        .end {
            width: 90%;
            text-align: end;
            position: relative;
            right: 80px;
        }

        .card {
            padding-top: 10%;

            h1 {
                font-size: 35px;
            }

            .escritas {
                display: flex;

                p {
                    font-size: 25px;
                }


            }

            .pilares {

                padding: 5%;
                display: flex;
                flex-direction: row;

                .pilar {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    min-height: 510px;

                    h2 {
                        font-size: 30px;
                        padding: 2%;
                    }

                    p {
                        font-size: 25px;
                    }

                    img {
                        width: 50%;
                    }
                }
            }
        }

        .organizador {
            h2 {
                font-size: 25px;
            }

            h3 {
                padding-bottom: 5%;
                font-size: 25px;
            }
        }


        .conselheiro {
            min-height: 225px;

            img {
                width: 70%;
            }

            h2 {
                font-size: 25px;
            }
        }



    }

    footer {
        display: flex;
        gap: 50%;

        a {
            font-size: 25px;
        }

        .contato {
            display: flex;
            flex-direction: column;
            font-weight: 200;

            text-align: center;

            a {
                width: 100%;
                padding: 2%;
                font-size: 20px;
            }
        }
    }

}

@media(min-width:1440px) {
    header {
        img {
            width: 15%;
        }

        a {
            font-size: 25px;
        }
    }

    .background {
        h1 {
            font-size: 35px;
        }

        .card {
            h1 {
                font-size: 40px;
            }

            .escritas {
                p {
                    font-size: 30px;
                }
            }
        }
    }

    footer {
        .contato {
            a {
                padding: 2%;
                font-size: 25px;
            }
        }
    }
}

@media(min-width:1920px) {
    header {
        img {
            width: 10%;
        }
    }

    footer {
        .contato {
            a {
                padding: 5%;
            }
        }
    }

}


@media(min-width:2560px) {
    header {
        min-height: 150px;

        img {
            width: 10%;
        }

        a {
            font-size: 40px;
        }

        .contato {
            padding: 25px;
        }

    }

    .background {
        h1 {
            font-size: 55px;
        }

        .card {
            h1 {
                font-size: 55px;
            }

            .escritas {
                p {
                    font-size: 45px;
                }
            }

            .pilares {
                .pilar {
                    h2 {
                        font-size: 50px;
                    }

                    p {
                        font-size: 45px;
                    }
                }
            }
        }

        .organizadores {
            width: 80%;

            .organizador {
                h2 {
                    font-size: 50px;
                }

                h3 {
                    font-size: 45px;
                }
            }
        }

        .conselho {
            width: 80%;

            .conselheiro {
                h2 {
                    font-size: 50px;
                }

                h3 {
                    font-size: 45px;
                }
            }
        }

    }

    footer {
        text-align: center;

        img {
            width: 10%;
        }

        a {
            font-size: 40px;
        }
    }
}