:root {
   --primary-color: rgb(31, 43, 84);
   --secondary-color: rgb(43, 63, 129);
   --background-color: rgb(248, 201, 186);
   --white: #ffffff;
   --black-overlay: rgba(0, 0, 0, 0.3);
   --black-navbar-overlay: rgba(0, 0, 0, 1);
   --primary-transparent: rgba(31, 43, 84, 0.8);

   --font-regular: 'Roboto', sans-serif;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-bold: 700;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   scrollbar-width: thin;
   scrollbar-color: var(--primary-color) transparent;
}

body {
   font-family: var(--font-regular);
   overflow-x: hidden;
   width: 100%;
   height: 100%;
}

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

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: var(--primary-color);
   border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--primary-transparent);
}

html,
body {
   max-width: 100%;
   overflow-x: hidden;
}