* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    background: rgb(76, 88, 68);
    height: 100dvh;
    display: flex;
    flex-wrap: wrap;
}

header {
    background: rgb(63, 71, 56);
    height: 80px;
    display: flex;
    flex: 1 1 100dvw;
    align-items: center;
}

.logo_container {
    flex: 0 1 600px;
    margin-left: 1%;   
}

.logo {
    font-size: 25pt;
    text-decoration: none;
    color: rgba(239, 246, 238, 0.6);
}

.logo:hover {
    color: rgb(150, 135, 50);
}

nav {
    display: flex;
    flex: 1 1 80dvw;
    justify-content: flex-end;
    margin-right: 1%;
}

.nav_item {
    border-top: 3px solid rgba(239, 246, 238, 0.6);
    border-right: 3px solid rgb(76, 88, 68);
    border-bottom: 3px solid rgb(76, 88, 68);
    border-left: 3px solid rgba(239, 246, 238, 0.6);
    color: rgba(239, 246, 238, 0.8);
    background-color: rgba(76, 88, 68, 0.6);
    display: flex;
    text-decoration: none;
    width: 120px;
    height: 40px;
    font-size: 15pt;
    margin: 1%;
    padding: 5px;
    align-items: center;
    justify-content: center;
}

.nav_item:hover {
    border-top: 3px solid rgb(76, 88, 68);
    border-right: 3px solid rgba(239, 246, 238, 0.6);
    border-bottom: 3px solid rgba(239, 246, 238, 0.6);
    border-left: 3px solid rgb(76, 88, 68);
    color: rgb(150, 135, 50);
}

main {
    width: 100dvw;
    height: calc(100dvh - 80px);
    display: flex;
    flex: 1 1 100dvw;
    justify-content: center;
}

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

.content_title {
    display: flex;
    color: rgb(239, 246, 238);
    margin: 20px;
    font-size: 20pt;
}

.content_image {
    display: flex;
    margin: 10px;
}

.blog_content {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.blog_title {
    display: flex;
    align-self: center;
    justify-content: center;
    color: rgb(239, 246, 238);
    margin: 20px;
    font-size: 20pt;
}

.articles_container {
    display: flex;
    flex-direction: column;
    background-color: rgb(63, 71, 56);
    width: 60dvw;
    height: 80dvh;
    margin: 20px;
    padding: 20px;
    border: 3px solid rgb(150, 135, 50);
    overflow: auto;
}

.article_box {
    display: flex;
    height: 100px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.article_link {
    display: flex;
    text-decoration: none;
    font-size: 15pt;
    color: rgb(239, 246, 238);
    align-items: center;
}

.article_link:hover {
    font-size: 18pt;
    color: rgb(150, 135, 50);
}

.dwarf_container {
    display: flex;
    margin: 20px;
    margin-top: 60px;
    padding: 20px;
    background: rgba(239, 246, 238, 0.4);
    /* borders */
    border-top: 5px solid rgba(239, 246, 238, 0.6);
    border-right: 5px solid rgb(63, 71, 56);
    border-bottom: 5px solid rgb(63, 71, 56);
    border-left: 5px solid rgba(239, 246, 238, 0.6);
}

/*
.dwarf_container:hover {
    border-top: 5px solid rgb(63, 71, 56);
    border-right: 5px solid rgb(239, 246, 238);
    border-bottom: 5px solid rgb(239, 246, 238);
    border-left: 5px solid rgb(63, 71, 56);
}
*/

.content_text {
    display: flex;
    color: rgb(239, 246, 238);
    margin-top: 20px;
}

.links_container {
    border: 3px solid rgb(150, 135, 50);
    background: rgb(63, 71, 56);
    display: flex;
    width: 30dvw;
    height: 30dvh;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.element_link {
    display: flex;
    width: 160px;
    height: 40px;

    text-decoration: none;

    background: rgba(76, 88, 68, 0.6);

    /* borders */
    border-top: 3px solid rgb(239, 246, 238);
    border-right: 3px solid rgb(76, 88, 68);
    border-bottom: 3px solid rgb(76, 88, 68);;
    border-left: 3px solid rgb(239, 246, 238);
    justify-content: center;
    align-items: center;

    color: rgb(239, 246, 238);
}

.element_link:hover {
    border-top: 3px solid rgb(76, 88, 68);;
    border-right: 3px solid rgb(239, 246, 238);
    border-bottom: 3px solid rgb(239, 246, 238);
    border-left: 3px solid rgb(76, 88, 68);;

    color: rgb(150, 135, 50);
}

.menu-mobile {
    display: none;
}

/* ========== MOBILE ========== */
@media (max-width: 816px) {
    .logo {
        font-size: 1.8rem;
        text-decoration: none;
        color: rgba(239, 246, 238, 0.6);
    }
}

@media (max-width: 768px) {
    /* Ajustes no Header */
    header {
        height: 80px;
        padding: 10px;
    }

    .logo_container {
        display: flex;
        margin-left: 10px;
    }

    .logo {
        font-size: 1.8rem; /* Tamanho menor para mobile */
        display: flex;
        width: 70%;
    }

    .menu-mobile {
        display: flex;
        margin-right: 15px;
        color: rgba(239, 246, 238, 0.8);
        background: transparent;
        font-size: 2.5rem;
        cursor: pointer;
        border: none;
    }

    /* Menu de navegação */
    nav {
        display: none;
    }

    .nav_item {
        width: 160px; /* Largura reduzida */
        height: 40px;
        font-size: 0.9rem;
        margin: 0;
        padding: 3px;
    }

    /* Menu mobile ativo */
    .nav-mobile-active {
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background: rgba(63, 71, 56, 0.9);
        position: absolute;
        top: 80px;
        right: 0;
        padding: 10px;
    }

    /* Conteúdo principal */
    main {
        height: auto;
        min-height: calc(100dvh - 80px);
    }

    .home_content {
        padding: 15px;
    }

    .content_title {
        font-size: 1.3rem;
        text-align: center;
        margin: 10px 0;
    }

    .content_image img {
        max-width: 100%; /* Garante que a imagem não ultrapasse a tela */
        height: auto;
    }

    .content_text {
        height: 60px;
        margin: 10px 15px;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
    }

    .links_container {
        width: 60dvw;
        margin-top: 20px;
    }

    .articles_container {
        width: 80dvw;
        padding: 10px;
    }

    .article_box {
        margin: 10px;
    }

    .article_link {
        font-size: 1rem;
    }
}
  
/* Ajustes extras para telas muito pequenas */
@media (max-width: 480px) {
    /* Esconde o menu normal e mostra hamburger menu */
    nav {
        display: none; /* Esconde o menu desktop */
    }

    /* Hamburguer Menu Mobile */
    .menu-mobile {
        display: flex;
        color: rgba(239, 246, 238, 0.8);
        background: transparent;
        font-size: 2.5rem;
        cursor: pointer;
    }

    /* Ajuste no header para o menu hamburger */
    header {
        position: relative;
        padding: 10px 0;
    }

    .logo {
        font-size: 1.4rem;
    }
}