:root {
  --color-principal-oscuro: #632961;
  --color-principal-claro: #7CA2AB;
  --color-principal-blanco: #ffffff;
  --color-principal-negro: #000000;
  --color-fondo-modal: #bcbcbc52;

  --color-degrade-azul-1: #2eb8e8;
  --color-degrade-azul-2: #058abf;
  --color-degrade-azul-3: #047b9b;
  --color-degrade-azul-4: #066984;
  --color-degrade-azul-5: #004456;
  --color-degrade-azul-6: #0367a5;
  --color-degrade-azul-7: #0487d9;
  --color-degrade-azul-8: #004466;
  --color-degrade-azul-9: #001e2d;

  --color-degrade-morado-1: #0096c8;
  --color-degrade-morado-2: #0367a6;
  --color-degrade-morado-3: #878fff;
  --color-degrade-morado-4: #a46fe8;
  --color-degrade-morado-5: #603fa8;

  --color-sombra-oscuro: #603fa885;
  --color-sombra-claro: #0096c885;
  --color-sombra-blanco: #ffffff85;
  --color-sombra-blanco-2: #ffffff3e;
  --color-sombra-negro: #00000085;
  --color-sombra-negro-2: #0000003a;
  --color-sombra-negro-3: #0000001e;

  --tran-0-2: all 0.2s ease;
  --tran-0-4: all 0.4s ease;
  --tran-1: all 1s ease;
}

@font-face {
    font-family: Montserrat;
    src: url("../font/montserrat.regular.ttf");
}

* {
    scrollbar-width:thin;
    scrollbar-color: var(--color-principal-oscuro) var(--color-sombra-blanco);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.em;
    word-spacing: 0em;
    font-family: Montserrat;
}

*::-webkit-scrollbar-thumb,*::-webkit-scrollbar-track{
  border-radius: 10px;
}

body {
    max-height: 100%;
    max-width: 100%;
    transition: var(--tran-05);
    height: 100vh;
    width: 100vw;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50%;
    overflow-x:hidden;
    font-size:small;
    background-image: linear-gradient(#ffffff8e,#ffffffa8, #7ca2ab84),url("../../static/img/fondo_login_2.webp");
}

body::-webkit-scrollbar:vertical {
    width: 10px;
  }
  
body::-webkit-scrollbar-button:increment,
body::-webkit-scrollbar-button {
display: none;
}
  
body::-webkit-scrollbar-thumb {
background-color: var(--text-color);
border-radius: 20px;
}
  
body::-webkit-scrollbar-track {
border-radius: 10px;
}

body::-webkit-scrollbar {
    -webkit-appearance: none;
  }