:root {
  --white: #FFFFFF;
  --black: #000000;
  --red: #FF0000;

  --black-transparent: #00000040;

  --gray-e: #EEEEEE;
  --gray-d: #DDDDDD;
  --gray-a: #AAAAAA;
  --gray-5: #555555;
  --gray-7: #777777;
  
  --color-primary: #AA8DE7;
  --color-primary-transparent: #CCBAF0;
  --color-primary-light: #E3CCF4;
  --color-primary-dark: #554673;

  /* head */
  --head-bg: #FFFFFFF2;
  --head-link: var(--color-primary);
  --head-link-hover: var(--black);

  /* content */
  --content-bg: rgba(255, 255, 255, 1.0);
  --content-bg-service: #F5F5F8;
  --content-bg-secondary: #F0F0F0;
  --content-bg-profile: #F6F3FC;

  /* foot */
  --foot-bg: var(--white);

  /* text */
  --color-text: #050505;
  --color-text-light: #585858;
  --color-headline: #111111;
  --color-subheading: #444444;
  --color-headline-light: #F5F5F5;
  --color-subheading-light: #E8E8E8;
  --color-success: #66BC69;
  --color-error: #F44336;

  /* links */
  --color-link: var(--color-primary);

  /* label */
  --label: #FFFFFF;
  --label-dark: #000000;

  /* checkbox */
  --checkbox: #CFCFCF;

  /* button */
  --button-bg: #554673;
  --button-bg-hover: #665881;
  --button-text: var(--white);
  --button-text-hover: var(--white);
  /* button light */
  --button-bg-light: var(--white);
  --button-bg-light-hover: var(--white);
  --button-text-light: var(--color-primary);
  --button-text-light-hover: var(--color-primary-dark);

  /* border */
  --border: #DFDFDF;
  --border-radius: 1rem;
  --border-text: #7F7F7F;
  /* border button */
  --border-button: var(--color-primary);
  --border-button-hover: var(--color-primary-dark);
  --border-button-light: var(--color-primary);
  --border-button-light-hover: var(--color-primary-dark);  
  --border-button-radius: 2rem;

  /* accordion */
  --accordion-bg: var(--gray-e);
  --accordion-bg-hover: rgba(204, 204, 204, 1.0);
}

* {
	margin: 0;
	padding: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  border: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--black);
}

ul {
  list-style: none;
}

.page {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}