@font-face {
  font-family: 'GT Haptik Trial';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/GT-Haptik-Regular.woff2');
}

@font-face {
  font-family: 'GT Haptik Trial';
  font-weight: 400;
  font-style: italic;
  src: url('../fonts/GT-Haptik-Regular-Rotalic.woff2');
}


/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  outline: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}


/* Global style */
:root {
  --margin-base: 10px;
  --font-base: 15px;
  --font-small: calc(var(--font-base) * 0.75);

  --margin-05x: calc(var(--margin-base) * 0.5);
  --margin-1x: var(--margin-base);
  --margin-2x: calc(var(--margin-base) * 2);
  --margin-3x: calc(var(--margin-base) * 2);
  --margin-4x: calc(var(--margin-base) * 4);

  --sidebar-width: 240px;
  --content-width: 720px;
  --extra-width:   320px;

  --color-black: #111;
  --color-grey: #999;
  --color-lightgrey: #eee;

  --color-blue: #3CB3FF;
  --color-magenta: #FF8DC2;
  --color-yellow: #FEC404;
  --color-green: #01BA1B;
}

* {
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.05em;
  letter-spacing: .02em;
}

html {
  background-color: white;
  font-size: var(--font-base);
}

a {
  text-decoration: none;
  color: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
  padding-top: 1em;
  padding-bottom: var(--margin-1x);
  letter-spacing: -.01em;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4, h5, h6 {
  font-size: 1em;
}

ul, ol {
  padding-top: var(--margin-1x);
}

li {
  padding-left: var(--margin-2x);
  padding-bottom: var(--margin-05x);
}

hr {
  border: none;
  border-bottom: 1px solid #ddd;
}

input, textarea, select {
  display: block;
  padding: var(--margin-1x);
  border: 1px solid #ddd;
}

.page {
  display: flex;
  min-height: 100vh;
}


/* Login */
.page.login {
  align-items: center;
  justify-content: center;
  background-color: var(--color-lightgrey);
}

.login__title {
  font-size: 1.5em;
  padding-bottom: var(--margin-2x);
}

.login__wrap {
  min-width: 360px;
  padding: var(--margin-2x);
  background-color: white;
}

.login__wrap .alert {
  color: #ff3333;
  margin-bottom: var(--margin-2x);
}

.login__wrap input {
  width: 100%;
  margin-bottom: var(--margin-2x);
}

.login__wrap input[type="submit"] {
  cursor: pointer;
}


/* Navigation */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  background-color: #eee;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  padding: var(--margin-1x) var(--margin-1x);
  height: 100vh;
  overflow-y: scroll;
}

.sidebar__user {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--margin-05x);
  margin-bottom: var(--margin-2x);
}

.sidebar__avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  cursor: pointer;
}

.user__menu {
  display: none;
  position: absolute;
  top: 30px;
  left: 30px;
  background: white;
  padding: var(--margin-05x);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.user__menu.open {
  display: block;
}

.user__menu-item {
  display: block;
  min-width: 100px;
  padding: var(--margin-05x);

}

.user__menu-item:hover {
  background-color: var(--color-lightgrey);
}

.sidebar__title {
  padding-bottom: var(--margin-1x);
}

.sidebar__label {
  display: block;
  font-size: var(--font-small);
  padding: var(--margin-2x) 0 var(--margin-1x);
  color: var(--color-grey);
}

.sidebar__item {
  padding: var(--margin-1x);
}

.sidebar__item.active {
  background-color: white;
}


/* Content */
.content {
  width: 100%;
  padding: var(--margin-2x);
  margin-left: var(--sidebar-width);
}

.content__wrapper {
  display: flex;
  padding-top: var(--margin-4x);
  gap: var(--margin-2x);
}

.content__header {
  padding-top: var(--margin-4x);
}

.content__header h1 {
  padding-top: var(--margin-1x);
}

.content__breadcrumbs, .content__breadcrumbs a {
  color: var(--color-grey);
}

.content__breadcrumbs a:hover {
  text-decoration: underline;
}

.content__sections {
  max-width: var(--content-width);
}

.content__extra {
  min-width: var(--extra-width);
}
.content__extra h3 {
  border-top: 1px solid var(--color-lightgrey);
  margin-top: var(--margin-2x);
}

.content__download {
  display: flex;
  justify-content: space-between;
  padding: var(--margin-1x);
  border-bottom: 1px solid var(--color-lightgrey);
}

.content__download a:hover, .content__download span {
  color: var(--color-grey);
}

/* Layout */

.layout__grid {
  display: flex;
  gap: var(--margin-05x);
}

.layout__grid.color {
  font-size: var(--font-small);
}

.layout__column {
  flex: var(--span);
}

.layout__blocks h2 {
  border-top: 1px solid var(--color-lightgrey);
  margin-top: var(--margin-2x);
}

.layout__blocks p {
  padding-bottom: 1em;
}

.layout__blocks figure {
  padding-bottom: var(--margin-1x);
}


/* Home */
.home__sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-1x);
  max-width: var(--content-width);
}

.home__section {
  min-width: calc(50% - var(--margin-1x));
}

.home__section a {
  display: block;
  border: 1px solid var(--color-lightgrey);
  background-color: #fafafa;
  padding: var(--margin-2x);
}

/* Media queries */
@media screen and (max-width: 800px) {
}