:root {
  --default-100: #000;
  --default-40: rgba(0, 0, 0, 0.25);
  --default-20: #b7bcc1;
  --typography-black: #000;
  --typography-blue: #000080;
  --typography-wight: #fff;
  --background-black: #0e0c0b;
  --background-blue: #264770;
  --background-rose: #8e6271;
  --background-l-violet: #cdc2dc;
  --background-wight: #fff;
  --button-default: #6750a5;
  --button-hover: #fff;
  --secondary-link: #00d4ff;
  --secondary-pink: #eeb9c9;
  --secondary-l-violet: #cdc2dc;

  --font-family: "Arial", sans-serif;
  --second-family: "Inter", sans-serif;
  --third-family: "Roboto", sans-serif;
  --font3: "Times New Roman", sans-serif;
  --font4: "Quicksand", sans-serif;
}

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

dl,
dt,
dd,
figure,
p {
  margin: 0;
}

dt,
dd {
  display: inline;
}

dd::after {
  content: "";
  display: block;
}

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

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

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

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

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  font-family: var(--font-family);
  color: var(--default-100);
  background: var(--background-black);
}

.main-ccs {
  background-image: url(./images/main-bg-mob.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin: 0 auto;
}

.main-container-ccs {
  width: 375px;
  padding: 533px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  gap: 16px;
}

.section-ccs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.container-ccs {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  background: var(--background-l-violet);
}

.section-title-ccs {
  font-weight: 700;
  font-size: 16px;
  line-height: 128%;
  color: var(--typography-wight);

  background: var(--background-rose);
  width: 100%;
  border: 2px solid var(--background-l-violet);
  padding: 8px 16px;

  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.content-wrap-ccs {
  padding: 16px 8px;
}

@media screen and (min-width: 1440px) {
  .main-ccs {
    background-image: url(./images/main-bg-desk.png);
  }

  .main-container-ccs {
    padding: 391px 64px 24px;
    gap: 24px;
    flex-wrap: wrap;
    width: 1440px;
    height: 2084px;
    margin: 0 auto;
  }

  .section-hero-ccs,
  .section-systems-ccs,
  .section-screenshots-ccs,
  .section-faq-ccs {
    width: 864px;
    flex-shrink: 0;
  }

  .section-shipyard-ccs,
  .section-trading-ccs,
  .section-characteristics-ccs,
  .container-ccs {
    width: 424px;
  }

  .container-ccs {
    width: 100%;
  }

  .content-wrap-ccs {
    padding: 24px 16px;
  }
}