/*
  Fonts
*/

@font-face {
  font-family: 'Satoshi';
  src: url('font/Satoshi-Regular.woff2') format('woff2'),
    url('font/Satoshi-Regular.woff') format('woff'),
    url('font/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('font/Satoshi-Bold.woff2') format('woff2'),
    url('font/Satoshi-Bold.woff') format('woff'),
    url('font/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/*
  General Styling
*/

:root {
  --page-margin: 24px;
  --primary-color: #12e2b0;

  --content-width: 90%;
  --content-max-width: 900px;

  --max-z-index: 2147483647;
}

html,
body {
  background: #f4f3ec;

  font-family: 'Satoshi', Arial, sans-serif;

  overflow-x: hidden;
}

hr {
  background-color: rgba(0, 0, 0, 0.16);
  border: none;
  height: 1px;
  margin: 16px 0;
}

span.bold {
  font-weight: 600;
}

code {
  background: rgba(0, 0, 0, 0.08);
  padding: 4px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 80%;
}

/*
  Notice
*/

.notice {
  width: var(--content-width);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 12px;
  border-radius: 12px;
  background: var(--primary-color);
  color: rgba(0, 0, 0, 0.64);
  gap: 4px;
  line-height: 1.4;
  box-sizing: border-box;
}

.notice .heading {
  color: #000;
}

.notice .signup-link {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  transition: 150ms ease-in-out;
}

.notice .signup-link:hover {
  border-bottom: 2px solid rgba(0, 0, 0, 1);
}

@media screen and (max-width: 800px) {
  .notice .heading {
    display: block;
    margin-bottom: 4px;
  }
}

/*
  Header
*/

#logo {
  height: 32px;
  width: 32px;

  display: block;

  flex-shrink: 0;
}

#logo img {
  width: 100%;
  height: 100%;
}

#main-header {
  font-size: 18px;
  font-weight: 400;

  z-index: var(--max-z-index);
  width: var(--content-width);
  max-width: var(--content-max-width);
  margin: 32px auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 800px) {
  #main-header {
    margin: 16px auto;
  }
}

#main-header menu {
  display: flex;
  gap: 8px;
}

#main-header menu a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.48);

  padding: 16px;

  transition: 100ms ease-in-out;
}

#main-header menu a:hover {
  color: rgba(0, 0, 0, 0.87);
}

#main-header menu a.builder-link {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  margin-left: 8px;
}

#main-header .icon-link {
  opacity: 0.48;
}

#main-header .icon-link img {
  width: 18px;
  height: 18px;
}

#main-header .icon-link:hover {
  opacity: 0.87;
}

/*
  Footer
*/

footer {
  width: var(--content-width);
  max-width: var(--content-max-width);

  margin: 144px auto 64px;

  text-align: center;
  color: rgba(0, 0, 0, 0.24);
}