:root {
    --background-clr: #FFF4DB;
    --warning-clr: #FF8C00;
    --ok-clr:#65A98F;
    --danger-clr: #A93400;
    --foreground-clr:#270038;
    --info-clr: #4d52de;
    --white: #f5f5f5;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}


body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    flex: 1;
    margin: 0;    
    font-family: 'Poppins', sans-serif;
}

.button:hover {
    background-image: linear-gradient(rgb(0 0 0/20%) 0 0);
}

.disabled-mouseevents {
    pointer-events: none;
}

.button {
		flex: 0 1 auto;
		padding-top: 10px;
		padding-bottom: 10px;
		margin: 5px 10px;
		color: var(--foreground-clr);
		background-color: #ffffff;
		border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
		border-image: linear-gradient(180deg, rgba(255, 184, 81, 1) 0%, rgba(174, 141, 197, 1) 100%);
		font-size: larger;
        font-family: 'Poppins',sans-serif;
}

.button:hover {
		background-image: linear-gradient(rgb(0 0 0/20%) 0 0);
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}