:root {
  --color-primary: #000;
  --color-secondary: rgba(0, 0, 0, 0.6);
  --action-primary: #12b886;
  --hover-primary: #0ca678;

  --color-bg-main: #fff;
  --color-bg-secondary: #fff;
  --color-theme: #396; 
  --color-theme-text: #fff;
  /*222f3e ffeb3b 2d3436*/

  --ui-turquoise: #1abc9c;
  --ui-emerald: #2ecc71;
  --ui-peterriver: #3498db;
  --ui-clouds: #ecf0f1;
  --ui-text: #222;
  --ui-bg: #f1f6f7;
}

::selection {
  background-color: #ccc;
}

body {
  background-color: var(--ui-bg);
  color: var(--ui-text);
}

.section {
  display: block;
  position: relative;
}

.section > .block {
	padding: 0 20px;
}

@media (min-width: 768px) {
	.section > .block {
		max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
	}
}

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body > div[role="main"] {
  flex: 1;
}

h1 {
  font-size: 30px;
  line-height: 34px;
}

@media (min-width: 768px) {
	h1 {
    font-size: 40px;
    line-height: 46px;
  }
}