@charset "UTF-8";
    @font-face {
        font-family: 'android';
        src: url('fonts/Space-Androids.otf') format('opentype');
        font-weight: normal;
    }
    @font-face {
        font-family: 'idroid';
        src: url('fonts/idroid.otf') format('opentype');
        font-weight: normal;
    }
    
    :root {
        --verde-claro: rgb(210, 255, 200);
        --verde-forte: rgb(136, 220, 115);
        --verde-medio: rgb(13, 160, 13);
        --verde-escuro: rgb(10, 87, 10);
        --verde-profundo: rgb(17, 63, 17);
        --verde-cinza: rgba(68, 83, 68, 0.221);
        --dark: rgb(25, 25, 25);
        --branco-suave: rgb(233, 241, 232);
        --font-padrao: 'Orbitron', sans-serif;
        --font-padrao2: 'Exo 2', sans-serif;
        --font-android: 'android', sans-serif;
        --font-idroid: 'idroid';
    
    }
    
    * {
        margin: 0px;
        padding: 0px;
    }
    
    body {
        background-color: var(--verde-claro);
    }
    a.externo::after {
        content: '\0020\1F517';
    }
    /* Reset e configurações base */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        height: 100%;
    }

    body {
        background-color: var(--verde-claro);
        min-height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    main {
        background-color: var(--branco-suave);
        width: 100%;
        max-width: 800px;
        min-width: 300px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.515);
        flex: 1 0 auto;
        margin-bottom: 20px;
    }

    header {
        background-image: linear-gradient(to bottom, var(--verde-escuro), var(--verde-profundo));
        min-height: 140px;
        text-align: center;
    
    }
    
    header > h1 {
        color: var(--branco-suave);
        font-family: var(--font-android);
        font-weight: normal;
        font-size:40px;
        letter-spacing: 2px;
        padding-top: 20px;
        margin-bottom: 10px;
        font-size: 3em;
        text-shadow: 2px 3px 5px  rgba(0, 0, 0, 0.663);
    }
    
    header p {
        font-family: var(--font-padrao2);
        color: var(--branco-suave);
        font-weight: bolder;
        font-size: 1.030em;
        max-width: 600px;
        margin: auto;
        padding-right: 8px;
        padding-left: 8px;
        padding-bottom: 20px;
        text-shadow: 2px 3px 5px  rgba(0, 0, 0, 0.600) ;
    }
    
    nav {
        background-color:var(--verde-escuro);
        padding: 1px;
        box-shadow:0px 5px 10px rgba(0, 0, 0, 0.651);
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    
    nav> a {
        color: var(--verde-claro);
        padding: 12px;
        text-decoration: none;
        font-weight: bolder;
        border-radius: 8px;
        transition-duration: 0.7s;
    }
    nav > a:hover {
        background-color: rgb(3, 156, 3);
        color: rgb(242, 255, 0);
    }
    main {
        background-color: var(--branco-suave);
        min-width: 300px;
        max-width: 800px;
        padding: 30px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin: auto;
        margin-bottom: 25px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.515);
        flex: 1 0 auto;
    }
    
    main h1 {
        color: var(--verde-escuro);
        font-family: var(--font-idroid);
        text-align: center;
    }
    main h2 {
        color: var(--verde-medio);
        font-weight: normal;
        font-size: 1.6em;
        font-family: var(--font-idroid);
        background-image: linear-gradient(to right, var(--verde-forte), transparent);
        padding: 10px 0;
        margin: 10px 0;
    }
    main p {
        font-family: var(--font-padrao2);
        color: var(--verde-profundo);
        margin: 12px 0px;
        text-indent: 20px;
        text-align: justify;
        font-weight: bolder;
        font-size: 1.03em;
        line-height: 1.7em;
    
    }
    
    main img {
        width: 100%;
        border-radius: 10px;
        margin-top: 20px;
        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.237);
    }
    main img.menor {
        max-width: 300px;
        display: block;
        margin: auto;
    }
    figcaption {
        text-align: center;
        padding: 12px;
    }
    
    div.video {
        position: relative;
        width: 100%;
        max-width: 800px;
        background-color: var(--verde-profundo);
        padding: 30px 0;
        display: flex;
        justify-content: center;
        border-radius: 10px;
        margin: 20px auto;
    }
    div.video iframe {
        width: calc(100% - 60px);
        max-width: 800px;
        aspect-ratio: 16/9;
        border: 4px solid transparent;
        border-radius: 10px;
        border-image: linear-gradient(135deg, #ff0000, #ff9900, #00ff00, #00ccff, #9900ff) 1;
        box-sizing: border-box;
    }
    div.video iframe:fullscreen,
    div.video iframe:-webkit-full-screen,
    div.video iframe:-moz-full-screen,
    div.video iframe:-ms-fullscreen {
        width: 100%;
        height: 100%;
        border-radius: 0;
        background: none;
        position: static;
    }
    
    main strong {
        font-weight: bolder;
        background: linear-gradient(135deg, #17e071, #24dd77, #16c966);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    main a {
        text-decoration: none;
        font-weight: bolder;
        color: #2FA866;
        padding: 2px 4px;
        border-radius: 8px;
        background: rgba(63, 224, 130, 0.15);
        transition: all 0.3s ease;
    }
    main a:hover {
        background: linear-gradient(135deg, #83E1AD, #3DDC84, #2FA866);
        color: #fff;
        text-decoration: underline;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        border-radius: 8px;
    }
    main a.active-link {
        background: linear-gradient(135deg, #83E1AD, #3DDC84, #2FA866);
        color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    .google {
        font-weight: bolder;
        background: linear-gradient(
            90deg,
            #4285F4 0%,
            #EA4335 25%,
            #FBBC05 45%,
            #34A853 65%,
            #4285F4 85%,
            #EA4335 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .android {
        font-weight: bolder;
        background: linear-gradient(135deg, #00cc44, #00b33c, #009933, #00e673, #00cc66);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: background-color 0.5s ease;
    }
    
    
    aside {
    background-color: #c5f3c5;
    border-radius: 6px;
    padding: 18px;
    box-shadow:1px 2px 8px rgba(0, 0, 0, 0.598);
    border: 3px solid #00ff0064;
    }
    aside h3 {
        background-color: var(--verde-profundo);
        font-size: 1.35em;
        font-family: var(--font-idroid);
        font-weight: normal;
        color: rgba(255, 255, 255, 0.985);
        padding: 6px;
        margin: -18px -18px 0px -18px;
        border-radius: 5px 5px 0px 0px;
    }
    aside > ul {
        list-style: none;
        padding: 10px 14px;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 10px;
    }
    aside > ul li {
        background: linear-gradient(135deg, #83E1AD, #3DDC84, #2FA866);
        color: #043d1a;
        font-weight: 600;
        padding: 8px 10px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    aside > ul li::before {
        content: "🤖";
        margin-right: 10px;
        font-size: 18px;
    }
    aside > ul li:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(63, 220, 132, 0.4);
        background: linear-gradient(135deg, #99f2b8, #4cff95, #1a8c57);
    }
    aside > ul abbr {
        text-decoration: none;
        font-weight: bold;
        color: #043d1a;
        cursor: help;
    }
    
    
    footer {
    background-color: var(--verde-profundo);
    color: var(--branco-suave);
    text-align: center;
    font-size: 1em;
    padding: 15px;
    width: 100%;
    }


    footer a {
        color: rgb(196, 255, 3);
        font-weight: bolder;
        text-decoration: none;
    
    }
    footer a:hover {
        color: #00ff00;
        text-decoration: underline;
    }
    @media screen and (max-width: 480px) {
        main {
            margin: 10px;
            padding: 15px;
            border-radius: 8px;
        }

        footer {
            font-size: 0.9em;
            padding: 10px;
        }
}    /* Modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.9);
        backdrop-filter: blur(6px);
        overflow: hidden;
    }
    .modal-content {
        margin: auto;
        display: block;
        width: 90%;
        max-width: 1000px;
        max-height: 90vh;
        object-fit: contain;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border: 2px solid #0a570a;
        border-radius: 12px;
        box-shadow: 0 0 25px rgba(210,255,200,0.4);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .modal-content:hover {
        transform: translateY(-50%) scale(1.02);
        box-shadow: 0 0 35px rgba(210,255,200,0.5);
    }
    .modal .close {
        position: absolute;
        top: 15px;
        right: 15px;
        color: #0a570a;
        font-size: 36px;
        font-weight: bold;
        cursor: pointer;
        width: 45px;
        height: 45px;
        background: rgba(2, 67, 6, 0.428);
        border: 2px solid #0a570a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(210,255,200,0.3);
    }
    .modal .close:hover {
        color: #d2ffc8;
        background: rgba(0,255,0,0.3);
        transform: rotate(90deg);
        box-shadow: 0 0 15px rgba(210,255,200,0.5);
    }
    div.botao {
        padding: 10px;
        text-align: center;
        font-size: 26px;

    }
    @media screen and (max-width: 480px) {
    
        /* Header */
        header {
            min-height: 100px;
            padding: 10px;
        }
        header h1 {
            font-size: 2em;
            padding-top: 10px;
        }
        header p {
            font-size: 0.9em;
            max-width: 90%;
            margin: auto;
        }
    
        /* Vídeo */
        div.video {
            padding: 20px 0;
        }
        div.video iframe {
            width: calc(100% - 40px);
            max-width: 100%;
            border-radius: 8px;
        }
    
        /* Navbar */
        nav {
            flex-wrap: nowrap;
            justify-content: space-around;
            padding: 5px;
        }
        nav > a {
            padding: 6px 8px;
            font-size: 0.85em;
            white-space: nowrap;
        }
    
        /* Main */
        main {
            padding: 15px;
            margin: 0 10px 15px 10px;
            min-width: auto;
            max-width: calc(100% - 20px);
            border-radius: 8px;
        }
        main h1 {
            font-size: 1.8em;
        }
        main h2 {
            font-size: 1.3em;
            margin: 10px 0;
        }
        main p {
            font-size: 0.95em;
            text-indent: 15px;
            line-height: 1.5em;
        }
        main img {
            width: 100%;
            border-radius: 8px;
            margin-top: 15px;
        }
    
        /* Aside */
        aside {
            padding: 12px;
            border-radius: 6px;
        }
        aside h3 {
            font-size: 1.1em;
            padding: 4px;
        }
        aside > ul {
            grid-template-columns: 1fr;
            gap: 8px;
            padding: 8px;
        }
        aside > ul li {
            flex-wrap: wrap;
            justify-content: flex-start;
            font-size: 0.9em;
            padding: 6px 8px;
            min-width: 0;
            overflow: hidden;
        }
        aside > ul li::before {
            margin-bottom: 4px;
        }
        aside > ul li span {
            white-space: normal;
            overflow-wrap: break-word;
        }
    
        /* Footer */
        footer {
            font-size: 0.9em;
            padding: 6px;
        }
    }

/* Tooltip customizado para mobile */
    .tooltip {
      position: fixed;
      left: 50%;
      bottom: 80px;
      transform: translateX(-50%);
      background-color: rgba(0, 50, 0, 0.95);
      color: #c5f3c5;
      font-family: var(--font-padrao2);
      font-size: 1em;
      padding: 12px 18px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.5);
      z-index: 99999;
      text-align: center;
      max-width: 80%;
      line-height: 1.4em;
      animation: fadeIn 0.25s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateX(-50%) translateY(10px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }