@import url(color.css);
@import url(typography.css);

/* General page structure --------------------- */

:root {
	--screen-size-mobile-small: 375px;
	--screen-size-mobile-large: 425px;
	--screen-size-tablet: 768px;
	--screen-size-laptop: 1024px;
	--screen-size-desktop: 1440px;
	--screen-size-4k: 2560px;
}

* {
	box-sizing: border-box;
	margin: 0px;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: auto;
	max-width: 2000px;
	align-content: center;
	background-color: var(--color-grey-200);
}




/* Material icons -------------------------- */

.material-symbols-sharp {
	font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
}

a {
	text-decoration: none;
}



/* Button component */

.button-impact-icon {
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-900);
}

.button-impact-icon:hover {
	background-color: var(--color-grey-800);
}

.button-impact-iconSmall {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-900);
}

.button-impact-iconSmall:hover {
	background-color: var(--color-grey-800);
}

.button-default-icon {
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-300);
}

.button-default-icon:hover {
	background-color: var(--color-grey-400);
}

.button-default-iconSmall {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-300);
}

.button-default-iconSmall:hover {
	background-color: var(--color-grey-400);
}

@media (max-width: 768px) {
  .button-impact-icon {
    width: 40px;
    height: 40px;
  }
  .button-default-icon {
    width: 40px;
    height: 40px;
  }
}