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

:root {
    --blanco: #fff;
    --negro: #000;

    /* Azul */
    /*
    --uno: #F9F5EB;
    --dos: #6f8bd1;
    --dos-medio: #5878c9;
    --tres: #4964a7;
    --tres-medio: #2e488a;
    --cuatro: #223564;
    --cuatro-medio: #101d3e;
    */
  
    /* Morado, Rosa */
    --uno: #F9F5EB;
    --dos: #a97cca;
    --dos-medio: #8348ad;
    --tres: #5c0f8c;
    --tres-medio: #510c76;
    --cuatro: #510c76;
    --cuatro-medio: #300e41;
   
}

html, body{
    height:100%;
    width:100%;
    font-family: 'Roboto', sans-serif;
    color: var(--uno);
}

.bg-body-secondary{

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#315159+0,577d86+52,87cbb9+89,b9eddd+100 */
    background: var(--cuatro); /* Old browsers */
    background: -moz-linear-gradient(45deg, var(--cuatro-medio) 0%, var(--tres-medio) 52%, var(--dos-medio) 89%, var(--dos) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, var(--cuatro-medio) 0%, var(--tres-medio) 52%, var(--dos-medio) 89%, var(--dos) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, var(--cuatro-medio) 0%, var(--tres-medio) 52%, var(--dos-medio) 89%, var(--dos) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--cuatro-medio)', endColorstr='var(--dos)',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.navbar-header button:hover{
    color: var(--cuatro);
}

.titulo{
    padding-top: 100px;
     /* efecto 3D */
     /*
    text-rendering: optimizeLegibility;
    color: var(--uno);
    letter-spacing: .15em;
    text-shadow: 
       -0.5px 1px 1px var(--cuatro-medio),
       -1px 2px 1px var(--cuatro),
       -1.5px 3px 1px var(--tres-medio),
       -2px 4px 1px var(--tres),
       -2.5px 5px 1px var(--dos-medio),
       -3px 6px 1px var(--dos),
       -3.5px 7px 1px var(--uno);
       */
}
.titulo h1{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.display-7{
    font-size: 1.5rem;
}

.modal-dialog{
    color: var(--cuatro);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
.modal-sesion{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}
.modal-body{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.btn-primary{
    background-color: var(--tres);
    border-color: var(--tres);
}
.btn-primary:hover{
    background-color: var(--cuatro);
    border-color: var(--cuatro);
}

.btn-outline-primary{
    color: var(--cuatro);
    border-color: var(--cuatro);
}
.btn-outline-primary:hover{
    background-color: var(--tres);
    border-color: var(--tres);
}
.btn-primary:active, .btn-primary:visited, .btn-outline-primary:active, .btn-outline-primary:visited{
    background-color: var(--cuatro-medio) !important;
    border-color: var(--cuatro-medio) !important;
}

.btn-outline-light{
    color: var(--uno);
    border-color: var(--uno);
}
.btn-outline-light:hover{
    background-color: var(--dos-medio) !important;
    color: var(--uno) !important;
    border-color: var(--dos) !important;
}
.btn-outline-light:active, .btn-outline-light:visited{
    background-color: var(--cuatro) !important;
    color: var(--uno) !important;
    border-color: var(--uno) !important;
}

.navbar-footer{
    color: var(--uno);
}
.navbar-footer a{
    color: var(--uno);
}
.navbar-footer h5{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: small;
}
.navbar-footer a:hover{
    color: var(--uno);
}
.logo{
    max-height: 350px;
    max-width: 350px;
}