body{

    text-align: center;

    border: black 2px solid;

    border-radius: 0.8rem;

    font-family: 'Ubuntu', arial;

    background-color: rgb(36, 161, 130);


}

#articles {
    gap: 3px;
}

#all{

    background-color: rgb(223, 211, 211);

}


#codigo{
    text-align:left; 

}


img{
    text-align: center;
    justify-content: center;

}

p{
    font-size: 20px;
    font-family: 'Ubuntu', arial;
}

a{
    border: 2px solid black;

    border-radius: 0.8rem;

    box-sizing: border-box;

    padding: 0.5rem;

    line-height:3rem;

    margin: 2px;


}

a:hover{

    background-color:#F0FFFF;

}

h1{

    margin-bottom: 3rem;

    color: rgb(177, 174, 17);

}

audio {
    -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
    -moz-box-shadow: 2px 2px 4px 0px #006773;
    -webkit-box-shadow:  2px 2px 4px 0px #006773;
    box-shadow: 2px 2px 4px 0px #006773;
    -moz-border-radius:7px 7px 7px 7px ;
    -webkit-border-radius:7px 7px 7px 7px ;
    border-radius:7px 7px 7px 7px ;
}

audio:hover, audio:focus, audio:active {

-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);

}



@media (max-width: 900px) {


    a{

        display: block;
        line-height: 0.5rem;
        padding: 1rem;

    }  
    
    #img{
        text-align: right;
    }

}

@media (prefers-color-scheme: dark) {
    #all{

        background-color: rgb(90, 73, 73);
    
    }

    h1{
        color: white
    }

    p{
        color: white;
    }

    a{
        background-color: aqua;
    }

    h3{
        color: white;
    }

    strong {
        color: white; 
    }


}