@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Orbitron:wght@600;700;900&display=swap');



* {padding: 0; margin: 0; box-sizing: border-box;}



html {scroll-behavior: smooth;}



body {

    background: #0D1A23;

    background-image: url("../img/bg-body.jpg");

    background-position: top;

    background-size: cover;

    font-family: 'Orbitron', sans-serif;

    color: #fff;

}



:root {

    --white: #ffffff;

  }



a {

    text-decoration: none;

    color: #fff;

}



.subrayado-cian, .subrayado-magenta {margin: 0 0 15px -15px;}



h1{font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 3rem/*48pt*/; line-height: 3.125rem;}

h2{font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.875rem/*46pt*/;}

h3{font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.25rem/*20pt*/; color: #ff00ff;}

h4{font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2rem/*32pt*/;}

h5{font-family: 'Anonymous Pro', monospace; font-weight: 700; font-size: 2rem/*32pt*/; line-height: 2,25rem; letter-spacing: -0.1rem; margin: 0 0 15px 0;}

p, li {font-family: 'Anonymous Pro', monospace; font-weight: 400; font-size: 1rem; margin-bottom: 15px; line-height: 1.125rem; -webkit-font-smoothing: antialiased;}



.contenedor1080px{max-width: 1080px; margin: auto;}





header nav img {width: 30px; height: 30px;}



header nav li {

    font-family: 'Orbitron', sans-serif;

    font-weight: 900;

    font-size: 1rem;

    padding: 10px;

}



.logo {display: flex; align-items: center;}

.logo img {width: 190px; height: 30px;}



 header nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 100%;

    max-width: 1080px;

    margin: auto;

 }



header nav ul {

    display: flex;

    justify-content: center;

    gap: 1.4rem; 

}



.menu {

    display: block;

    cursor: pointer;

}



.nav-menu{

    padding: 1rem;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    position: fixed;

    right: -100%;

    top: 0;

    flex-direction: column;

    border-radius: 0px;

    text-align: center;

    transition: 0.3s;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.37);

    height: 100vh;

    min-width: 50%;

    background: url(../img/bg-0d1a23-90.png);

    background-repeat: repeat;

    padding-top: 60px;

}



.bar {

    display: block;

    border-radius: 20%;

    width: 25px;

    height: 3px;

    margin: 5px auto;

    -webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    background-color: var(--white);

}



.nav-menu.active {

    right: 0;

}



.menu.active .bar:nth-child(2) {

    opacity: 0;

}



.menu.active .bar:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

}



.menu.active .bar:nth-child(3) {

    transform: translateY(-8px) rotate(-45deg);

}



header {

    background: url(../img/bg-0d1a23-80.png);

    background-repeat: repeat;

    width: 100%;

    height: 75px;

    padding: 15px 2rem 0;

    position: fixed;

    z-index: 10;

    backdrop-filter: blur(0.5rem);

}



li {

    list-style: none;

    line-height: 1rem;

    margin-bottom: 5px;

}



.hero {

    display: block;

    padding: 10rem 2rem 2rem 2rem;

}



.hero p, .hero h5 {text-shadow: 1px 1px 10px #00000080, 1px 1px 5px #00000080;}



.contenido {

    display: block;

    background: url(../img/bg-0d1a23-90.png);

    background-repeat: repeat;

    padding: 5rem 2rem 2rem;

}



.lista {

    display: flex;

    flex-direction: column;

}

.item1, .item2, .item3 {

    width: 100%;

}





.video-responsive {

	height: 0;

	overflow: hidden;

	padding-bottom: 56.25%;

	padding-top: 0;

	position: relative;

}



.video-responsive iframe, .video-responsive object, .video-responsive embed {

    height: 100%;

    left: 0;

    position: absolute;

    top: 0rem;

    width: 100%;

/*     background: url(../img/bg-0d1a23-90.png);

    background-repeat: repeat;

    padding: 2rem; */

}



.contacto {

    display: block;

    padding: 6rem 2rem 2rem;

    width: 100%;

}



.contacto1 {

    align-items: center;

    display: flex;

    width: 100%;

    flex-wrap: wrap;

    justify-content: center;

    margin-top: -5px;

}



.contacto2 {

    align-items: center;

    display: flex;

    width: 100%;

    flex-wrap: wrap;

    justify-content: center;

}



.contacto-btn {

    align-items: center;

    background-image: url("../img/btn_contacto.png");

    background-position: 50%;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    color: #fff;

    display: flex;

    font-family: 'Orbitron', sans-serif;

    font-weight: 700;

    font-size: 1rem;

    letter-spacing: -0.025rem;

    justify-content: center;

    line-height: 1;

    position: relative;

    text-decoration: none;

    margin: 0px;

    width: 360px;

    height: 80px;

    max-width: 100%;

}



.contacto-btn img {

    margin-right: 0.5rem;

    width: 24px;

    height: 24px;

}



.biografia {

    display: block;

    background: url(../img/bg-0d1a23-90.png);

    background-repeat: repeat;

    padding: 6rem 2rem 5rem 2rem;

    width: 100%;

}



.bio {

    display: flex;

    flex-direction: column-reverse;

}



.img-bio {

    margin-bottom: 2rem;

    max-width: 100%;

}



.separador-cian1 {

    display: flex;

    flex: content;

    width: 100%;

    height: 45px;

    background-image: url(../img/separador-cian-small1.png);

    background-position: center;

    background-repeat: repeat-x;

    margin-top: -45px;

}



.separador-cian2 {

    display: flex;

    flex: content;

    width: 100%;

    height: 45px;

    background-image: url(../img/separador-cian-small2.png);

    background-position: center;

    background-repeat: repeat-x;

    margin-top: -45px;

}



.below-header {

    display: flex;

    flex: content;

    width: 100%;

    height: 25px;

    background-image: url(../img/below-header.png);

    background-position: center;

    background-repeat: repeat-x;

    margin-top: 75px;

    z-index: 10;

    position: fixed;

}



.separador-up {

    display: flex;

    flex: content;

    width: 100%;

    height: 40px;

    background-image: url(../img/separador-up.png);

    background-position: center;

    background-repeat: repeat-x;

    margin-top: 0px;

}



.separador-down {

    display: flex;

    flex: content;

    width: 100%;

    height: 25px;

    background-image: url(../img/separador-down.png);

    background-position: center;

    background-repeat: repeat-x;

    margin-top: 0px;

}



footer {    

    display: flex;

    width: 100%;

    min-height: 226px;

    justify-content: center;

    padding: 2rem;

    flex-wrap: wrap;

    align-items: center;

    align-content: space-around;

}



footer p{    

    margin: 0;

    text-align: center;

}



.rrss-footer nav a {

    margin: 10px;

}



/*Desktop*/



@media (min-width: 980px) {



    .menu {

        display: none;

    }



    .nav-menu{

        display: flex;

        align-items: center;

        padding: unset;

        justify-content: unset;

        position: unset;

        right: unset;

        top: unset;

        flex-direction: row;

        border-radius: unset;

        text-align: unset;

        transition: 0.3s;

        box-shadow: unset;

        height: unset;

        background: unset;

        background-repeat: repeat;

        padding-top: unset;  

    }



    header nav img {width: 20px; height: 20px;}

 

    .bio {

        display: flex;

        flex-direction: row;

    }



    .img-bio {

        margin-bottom: 2rem;

        max-width: 240px;

        max-height: 240px;

    }



    .descripcion-bio{

        margin-right: 2rem;

    }



    .separador-cian1 {

        background-image: url(../img/separador-cian-big1.png);

    }

    

    .separador-cian2 {

        background-image: url(../img/separador-cian-big2.png);

    }

    

    .lista {

        display: flex;

        flex-direction: row;

        justify-content: space-between;

    }

    .item1, .item2, .item3 {

        width: 32%;

    }



    footer {    

        justify-content: space-between;

        min-height: 160px;

        max-width: 1080px;

        margin: auto;  

    }

    

}