@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}

::-webkit-scrollbar {
    width: 10px;
    margin-top: 120px;
}

::-webkit-scrollbar-track {
    background-color: #f4cdd3;
    border-radius: 40px;
}

::-webkit-scrollbar-thumb {
    background-color: #f38dac;
    border-radius: 40px;
}

body {
    height: 100%;
    padding-top: 80px;
    background-color: #E0E3B9FF;
}

.custom-width-navbar {
    width: 100%;
}

#logo-navbar {
    width: 135px;
    height: 138px;
    transition: transform 0.3s ease;
    margin: -10px 0;
}

#logo-navbar:hover {
    transform: scale(1.2);
}

.navbar-nav .nav-item {
    margin: 5px 13px;
}

.dropdown-menu {
    animation: slide-down 0.3s ease;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#bt-procurar {
    background-color: #3ec62f;
    transition: transform 0.3s, box-shadow 0.3s;
}

#bt-procurar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 7px #000000;
}

#dropdown-menu {
    background-color: #6da52d80;
}

.nav-item a {
    display: inline-block;
    padding: 10px;
    border: 2px solid #efefd7;
    border-radius: 5px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.nav-item a:hover {
    transform: scale(1.1);
    box-shadow: 0 0 7px #000000;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.dropdown-item {
    background-color: #6da52d;
    transition: background-color 0.3s;
    border-radius: 10px;
}

.dropdown-item:hover {
    animation: background-color-animation 0.3s;
    background-color: #6da52d;
    animation-fill-mode: forwards;
}

#icon-dropdown {
    height: 24px;
    width: 24px;
    margin-right: 3px;
}

#textoeicon-dropdown {
    margin-left: 10px;
    margin-bottom: 3px;
}

.escritos-navbar {
    font-weight: bold;
}

.container-text-home {
    justify-content: center;
    flex-direction: column;
    margin-top: 80px;
}

.text-home {
    font-family: 'Roboto', sans-serif;
    margin-left: 13px;
    margin-right: 13px;
    background-color: #6da52df1;
    border-radius: 10px;
    padding: 10px;
}

.container-text-welcome {
    justify-content: center;
    flex-direction: column;
    margin-top: 80px;
}

.text-welcome {
    font-family: 'Roboto', sans-serif;
    margin-left: 13px;
    margin-right: 13px;
    background-color: #6da52df1;
    border-radius: 10px;
    padding: 10px;
    font-weight: bolder;
}

.container-text-home-2 {
    justify-content: center;
    flex-direction: column;
    margin-top: 40px;
}

.text-home-2 {
    font-family: 'Roboto', sans-serif;
    margin-left: 13px;
    margin-right: 13px;
    background-color: #6da52df1;
    border-radius: 10px;
    padding: 10px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    /* Permite que os itens sejam dispostos em várias linhas em telas estreitas */
    justify-content: center;
}

.centered-item {
    width: 90%;
    /* Largura de 90% em telas maiores */
    max-width: 400px;
    /* Largura máxima para garantir que as imagens não fiquem muito grandes em telas grandes */
    margin: 5px;
    /* Adicione margem entre os itens, se necessário */
}

.centered-item img {
    max-width: 100%;
    height: auto;
}

/* Media query para ajustar o layout em telas estreitas */
@media screen and (max-width: 600px) {
    .centered-item {
        width: 100%;
        /* Largura de 100% em telas estreitas */
    }
}