*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box; font-family: var(--ff-primary);}
*::selection {color: #fff; background-color: var(--c-primary);}
html {scroll-behavior: smooth;}
body {font-family: var(--ff-primary); font-weight: 400; -webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,h5,h6 {margin: 0;}
ul, ol {padding: 0; margin: 0;}
li {list-style: none inside;}
p {margin: 0;}
p a {display: inline; color: var(--c-primary); text-decoration: underline;}
a {width: fit-content ; display: block ; text-decoration: none ; color: #000 ;}
button {font-family: var(--ff-primary); font-size: var(--fs-base); background-color: transparent; color: #fff; border: none; border-radius: unset; padding: unset; cursor: pointer;}
img, picture {max-width: 100%; height: auto; vertical-align: middle; font-style: italic; font-size: calc(var(--fs-xs) - 1px);} 
svg {vertical-align: middle;}
input, textarea, select {width: 100%; font-family: var(--ff-primary); border: none; font-size: calc(var(--fs-base) - 2px)} 
input[type="number"]::-webkit-inner-spin-button {appearance: none;}
/* still to change the font color of font in placeholder */
input::placeholder, textarea::placeholder {color: var(--c-light-bg);}