@font-face {
  font-family: 'PlayfairDisplay';
  src: url('./fonts/PlayfairDisplay-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'Trispace';
  src: url('./fonts/Trispace-VariableFont_wdth,wght.ttf');
}

:root {
  --darker: #111;
  --lighter: #eee;
  --shadow: #666;
  --green: #94c594;
  --purple: purple;
  --font-family-primary: 'Trispace', sans-serif;
  --lightgreen: #a9dfbf;
  --margin-size-major: 50px;
  --margin-size-minor: 15px;
  --margin-size-minimum: 5px;
  --font-size-major: 38px;
  --font-size-medium: 24px;
  --font-size-base: 22px;
  --font-size-minor: 16px;
  --font-size-minimum: 14px;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper { /* marjoritary layout related */
  color: var(--lighter);
  background-color: var(--darker);
}

.wrapper.-light {
  color: var(--darker);
  background-color: var(--lighter);
}

.wrapper.-light .social-networks > .link {
  color: var(--purple);
}

.container { /* marjoritary content related */
  position: relative;
  margin: var(--margin-size-major) auto;
  width: 95%;
  max-width: 666px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
}

.main-header {
  padding-bottom: var(--margin-size-minor);
}

.main-header .icon-contrast {
  fill: var(--shadow);
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.main-header > .title {
  font-size: var(--font-size-medium);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--shadow);
}

.main-header,
.main-content {
  margin-bottom: var(--margin-size-major);
}

.main-content > .description {
  margin-bottom: var(--margin-size-major);
  line-height: 1.8;
}

.main-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--margin-size-minor);
  font-size: var(--font-size-minor);
  border-top: 1px solid var(--shadow);
}

.social-networks > .link {
  font-size: var(--font-size-minimum);
  text-decoration: none;
  color: var(--green);
}

.main-footer > .copyright {
  margin-top: var(--margin-size-minor);
  color: var(--shadow);
}

@media (min-width: 600px) {
  .main-footer {
    flex-direction: row;
  }

  .main-footer > .copyright {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .main-header > .description {
    font-size: var(--font-size-major);
  }

  .main-content > .social-networks {
    line-height: initial;
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
}

.smoke {
  margin-left: var(--margin-size-minimum);
  color: var(--shadow);
}