@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.inicio{max-width: 700px;
margin: 2rem auto 2.5rem auto;
display: grid;
grid-template-columns: 22rem 22rem;
grid-template-rows: 15rem 1rem;
justify-content: space-between;}

body{text-align: center;}
body div nav li{display: inline-table;}

body div nav{background-color: #99fce2;
padding: 0.8rem 10rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
list-style-type: none;
margin-top: -0.5rem;
margin-left: 3rem;
margin-right: 3rem;
display: flex;
justify-content: center;}
body div nav li a{font-family: "Inconsolata", monospace;
font-size: 1.25rem;
color: #000000;
padding-inline: 5rem;
text-decoration: none;
text-align: center;
display: flex;
justify-content: center;}

body header{background-color: #AF76F7;
font-family: "Inconsolata", monospace;
width: fit-content;
margin: 2rem;
text-align: center;
margin-left: auto;
margin-right: auto;}
body header h3{color: rgba(255, 255, 255, 0.5);
text-align: center;
padding: 0;}

body h1{color: #AF76F7;
font-family: "Roboto", sans-serif;
margin: 5rem;
text-align: center;}

div img {height: 250px;
border-radius: 30rem;
filter: grayscale(100%);
box-shadow: #AF76F7 0 0 1.25rem 0.125rem;
margin-left: auto;
margin-right: auto;}

body h4{background-color: #ffffff;
color: #000000;
font-family: "Roboto", sans-serif;
width: fit-content;
height: fit-content;
padding: 0.2rem;
display: block;
margin-top: -5rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;}

main section article{display: inline-table;}

body main section article h3{ background-color: #af76f7;
color: white;
font-family: "Roboto", sans-serif;
font-size: 1.063rem;
width: fit-content;
text-align: center;
padding: 0.5rem;
border-radius: 0.5rem;
display: block;
margin-left: auto;
margin-right: auto;}

main section article ul li{color: #99fce278; 
list-style-type: none;
font-family: "Roboto", sans-serif;
font-size: 0.875rem;
text-align: left;
width: auto;
}

main section article{background-color: #000000;
height: 15.625rem;
border-bottom-color: #ffffff;
border-bottom-style: dotted;
border-bottom-width: 0.1rem;
width: 18.75rem;
margin: 1.5rem;
justify-content: space-between;}

body {background-color: black;}

p{color: #ffffff;
font-family: "Roboto", sans-serif;
font-size: 0.875rem;
text-align: center;}

main article nav ul {
margin-right: 1rem;
margin-left: -1rem;}
main article nav ul li{display: inline-table;
justify-content: space-between;
transition: filter 1s, transform 1s;}
main article nav ul li p{background-color: #000000;
height: 13.5rem;
width: 12.5rem;
margin: 2.5rem;
padding: 1.5rem;
border-color: #AF76F7;
border-width: 0.08rem;
border-bottom-width: 0.5rem;
border-style: solid;
border-radius: 1rem;
justify-content: space-between;}
main article nav ul li p a{
background-color: none; 
color: #ffffff;
font-family: "Inconsolata", monospace;
font-size: 0.938rem;
text-align: center;
margin: auto;
text-decoration: none;}

nav ul {list-style-type: none;}

nav ul img {filter: grayscale(100%);
height: 9.375rem;
margin-top: 1rem;
margin-bottom: 1rem;
margin-left: auto;
margin-right: auto;
border-radius: 1rem;
box-shadow: #ffffff 0 0 0.938rem 0.063rem;
transition: filter 0.5s, transform 0.5s;}

main article nav p a {
font-family: "Inconsolata", monospace;
color: #AF76F7;
font-size: 1rem;
margin-top: -0.938rem;
margin-bottom: 2.5rem;}

footer {background-color: rgb(153, 252, 226);
font-family: "Roboto", sans-serif;
color: #000000;
margin: 2rem;
margin-top: 5rem;
border-radius: 1rem;
padding: 2rem;
justify-content: space-between;
display: inline-table;}
footer main section article{background-color: #99fce2;
font-family: "Roboto", sans-serif;
border-bottom-style: none;
text-align: left;
justify-content: space-between;
padding-inline: 1rem;
margin-left: 0;
margin: auto;}
footer main section article h4{background-color: #99fce2;width: auto;
color: #000000;
text-align: left;
justify-content: space-between;
margin-left: 0;
margin: auto;}
footer main section article p{color: #000000;
text-align: left;
justify-content: space-between;}

footer a img {height: 3.688rem;
margin-left: auto;
margin-right: auto;
padding: 1.875rem;
margin-top: -1rem;
margin-bottom: 5rem;
padding-inline: 3rem;
display: inline-table;
align-items: center;
filter: brightness(0);
}


.bajada1{background-color:rgb(176, 118, 247); 
color: black; 
font-family: "Inconsolata", monospace;
font-size: 0.8rem;
margin: -2rem;
padding: 1rem;}

.destacado1 {
background-color: #ffffff;
margin: auto;
width: fit-content;}

.alineacion1 {text-align: center;}
.botonera1{background-color: #99fce2;
border: none;
text-decoration: none;}
.botonera1:hover{background-color: #AF76F7;
color: #ffffff;
transition: color 0.5s;
border-radius: 1rem;
transition: background-color 0.5s;}

.botonera2:hover{
border-color: #99fce2;
transition: 0.5s;
box-shadow: #99fce2 0 0 0.938rem 0.063rem;
transform: scale(105%);}
.imagenes2:hover{filter: none;
transition: filter 0.3s transform 0.5s;
transform: scale(105%);}

.imagen1:hover{filter: none;
transform: scale(1.1);
transition: filter 0.5s, transform 0.5s;}


/* Texto deshabilitado

* {margin: 0;
padding: 0;}

px para imagen
rem unidad de pantalla
1 rem: medida natural fuente tipográfica predeterminada (aprox. 16px)

Etique id y etiqueta class: identificar 

border-radius: 6rem 2rem 4rem 8rem;} bordes impares
nav ul {list-style-type: none;} se elimina la viñeta pero no el listado

selector universal: todo tiene margen y padding
predeterminado a todo lo que no esté indicado

regla combinada: hoja de estilo en cascada
para agrupar:
header, section, footer {width: 60rem;
margin: auto}


main article nav a{color: #AF76F7;
    font-family: "Inconsolata", monospace;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.125rem;}



footer main section h2{font-family: "Roboto", sans-serif;
color: #000000;
padding: 2rem;
text-align: left;}
footer main section article h4{;
font-family: "Roboto", sans-serif;
text-align: left;
color: #000000;}
footer main section article p{background-color: #99fce2;ç

body main section article{display: inline-table;
    color: #000000;
    font-family: "Roboto", sans-serif;
    text-align: left;
    padding: 1rem;
    width: auto;}

footer main section h2{background-color: rgb(153, 252, 226);
    font-family: "Roboto", sans-serif;
    color: #000000;
text-align: left;}
footer main section article h4{background-color: rgb(153, 252, 226);
    font-family: "Roboto", sans-serif;
    color: #000000;
text-align: left;}
footer main section article p{background-color: rgb(153, 252, 226);
    font-family: "Roboto", sans-serif;
    color: #000000;
text-align: left;
    
.inicio{display: flex;}
.columna1{width: auto;}
.columna2{width: auto;}
*/