@charset "UTF-8";

@font-face {
    font-family: "Bebas Neue";
    src: url(./fontes/bebas_neue/BebasNeue-Regular.otf),
        url(./fontes/bebas_neue/BebasNeue-Regular.ttf);
}

@font-face {
    font-family: "Idroid";
    src: url(./fontes/idroid.otf);
}

/* Uso de variáveis incompleto (não integral no documento inteiro) porque somente para aprendizagem */
:root {
    --cor0: white;
    --cor-titulos-principal: #295536;
    --fonte-titulos-principal: "Idroid";
    --cor1: #98d8b0;

}

body {
    margin: 0;
    background-color: var(--cor1);
}

.main-header {
    background-image: linear-gradient(to top, #20412a, #6acc87);
    color: var(--cor0);
    box-shadow: 0px 4px 10px rgba(20, 37, 24, 0.651);

}

.main-header>h1 {
    font-family: "Bebas Neue";
    text-transform: uppercase;
    font-weight: 400;
    font-size: 3em;
    margin: 0px;
    text-align: center;
    padding: 0.5em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.534);
}

.main-header>p {
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.534);
    text-align: center;
    display: block;
    max-width: 400px; /*Alterei para max-width para se tornar responsivo/adaptativo abaixo de 400px*/
    margin: 0px auto;
}

.main-header>nav {
    padding: 10px;
}

.main-header>nav>a {
    text-decoration: none;
    color: var(--cor1);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    transition-duration: 0.2s;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 12px;
}

.main-header>nav>a:hover{
    background-color: #73e09479;
    color: #20412a;
    border-radius: 12px;
    padding: 10px 20px; 
}

main {
    background-color: var(--cor0);
    display: block;
    max-width: 800px;
    margin: 0px auto;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 0px 0px 1em 1em;
    padding-bottom: 1em;
    margin-bottom: 1em;
    box-shadow: 0px 0px 10px rgba(20, 37, 24, 0.651); 
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.651); /*Esta sombra suprime a anterior. Não tem como colocar as duas*/
}

main p {
    padding: 0px 10px;
    text-indent: 20px;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.principal {
    margin: 0px;
    padding: 0px;
}

.principal-article {
    padding: 0px 20px;
}

.principal-article>h1,
h2 {
    font-family: var(--fonte-titulos-principal);
    color: var(--cor-titulos-principal);
    margin: 0px;
    padding: 1em;
}

.principal-article>h1 {
    padding: 0px;
    padding-top: 1em;
}

.principal-article>h2 {
    background-image: linear-gradient(to right, #cce7d7, var(--cor0));
    padding: 0px 10px;
}

/* .principal-article > p {
    padding: 0px 10px;
    text-indent: 20px;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
} */

.principal-article > picture > img {
    display: block;
    margin: 0px auto;
    width: 100%;
    /*Prefiro esse tipo de responsividade do que a que o Guanabara colocou. Mas vou colocar também a dele (que está no HTML), com imagens em tamanhos diferentes conforme o tamanho da tela*/
}

#bugdroid-img{
    max-width: 500px;
}

.principal a {
    color: #2c583a;
    text-decoration: none;

}

.principal a::after {
    content: ' \1F517';
    /*U+1F517*/

    /* Colocado para o content não ficar sublinhado no hover */
    display: inline-block;
    margin-left: -1em;
}

/*Adicionado após ver o vídeo do Cap. 10*/
.principal a:hover{
    text-decoration: underline;
}

.principal strong {
    color: #2c583a;
}

.video-android {
    background-color: #295536;
    padding: 20px 20px;
    margin: 0px -20px;
}

iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* mantém a proporção 16:9 */
}

.extra-article {
    margin: 10px 20px;
    border-radius: 1em;
    background-color: #c5ebd6;
    padding-bottom: 1em;
}

.extra-header {
    background-color: #519e68;
    color: var(--cor0);
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 1em 1em 0px 0px;
}

.extra-header h1 {
    font-size: 1em;
    font-weight: bold;
    padding: 10px;
}

.extra-article ul{
    columns: 2; /*Divide em colunas*/
}

.extra-article li {
    list-style: '\2714\00A0\00A0';
    /*U+2714*/
}

.extra-article li span {
    text-decoration: underline;
}

.div-sombra {
    height: 2675px;
    max-width: 800px;
    background-color: rgb(255, 255, 255);; /* Usei rgb(236, 76, 76); para ajustar. Porém, para evitar potenciais falhas estranhas, deixo white.*/
    border-radius: 0px 0px 1em 1em;
    z-index: -1; /*Joga para trás a div, pois quero manter somente a sombra dela para parecer ser do main.*/
    position: relative; /*Necessário um position diferente de static para o z-index funcionar*/
    margin-top: -2750px; /*2750*/
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.651);
}

#p-final {
    padding: 0px 30px;
}

footer {
    background-color: #1a5c38;
    text-align: center;
    color: var(--cor0);
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    box-shadow: 0px -0.5px 0.5px rgba(0, 0, 0, 0.400);
}

footer a {
    text-decoration: none;
    color: var(--cor0);
}

footer a:hover {
    text-decoration: underline;
    color: var(--cor1);
}

@media screen and (max-width: 510px) {
  /* Estilos para telas menores que 510px */

/* Uso de flexbox abaixo */
.main-header>nav {
    display: flex;
    flex-direction: column;
}

.main-header>nav>a {
    padding: 10px;
}

.main-header>nav>a:hover{
    padding: 10px;
}
}

@media screen and (max-width: 360px) {
  /* Estilos para telas menores que 360px */
  /* Essa configuração irá manter/incluir o que for até o media superior (510px) sem necessitar reescrever */

.extra-article ul{
    columns: 1;
}
}