@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
    font-family: 'android';
    src: url('/fontes/idroid.otf') format('opentype');
    font-weight: normal;
}

:root {
    --fonte-android: 'android', cursive;
}

        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0px;
            background-color: rgb(122, 247, 189);
        }


        header {
            margin: 0px 0px 0px;
            padding: 1px 1px 1px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.466);
            background-image: linear-gradient(to bottom, rgb(54, 209, 137), black)
        }

        header > h1 {
            font-family: "Bebas Neue", sans-serif;
            font-weight: normal;
            font-style: normal;
            font-size: 40px;
            text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.842);
            color: white;
            padding-top: 20px;
            margin: 1px 1px 1px;
            text-align: center;
        }

        header > p {
            margin: 21px 201px 22px;
            padding: 1px 1px 1px;
            color: white;
            text-shadow: 1px 1px 1px black;
            text-align: center;
        }

        nav {
            padding: 10px;
        }

        nav > a {
            border-radius: 5px;
            padding: 10px;
            text-decoration: none;
            color: lightgray;
            font-weight: bold;
            transition-duration: 0.5s;
        }

        nav > a:hover {
            background-color: rgb(2, 59, 2);
            color: rgb(0, 0, 0);
        }


        main {
            min-width: 320px;
            max-width: 800px;
            padding: 1px 15px 2px;
            margin: auto;
            margin-bottom: 30px;
            box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.644);
            background-color: white;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        main > img {
            width: 100%;
        }

        main a:hover {
            text-decoration: underline;
        }

        article > h2 {
            color: rgb(0, 107, 0);
            font-family: var(--fonte-android);
            font-size: 20px;
            font-weight: bold;
            background-image: linear-gradient(to right, rgba(144, 238, 144, 0.363), white)
        }

        article > p {
            text-align: justify;
            text-indent: 30px;
            line-height: 1em;
        }

        article > p > a {
            text-decoration: none;
            color: green;
            font-weight: bold;
            background-color: rgba(156, 235, 156, 0.651);
        }

        article > p > a:hover {
            text-decoration: underline;
        }

        article > h1 {
            color: rgb(0, 107, 0);
            font-family: var(--fonte-android);
            font-size: 25px;
            font-weight: bold;
        }

        aside {
            margin: 0px;
            background-color: rgb(122, 247, 189);
            border-radius: 8px;
            box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.425);
        }

        aside > h3 {
            margin: 2px 1px 1px;
            padding: 7px 11px 6px;
            border-radius: 8px 8px 0px 0px;
            color: white;
            background-color: green;
        }

        aside > p {
            padding: 0px 9px 6px;
            text-align: justify;
            text-indent: 30px;
        }

        aside > p > a {
            text-decoration: none;
            color: green;
            font-weight: bold;
            background-color: rgba(156, 235, 156, 0.651);
        }

        aside > p a::after {
            content: "🔗";
        }

        aside ul {
            list-style-type: '\2714\00A0';
            columns: 2;
        }

        footer {
            font-size: 0.8em;
            padding: 5px;
            margin: 0px 0px 0px;
            color: white;
            background-color: rgb(9, 39, 11);
        }

        footer > p {
            text-align: center;
            margin: 0px 0px 0px;
            padding: 1px 1px 1px;
        }

        footer a {
            color: white;
            font-weight: bolder;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
            color: rgb(54, 175, 125);
            transition-duration: 0.3s;
        }

        .video {
            background-color: rgb(15, 48, 28);
            margin: 0px -15px 30px -15px;
            padding: 20px;
            padding-bottom: 50%;

            position: relative;
        }

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

        .handdroid {
            display: block;
            margin: 20px auto; /* centraliza horizontalmente */
        }

        .mulher-observando {
            display: block;
            margin: 20px auto;            
        }

        .dandroids {
            display: block;
            margin: 20px auto;

        }
    
        .irina::after {
            content: "🔗";
        }