@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Holtwood+One+SC&family=Italianno&family=Montserrat&family=Shrikhand&display=swap');

* {
    margin: 0%;
    padding: 0%;
}
/************
    Loader
************/

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
  }
  .loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #242f3f;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
  }
  .loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
  }
  
  @keyframes loader {
    0% { transform: rotate(0deg);}
    25% { transform: rotate(180deg);}
    50% { transform: rotate(180deg);}
    75% { transform: rotate(360deg);}
    100% { transform: rotate(360deg);}
  }
  
  @keyframes loader-inner {
    0% { height: 0%;}
    25% { height: 0%;}
    50% { height: 100%;}
    75% { height: 100%;}
    100% { height: 0%;}
  }


/****************
    Header + Nav
*****************/
.h1__section{
    font-family: 'Italianno', cursive;
    font-size: 4em;
}

header {
    padding: 1em 0;
    margin-bottom: 1em;
    background: #05282b;
}

.navvv {
    display: flex;
    justify-content: space-between;
}

.nav__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.nav__link--button {
    padding: .25em 1em;
    background: #fff;
    color: black;
    border: 3px solid grey;
    font-size: large;
}


.nav__item {
    margin-right: 1em;
}

li{
    cursor: pointer;
}

button{
    cursor: pointer;
}

.nav__link:hover {
    opacity: .9;
    text-decoration: none;
    color: black;
}


/*********************
    Asides + Section
*********************/



.principal {
   /* font-family: 'Montserrat', sans-serif;*/
    width: 42em;
    padding: 4em;
    padding-bottom: 10.5em;
    background-color: black;
    /*background: rgb(236,218,218);*/
    /*background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 15%, rgba(8,2,0,1) 30%, rgba(5,2,0,1) 100%);*/
    color: #fff;
    animation-name: bg-animation;
    animation-duration: 60s;
    animation-iteration-count: 1; /*no tiene porque ser infinite no?*/
    /*animation-direction: alternate;*/
    /*animation: bg-animation 5s infinite alternate;*/
}

/* pestañea mas, creo que por lo detallado del % ya que con tiempo rapido no lo hace
comente el linear gradient original porque sino lo carga de un
el alternate queda genial
lo unico que faltaria es que se vea un toquecin mas fluido, pero lo bien
*/
@keyframes bg-animation {
    0%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 15%, rgba(8,2,0,1) 30%, rgba(5,2,0,1) 100%);
    }
    5%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 14%, rgba(8,2,0,1) 29%, rgba(5,2,0,1) 100%);
    }
    10%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 13%, rgba(8,2,0,1) 28%, rgba(5,2,0,1) 100%);
    }
    15%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 12%, rgba(8,2,0,1) 27%, rgba(5,2,0,1) 100%);
    }
    20%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 11%, rgba(8,2,0,1) 26%, rgba(5,2,0,1) 100%);
    }
    25%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 10%, rgba(8,2,0,1) 25%, rgba(5,2,0,1) 100%);
    }
    30%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 9%, rgba(8,2,0,1) 24%, rgba(5,2,0,1) 100%);
    }
    35%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 8%, rgba(8,2,0,1) 23%, rgba(5,2,0,1) 100%);
    }
    40%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 7%, rgba(8,2,0,1) 22%, rgba(5,2,0,1) 100%);
    }
    45%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 6%, rgba(8,2,0,1) 21%, rgba(5,2,0,1) 100%);
    }
    50%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 5%, rgba(8,2,0,1) 20%, rgba(5,2,0,1) 100%);
    }
    55%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 4%, rgba(8,2,0,1) 19%, rgba(5,2,0,1) 100%);
    }
    60%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 3%, rgba(8,2,0,1) 18%, rgba(5,2,0,1) 100%);
    }
    65%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 2%, rgba(8,2,0,1) 17%, rgba(5,2,0,1) 100%);
    }
    70%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 1%, rgba(8,2,0,1) 16%, rgba(5,2,0,1) 100%);
    }
    75%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 0.9%, rgba(8,2,0,1) 15%, rgba(5,2,0,1) 100%);
    }
    80%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 0.7%, rgba(8,2,0,1) 14%, rgba(5,2,0,1) 100%);
    }
    85%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 0.5%, rgba(8,2,0,1) 13%, rgba(5,2,0,1) 100%);
    }
    90%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 0.3%, rgba(8,2,0,1) 12%, rgba(5,2,0,1) 100%);
    }
    95%
    {
        background: linear-gradient(97deg, rgba(236,218,218,1) 0%, rgba(115,91,85,1) 0%, rgba(8,2,0,1) 10%, rgba(5,2,0,1) 100%);
    }
    100%
    {
        background: linear-gradient(none);
    }
  }  


.left {
    width: 100%;
    padding-bottom: 21em;
    color: #fff;
    background: rgb(255,255,255);
    background: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(223,209,206,1) 33%, rgba(215,201,198,1) 53%, rgba(181,168,159,1) 81%);
    /* background: rgb(255,255,255);
    background: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(223,209,206,1) 33%, rgba(215,201,198,1) 53%, rgba(97,88,82,1) 81%); */
    padding: 2em;
}
/*esto solo alarga el aside left del desktop*/
#left-aside-bottom{
    margin-top: 30.5em;
}

.rigth {
    width: 100%;
    padding: 2em;
    padding-bottom: 4em;
    color: #fff;
    background: rgb(9,9,9);
    background: linear-gradient(95deg, rgba(9,9,9,1) 0%, rgba(0,0,0,1) 61%, rgba(110,96,86,1) 85%, rgba(149,138,133,1) 100%);
    /*background: rgb(9,9,9);
    background: linear-gradient(100deg, rgba(9,9,9,1) 0%, rgba(0,0,0,1) 52%, rgba(110,96,86,1) 71%, rgba(149,138,133,1) 90%);
    background: rgb(9,9,9);
    background: linear-gradient(100deg, rgba(9,9,9,1) 0%, rgba(8,8,8,1) 52%, rgba(110,96,86,1) 71%, rgba(255,253,252,1) 90%);
    */
}

.btn-circle.btn-xl {
    width: 6em;
    height: 6em;
    padding: 10px 16px;
    margin-top: 100%;
    background-color: #05282b;
    border-radius: 35px;
    font-size: .7em;
    text-align: center;
}


/**************
    Footer
**************/

footer {
    padding: 1em;
    margin-top: 1em;
}

.footer-con-flex {
    display: flex;
    justify-content: space-around;
    margin-inline: auto;
    width: min(90%, 70.5rem);
    /*Con este "min()" y su contenido, le digo que se quede siempre entre un minimo del 90% de la pantalla y un maximo de 70.5rem. Es responsive. Siempre deja entonces un padding en los bordes de la pantall.*/
}

.footer-uno {
    margin-right: 2em;
    text-align: center;
}

.footer-dos {
    margin-right: 0;
    text-align: center;
}


/**************************************
    Display none a todo lo responsive
**************************************/

hr,
#header__celu,
#c-celu {
    display: none;
}

#a-text{
    text-decoration: none;
    color: #fff;
}

#a-text:hover{
    opacity: .7;
    text-decoration: none;
}

/******************************
    Decoraciones irrelevantes
*******************************/

li{
    color: rgb(255, 255, 255);
}
li:hover{
    color: rgb(255, 255, 255);
    opacity: 0.8;
}

.list-style-none {
    list-style: none;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.list-style-none:hover{
    text-decoration: none !important;
}

#link_color:hover {
    opacity: 0.8;
    color: rgb(255, 255, 255);
    text-decoration: none !important;
    list-style: none;
}

/***********************
    Media responsive
************************/
@media(max-width:800px) {

    /*oculto el header de la pc y muestro el del celu*/
    #header__pc,
    #c-none {
        display: none;
    }

    /*muestro mi header y section (c-celu). Si mi section fuera flex, queda un margin fijo que rompe el responisve*/
    #header__celu {
        display: flex;
        background-color: black;
    }

    #c-celu {
        display: block;
        justify-content: center;
    }

    /********
      Header
    *********/

    .navvv {
        display: block;
    }

    .nav__list {
        display: block;
    }

    .nav__item {
        margin-bottom: 1.5em;
        text-align: center;
        text-decoration: none;
        list-style: none;
    }

    /********************
      Asides responsivos
    *********************/

    #aside_nosotros_res,
    #aside_proyecto_res {
        display: block;
        padding: 1em;
        background-color: #fff;
        color: black;
        text-decoration: none;
        list-style: none;
    }

    .left_res {
        display: block;
        width: 80%;
        margin-left: 1em;
        margin-right: 1em;
        margin-bottom: 2em;
    }

    .rigth_res {
        list-style: none;
        text-decoration: none;
    }

    hr {
        display: flex;
        width: 100%;
        background-color: grey;
    }

    .list-style-none {
        list-style: none;
        text-decoration: none;
        color: black;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    li{
        color: black;
    }

    #link_color{
        color: black;
        text-decoration: none;
    }
    /**********************
        Section responsivo
    ***********************/

    .principal {
        width: 80%;
        margin-left: 1em;
        margin-left: 10%;
        margin-right: 15%;
        padding: 2em;
    }
}