@charset "UTF-8" ;
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'IDroid';
    src: url('../site-android/fonts/IDroid.otf')format(opentype);
}


    :root {
            --cor0: #c5ebd6;
            --cor1: #82E1AD;
            --cor2: #3DDC84;
            --cor3: #2FA866;
            --cor4: #1A5C37;
            --cor5: #063d1e;
            --cordefundo: #EBE5C5;
            --font0: Arial,Helvetica,sans-serif;
            --font1: 'Bebas Neue', cursive;
            --font2: 'IDroid', sans-serif;
    }

    *{
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
        font-family: var(--font0);
        line-height: 1.2em;

    }

    body {
        background-color: var(--cordefundo);

    }

    header {
        background-image: linear-gradient(to bottom, var(--cor3),var(--cor5) 80% ); 
        box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.507);
        max-width: 100vw ;
        min-width: 300px;
        height: 30% ;
      padding: 30px;
    }

    .topo {
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
        color:white;
        max-width: 700px;
        min-width: 300px;
        height: 80%;
        padding: 10px;
        margin: 0px auto;
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.507);
    }

    .topo > h1 {
        display: flex;
        align-items: center;
        text-align: center;
        font-weight: 400;
        font-family: var(--font1);
        height: auto;
        margin: auto opx;
        font-size: 3em;
    }

    .topo > p {
        display: flex;
        align-items: center;
        text-align: center;
        height: auto;
        margin: 20px auto;
        font-size: 1.2em; 
    }

    nav  {
        display: flex;
        align-items: center;
        justify-content:flex-start ;
        max-width: 100vw;
        min-width: 300px;
        height: 20%;
    
    }

    nav #menu {
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
        margin: 0px 10px;
       
    }

    nav #menu li {
        list-style-type: none;
        }

    nav #menu li a {
        display: flex;
        text-align: center;
        color: var(--cor1);
        font-weight: bold;
        text-decoration: none;
        padding: 10px;
        margin: 2px;
    }

    nav #menu li a:hover{
        background-color: var(--cor3);
        color: var(--cor5);
        border-radius: 6px ;
        transition-duration: var(--cor0),0.5s;

    }

        main {
        background-color: white;
        padding:20px;
        margin: auto;
        border-radius: 0px 0px 0px 10px;
        box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.089);
        max-width: 1050px;
        min-width: 300px;
        height: 65%;
    }

        span {
            font-weight: bold ;
            color: var(--cor4);
        }

    main  h1 {
        display: flex;
        justify-content: flex-start;
        font-family: var(--font2);
        color:var(--cor5) ;
        font-weight: 400;
        font-size: 1.8em;
        text-align:center;
        text-indent: 0.7em;
        margin-bottom: 10px;
    }

    main h2 {
       display: flex;
       justify-content: flex-start;
       font-family: var(--font2);
       font-size: 1.4em;
       font-weight: 300;
       color: var(--cor4);
       text-align: center;
       text-indent: 0.7em;
       margin-bottom: 10px;
       background-image: linear-gradient(to right,var(--cor1),rgba(250, 252, 250, 0.253));
    }

    main p {
       margin: 15px 0px;
        text-indent: 20px;
        text-align: justify;
        line-height: 2em;
    }

     .links {
        background-color:var(--cor1);
        color: var(--cor5); 
        text-decoration: none; 
        font-weight: bold;
        padding: 2px 6px ;
    }

    .links::after {
        content: '\0020\1f517';
    }

    .links:hover {
        text-decoration: underline;
        color: var(--cor5);
    }

    .imagens {
        display: flex;
      justify-content: center;
    }

    .imagens img {
        width: 100%;
        height: auto;
    }

    .bugdroid {
        display: flex;
        justify-content: center;
    }

    .video {
        position: relative;
        background-color: var(--cor4);
        height: 0px;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 15px;
        padding-bottom: 59%;
    }

    .video > iframe {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
    }

    aside {
        box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.322);
        border-radius: 10px 10px;
        background-color: var(--cor1);
        padding: 0px 10px;
    }

    aside > h3 {
        background-color:var(--cor4);
        color: white;
        border-radius: 10px 10px 0px 0px;
        margin: -10px;
        padding: 10px;
    }

    .versoesandroid {
        list-style-type: '\2714\0020\0020';
        columns: 2;
        list-style-position: inside;
        

    }
    
    aside p .links {
        background-color:var(--cor3) ;    
    }

    footer {
        background-color: var(--cor4);
        color: white;
        text-align: center;
        padding: 5px;
        max-width: 100vw;
        min-width: 300px;
    }

    .link-footer {
        color: white;
        text-decoration: none;
        font-weight: bold;

    }

    .link-footer:hover {
        text-decoration: underline;
        color: var(--cor1);

    }