body{
        background-image: url(IMG/fondo.jpg);
        background-repeat: repeat;
}
*{
    margin: 0;
    padding: 0;
    --color1: #0cabf5;
    --color2: #dac4c496;
    --color3: #f54927;
    --color4: #f0eeec;
    --color5: #53AD4B;
    --color6: #2a65c7;
    --color7: #ebecf7;
    --color8: #ebf7ed;
}
#cabecera{
    margin: 1%;
    padding: 1px 80px 1px 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--color1);
}
#cabecera img{
    margin: 10px 10px 1px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
#cabecera h1{
    margin-right: 23px;
    background: white;
    text-shadow: 4px 8px 10px gray;
    font-family: Arial, Helvetica, sans-serif;
}
#desarrollador{
    display: flex;
    justify-content: end;
}
#desarrollador h4{
    margin: 10px 80px 20px 80px;
    width: 200px;
    background: white;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
}
h2{
    text-decoration: underline;
    margin: 10px 80px 10px 80px;
    font-family: Arial, Helvetica, sans-serif;
    
}
#texto {
    margin: 10px 80px 10px 80px;
    font-family: Arial, Helvetica, sans-serif;
}
#contenido1{
    margin: 20px 80px auto 80px;
    padding: 10px;
    border: 5px solid black;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cuadrante{
    width: 50%;
    border: 2px solid gray;
    margin: 5px;
    padding: 3px;
}
.cuadrante img{
    width: 130px;
    height: 200px;
    display: block;
    margin: 10px auto;
    padding: 10px;
    background: transparent;
}
.cuadrante h3{
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    padding: 8px;
    margin: 2px;
}
.cuadrante p{
    text-align: unset;
    padding: 8px;
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
}
.html{
    background: var(--color4);
}
.html h3{
    background: var(--color3);
}
.css h3{
    background: var(--color6);
}
.css{
    background: var(--color7);
}
.js{
    background: var(--color8);
}
.js h3{
    background: var(--color5);
}
mark{
    background: yellow;
}

#contenido2{
    margin: 10px 80px 10px 80px;
    padding: 10px;
    border: 5px solid black;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
i{
    background: transparent;
}
hr{
    border: 0;
    background-color: black;
    height: 2px;
    margin: auto 80px auto 80px;
}
#casa{
    width: 400px;
    height: 210px;
    display: flex;
    margin: auto;
    margin-bottom: 25px;
    box-shadow: 10px 10px 10px rgb(124, 119, 119);
}
#resumen{
    margin: 20px 80px 10px 80px;
}
#resumen h3{
    text-decoration: underline;
    margin-bottom: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}
#resumen p{
    font-family: Arial, Helvetica, sans-serif;
    background: white;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 2px 9px 10px black;
    margin-bottom: 50px;
}