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

/* ////////////////////////////////////////////////////////// */
/* //////////////////  SCROLLBAR GENERAL  /////////////////// */
/* ////////////////////////////////////////////////////////// */
*::-webkit-scrollbar {
    width: 10px;     /* Tamaño del scroll en vertical */
    height: 10px;    /* Tamaño del scroll en horizontal */
    /* display: none; */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
*::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
*::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
*::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}

/* Ponemos un color de fondo y redondeamos las esquinas del track */
*::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}

/* Cambiamos el fondo cuando esté en active o hover */
*::-webkit-scrollbar-track:hover,
*::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}







main {
    padding: 2rem 3rem;
    min-height: 60vh;
}

h1, 
h2,
h3, 
h4,
h5,
h6,
footer, 
nav {
    font-family: var(--title-font-family);
    color: var(--title-font-color);
    font-family: var(--font-family);
    font-size: var(--title-font-size);
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
footer {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

p,
li {
    font-family: var(--font-family);
    color: var(--paragraph-font-color);
    font-size: var(--paragraph-font-size);
}

email {
    word-break: break-all;
}

a:link {
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-family);
    color: var(--button-color);
    filter: brightness(0.8);
}

a:hover {
    text-decoration: underline;
}

a:visited {
    filter: brightness(0.5);
}