@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --background-color: #ffffff;
    --background-color-2: #2596be;
    --btn-color: #000000;
    --text-color: #80162d;
    --anchors-selected-color: #666666;

    --green-color: #176B4D;
    --gold-color: #D4AF37;

    --text-font-1: 'Outfit', sans-serif;
}

@media (max-width: 900px) {

    .home-main-header h3,
    .employees-main-header h3,
    .dashboard-name h3,
    .dashboard-goals-name h3,
    .admins-main-header h3,
    .admins-main-painel-header h3 {
        font-size: 1.5rem;
    }

    .header-anchors-sandwich {
        position: absolute;
        top: 50%;
        left: 95%;
        transform: translate(-95%, -50%);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .header-anchors-sandwich-btn {
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
        font-size: 24px;
    }

    .header-anchors-sandwich-as {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        flex-direction: column;
        align-items: start;
        gap: 8px;
        padding: 10px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .header-anchors-sandwich-as a {
        width: 100%;
    }

    .header-anchors-sandwich.active .header-anchors-sandwich-as {
        display: flex;
    }

    .header-anchors-sandwich-as a {
        text-decoration: none;
        white-space: nowrap;
    }

    .home-header {
        height: max-content;
        justify-content: start;
        padding: 0.5rem;

        align-items: start;
        position: fixed;
        background-color: var(--background-color);
    }

    .home-main p,
    .employee-name h3,
    .admin-name h3 {
        font-size: 0.8rem;
    }

    .employees-main {
        flex-direction: column;
        justify-content: center;
    }

    .employees-main-slider {
        width: 100%;
    }

    .header-anchors {
        display: none;
    }

    .dashboard-graph {
        justify-content: center;
    }

    .employees-main-painel-diary {
        padding: 1rem;
    }

    .diary-page {
        width: 100%;

        height: min(34rem, 90vh);

        padding: 2.5rem 2.5rem 2.5rem 3.5rem;
    }

    .diary-page::before {
        left: 1.5rem;
    }
}

@media (max-width: 500px) {
    .employees-main-painel-commands, .admins-main-painel-commands, .admins-main-painel-commands, .admins-main-painel-goals-commands, .dashboard-painel-commands {
        justify-content: start;
    }
    .home-main-header h3,
    .employees-main-header h3,
    .dashboard-name h3,
    .dashboard-goals-name h3,
    .admins-main-header h3,
    .admins-main-painel-header h3 {
        font-size: 1rem;
    }

    .employee-main-confirm-message div h3,
    .admin-main-confirm-message div h3 {
        font-size: 1rem;
    }

    .home-main p,
    .employee-name h3,
    .admin-name h3,
    .dashboard-header {
        font-size: 0.7rem;
    }

    .employee,
    .admin {
        flex: 0 0 10rem;
        height: 20rem;
        background: var(--background-color);
        border-radius: 0.5rem;
        scroll-snap-align: start;
    }

    .dashboard-content,
    .dashboard-header {
        flex-direction: column;
    }

    .employees-main-painel-header {
        flex-direction: column;
    }

    .employees-main-painel-diary {
        padding: 0.75rem;
        
    }

    .diary-page {
        width: 100%;
        padding: 2rem 1.5rem 1.5rem 2.5rem;
    }

    .diary-page::before {
        left: 1rem;
    }

    .diary-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 1.5rem;
    }

    .diary-date {
        font-size: 0.7rem;
    }

    .employees-main-painel-diary-title {
        font-size: 1.5rem;
    }

    .employees-main-painel-diary-description {
        margin-top: 1.25rem;
        font-size: 0.95rem;
        line-height: 1.8rem;
    }

    .diary-commands {
        margin-top: 1rem;
    }
}

@media (max-width: 300px) {
    .home-main-header h3,
    .employees-main-header h3,
    .employees-main-painel-name h3,
    .employees-main-painel-goals-name h3,
    .admins-main-header h3,
    .admins-main-painel-header h3 {
        font-size: 0.8rem;
    }
    .dashboard-period input {
        width: 10rem;
    }

    .diary-commands {
        margin-top: 1rem;
        flex-direction: column;
    }
}