/* IBM Plex Sans */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth\,wght.ttf")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth\,wght.ttf")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttf")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Roboto */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Italic-VariableFont_wdth\,wght.ttf")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lexend */
@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend/Lexend-VariableFont_wght.ttf") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz\,wght.ttf")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family: "IBM Plex Sans", sans-serif;
  --second-family: "JetBrains Mono", sans-serif;
  --third-family: "Roboto", sans-serif;
  --font3: "Lexend", sans-serif;
  --font4: "Inter", sans-serif;
  --base: #040404;
  --secondary: #161616;
  --tertiary: #1e1e1e;
  --text-main: #f2f2f2;
  --txt-secondary: #c5c5c5;
  --txt-tertiary: #676767;
  --accent1: #f05;
  --accent2: #fcd34d;
  --blue: #3daaca;
  --googleplay-buttons-googleplay-blue: #00d7fe;
  --common-section-color: #222;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0;
}

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

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

body {
  font-family: var(--font-family);
  margin: 0 auto;
  background: var(--base);
  color: var(--text-main);
}

html {
  scroll-behavior: smooth;
}

.section {
  padding: 48px 0;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.3s ease-out;
}

.container {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;

  font-family: var(--second-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 150%;
  text-transform: uppercase;
  color: var(--accent2);
}

.section-description {
  font-family: var(--second-family);
  font-weight: 200;
  font-size: 32px;
  line-height: 150%;
  color: var(--text-main);
  margin-bottom: 40px;

  span {
    font-weight: 700;
    color: var(--blue);
  }
}

@media screen and (min-width: 375px) {
  .container {
    width: 375px;
  }
}

@media screen and (min-width: 768px) {
  .section {
    padding: 64px 0;
  }

  .container {
    width: 768px;
    padding: 0 32px;
  }
}

@media screen and (min-width: 1436px) {
  .section {
    padding: 80px 0;
  }

  .container {
    width: 1436px;
    padding: 0 80px;
  }

  .section-title {
    margin-bottom: 64px;
  }

  .section-description {
    font-size: 48px;
    text-align: center;
    margin-bottom: 48px;
  }
}