:root {
  --clr-neutral-100: #f3f3f3;
  --clr-neutral-200: #e7e7e7;
  --clr-neutral-500: #777777;
  --clr-neutral-700: #555555;
  --clr-blue: rgb(9, 128, 170);
  --header-background: #fff;
  --header-padding: 20px;
  --header-height: 90px;
  --header-layout: row;
  --nav-background: #8eacb4;
  --nav-padding: 10px;
  --footer-height: 100px;
  --footer-padding-v: 20px;
  --footer-background: #56797f;
  --footer-color: #3c5359;
  --article-width: 760px;
  --article-with-screenshot-width: 900px;
  --article-with-screenshot-layout-1: row;
  --article-with-screenshot-layout-2: row-reverse;
  --screenshot-width: 485px;
  --article-padding: 20px;
  --article-padding-v: 80px;
  --article-padding-h: 40px;
  --article-gap: 60px;
  --article-border-radius: 20px;
  --article-background-1: #edf2f3;
  --article-background-2: #f9e8d3;
  --container-gap: 0;
  --container-padding: 0;
  --section-padding-left: 80px;
  --logo-padding-v: 30px;
  --heading-color: #3c5359;
  --h1-font-size: 48px;
  --h2-font-size: 32px;
  --p-font-size: 16px;
  --p-larger-font-size: 20px;
}

@media (max-width: 1000px) {
  :root {
    --article-width: 600px;
    --article-with-screenshot-width: 700px;
    --screenshot-width: 350px;
  }
}

@media (max-width: 800px) {
  :root {
    --article-width: 80%;
    --article-with-screenshot-width: 80%;
    --article-with-screenshot-layout-1: column-reverse;
    --article-with-screenshot-layout-2: column-reverse;
    --screenshot-width: 100%;
  }
}

@media (max-width: 500px) {
  :root {
    --header-layout: column;
    --header-height: 110px;
    --h1-font-size: 40px;
    --p-larger-font-size: 18px;
  }
}

html,
body {
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  background: linear-gradient(
    90deg,
    rgba(253, 242, 228, 1) 0%,
    rgba(237, 242, 243, 1) 100%
  );
}

body,
html,
button,
input,
select,
textarea {
  font-family: "Raleway", sans-serif;
  font-size: var(--p-font-size);
  font-weight: 400;
  color: var(--heading-color);
}

h1,
h2,
h3,
h4 {
  font-family: "Raleway", sans-serif;
  color: var(--heading-color);
  font-weight: 700;
  padding: 0;
  margin: 0;
}

h1 {
  font-weight: 800;
  font-size: var(--h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
}

h2.important {
  font-size: var(--h1-font-size);
}

header,
footer,
.centering-container {
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-direction: column;
  align-items: center;
}

.centering-container {
  gap: var(--container-gap);
  padding: var(--container-padding);
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  box-sizing: border-box;
}

header {
  height: var(--header-height);
  background-color: var(--header-background);
  justify-content: center;
}

.header-container {
  width: var(--article-with-screenshot-width);
  box-sizing: border-box;
  display: flex;
  flex-direction: var(--header-layout);
  align-items: center;
}

header > .header-container > nav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

header > .header-container > nav > ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  gap: 10px;
}

header > .header-container > nav > ul li {
  list-style: none;
  font-family: "Raleway", sans-serif;
  font-size: var(--p-font-size);
}

header > .header-container > nav > ul li a {
  color: var(--heading-color);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
}

header > .header-container > nav > ul li a:hover {
  background-color: var(--article-background-1);
}

footer {
  min-height: var(--footer-height);
  background-color: #fff;
  padding: var(--footer-padding-v) 0;
  color: var(--footer-color);
  font-family: "Raleway", sans-serif;
  font-weight: 600;
}

footer > div {
  width: var(--article-width);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

article {
  box-sizing: border-box;
  /* background-color: var(--article-background-1); */
  width: 100%;
  padding-top: var(--article-padding-v);
  padding-bottom: var(--article-padding-v);
  padding-left: calc((100% - var(--article-width)) / 2 + 10px);
  padding-right: calc((100% - var(--article-width)) / 2 - 10px);
  display: flex;
  gap: var(--article-gap);
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

article.projects {
  padding-left: calc((100% - var(--article-width)) / 2);
  padding-right: calc((100% - var(--article-width)) / 2);
  background-color: white;
}

article.type-1 {
  background-color: var(--article-background-1);
}

article.type-2 {
  background-color: #fff;
}

.article-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 10px;
}
/*
.article-content h2 {
  text-align: center;
}
*/
.article-content.with-screenshot h2 {
  text-align: left;
}

.star {
  padding-top: 80px;
}

div.main-article {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

p.main-article {
  font-size: var(--p-larger-font-size);
}

article.with-screenshot {
  padding-left: calc((100% - var(--article-with-screenshot-width)) / 2);
  padding-right: calc((100% - var(--article-with-screenshot-width)) / 2);
}

.article-content.with-screenshot {
  width: var(--article-with-screenshot-width);
  display: flex;
  flex-direction: var(--article-with-screenshot-layout-1);
  gap: 40px;
}

.article-content.with-screenshot.layout-2 {
  flex-direction: var(--article-with-screenshot-layout-2);
}

/*
  --article-with-screenshot-layout-1: row;
  --article-with-screenshot-layout-2: row;*/

.screenshot {
  border-radius: 6px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.15);
  width: var(--screenshot-width);
}

.spacer {
  display: flex;
  flex-grow: 1;
  height: 10px;
}

.call-to-action-container {
  display: flex;
  justify-content: center;
  padding: 10px;
}

a.call-to-action {
  color: #fff;
  padding: 10px 30px;
  background-color: #f48f29;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}

.footer-contacts {
  font-weight: 400;
  padding-bottom: 10px;
}