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

@font-face {
    font-family:nunito ;
    src: url('../fonts/Nunito-Black.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:rubik ;
    src: url('../fonts/Rubik-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

:root{
    --cafe:#783010;
    --naranja:#FE8731;
    --verde: #1A8738;
    --colorFondo:#f7f3ef;
    --background:#F7E6D3;
    --paddingOf: 50px;
    --borderRad:25px;
    --auto:auto;
}

.cafe{
    color:var(--cafe);
}

.naranja{
    color:var(--naranja)
}

.verde{
    color:var(--verde);
}

html{
    scroll-behavior: smooth;
}

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    background-color: lightgray;
}

::-webkit-scrollbar-thumb {
    background: var(--naranja);
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--verde);
    cursor: pointer;
  }

body{
    font-family: rubik,sans-serif;
    background: var(--background);
    color:var(--cafe);
    font-size: clamp(14px, 4vw, 20px);
}

h1,h2{
    font-family: nunito;
}

a{
    text-decoration: none;    
}

.center{
    text-align: center;
}

button{
    display: block;
    font-size: clamp(14px, 4vw, 16px);
}

.padding_body{
    padding: 10px 50px;
}

@media (max-width:900px) {

    .padding_body{
        padding: 0px;
    }
    
}