@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap');

:root {

    --largura-main: 1905;

}

main {

    padding-top: calc((100 * 100vw) / var(--largura-main));
    
}

    main .container {

        padding: 0 20px;

    }

    .agenda {

        width: 100%;
        height: 120vh;

        display: flex;
        flex-direction: column;

    }

        .agenda .nomes {

            height: 7.5%;
            width: 100%;

            display: flex;

        }

            .agenda .nomes .nome {
                
                width: calc(100% / 7);
                height: 100%;

                padding: calc((5 * 100vw) / var(--largura-main));

            }

                .agenda .nomes .nome .fundo {

                    width: 100%;
                    height: 100%;
                    border-radius: 10px;

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    background-color: #b997018e;
                    border: 1px solid rgb(197, 197, 197);
                    

                }

                    .agenda .nomes .fundo p {

                        font-family: "Mozilla Headline", Arial, Helvetica, sans-serif;
                        font-size: calc((30 * 100vw) / var(--largura-main));
                        color: whitesmoke;
                        text-shadow: 2px 0px 5px black; /* Utilizado para colocar uma sombra na letra de texto, sintaxe: <deslocamento-direta> <deslocamento-esquerda> <desfoque> <cor> */
                    

                    }

        .agenda .dias {

            width: 100%;
            height: calc(100% - 7.5%);

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

        }

            .agenda .dias .dia {
                
                height: calc(100% / 6);
                width: calc(100% / 7);

                padding: 5px;

                border: 1px solid white;
                background-color: #A0402C;

            }

            .transparente {

                border: none !important;
                background-color: transparent !important;
                
            }

                .agenda .dias .dia ul {

                    padding-left: 5px;

                }

                    .agenda .dias .dia ul li {

                        margin-bottom: 7.5px;

                        list-style: circle;
                        list-style-position: inside;

                        color: #FFF0B5;

                        font-size: calc((16 * 100vw) / var(--largura-main));

                    }

                    .agenda .dias .dia ul li:hover {

                        filter: brightness(0.8);

                    }

                .agenda .dias .dia .data {

                    display: flex;
                    flex-direction: row-reverse;

                    width: 100%;

                }

                    .agenda .dias .dia .data p {

                        font-size: calc((30 * 100vw) / var(--largura-main));

                        color: white;
                        
                    }