* {
    box-sizing: border-box;
    margin: 0;
    font-family: "Ubuntu", sans-serif;
    scroll-behavior: smooth;
}

::selection{
    background: violet;
}

header {
    padding: 1%;
    display: flex;
    flex-direction: row;
    margin-top: auto;
    margin-bottom: auto;
}

header button {display: none;}

header h1 { 
    font-size: 1.2rem;
    font-weight: 300;
    margin-top: auto;
    margin-bottom: auto;
    text-align: right;
    width: 100%;
    color: #330BE5;
    padding-right: 2%;
}

#imgBg {
    position: absolute;
    top: 0;
    z-index: -1;
    left: 0;
    width: 47%;
}
#imgBg img {
    border-bottom-right-radius: 51px;
    width: 100%;
    box-shadow: 0px 0px 11px rgb(163, 163, 163);
}

/* --- */

#banner{
    padding: 3%;
    display: flex;
    flex-direction: row;
}

#banner .relleno {
    width: 50%;
}

#banner article {
    margin: auto;
}

#banner .lineDivisor {
    width: 57%;
    height: 1px;
    background: black;
    margin-top: 13%;
    margin-bottom: 1%;
    margin-left: auto;
    margin-right: auto;
}

#banner p {
    font-size: .83rem;
    font-weight: 300;
    text-align: center;
    width: 71%;
    padding: 2%;
    margin: auto;
}

.redesSociales {
    display: flex;
    flex-direction: row;
    padding: 1%;
    margin-top: 5%;
}

.redesSociales svg {
    width: 100%;
    margin: auto;
}

.redesSociales a {
    text-decoration: none;
    color: black;
}

#homeMenu {
    margin-top: 17%;
}

#homeMenu ul {
    text-align: center;
    padding: 3%;
}

#homeMenu li {
    display: inline-block;
    width: 31%;
}

#homeMenu a {
    text-decoration: none;
    color: #4927E4;
}

#homeMenu a:hover, #novedades a:hover, #repositorios a:hover {
    color: black;
    transition: 800ms;
}

#cerrarMenu {display: none;}
#homeMenu h4 {display: none;}

/* --- */
.main {
    padding: 1%;
    margin-top: 5%;
}

/* novedades */

.frase {
    padding: 1%;
    margin-top: 11%;
}

.frase p, #sobreMi .frase p {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 400;
    font-style: italic;
    color: rgb(19, 19, 19);
    text-shadow: 0px 2px 6px #997093;
    
}

#novedades, #repositorios, #sobreMi {
    padding: 1%;
    margin-top: 7%;
    display: flex;
    flex-direction: row;
    width: 87%;
    margin-left: auto;
    margin-right: auto;
}

#novedades article,#repositorios article, #sobreMi article {
    width: 61%;
}

#novedades header, #repositorios header, #sobreMi header {
    padding: 1%;
    border-bottom: 1px solid #ffd3f9;
}

#novedades h2, #repositorios h2, #sobreMi h2 {
    font-size: 1rem;
    padding-left: 2%;
    color: #0E0242;
}

#novedades h4 {
    margin-top: 3%;
    padding-left: 5%;
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
}

#novedades p, #repositorios p, #sobreMi p {
    margin-top: 3%;
    padding-left: 5%;
    font-weight: 300;
    font-size: .83rem;
}

#novedades figure {
    width: 30%;
    margin: auto;
}

#novedades figure img {
    width: 392px;
    padding: 1%;
    margin-top: 13%;
}

#novedades a, #repositorios a {
    font-size: .90rem;
    text-decoration: none;
    color: blueviolet;
    margin-left: 80%;
}

.line {
    padding: .1%;
    background: #dbceff;
    margin-top: 7%;
    margin-bottom: 7%;
}


/* repositorios */

#repositorios a {
    margin-left: 3%;
}

#repositorios li {
    display: block;
    padding: 2%;
}

.otros figure {
  width: 100%;
  border: 1px solid #f1d1fd;
  border-radius: 11px;
  padding: 1%;
}

.otros img {
  width: 93%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/*  --- */

/*  separador */

#separadorImg{
    margin-top: 13%;
    margin-bottom: 13%;
}

#separadorImg figure {
  display: flex;
  flex-direction: row;
  width: 100%;
}

#separadorImg img {
    width: 23%;
}



/* ----  */

#sobreMi {
    position: relative;
}

footer {
    padding: 3%;
    background: #997093;
    text-align: center;
    font-size: .83rem;
}

#sobreMi figure {
    width: 357px;
    margin-top: 8%;
    margin-left: 5%;
}
#sobreMi img { 
    width: 100%;
    border-radius: 23px;
    box-shadow: 0px 0px 11px rgb(221, 217, 217);
}
#sobreMi p {text-align: center;}
#sobreMi p:nth-child(2) {
    margin-top: 17%;
}

#sobreMi .frase  { margin-top: 3%; }

#sobreMi ul {
    display: flex;
    padding: 2%;
    margin-top: 3%;
}

#sobreMi ul li {
    display: block;
    background: rgb(255, 195, 127);
    border-radius: 11px;
    margin: 2%;
    font-size: .87rem;
}