$blackColor: #181818;
$accentColor: #ef570c;
$redColor: #f83300;

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

@font-face {
  font-family: 'main';
  src: url('../fonts/main.otf');
}

.container {
  font-family: 'main';
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) $blackColor;
  background-blend-mode: multiply, multiply;
  color: #fff;
  user-select: none;
}

.header {
  justify-content: center;
}
.main,
.header,
.sidebar {
  display: flex;
  align-items: center;
}

.menu {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 2.5rem;

  li {
    padding: 0.5rem 0;

    a {
      text-decoration: none;

      &,
      &:hover,
      &:active,
      &:visited {
        color: $accentColor;
      }
    }
  }
}

.model {
  max-width: 33vw;
}

.product {
  gap: 1rem;
  position: relative;

  &-image {
    flex-basis: 50%;
    flex-shrink: 0;
  }

  &-description {
    font-size: 1.75rem;
    line-height: 1.4;
  }

  &-model {
    max-height: 80%;

    &-icon {
      position: absolute;
      font-size: 4rem;
      right: 0;
      top: 0;
      color: $accentColor;
      z-index: 2;
    }
  }

}

.logo {
  &-header {
    font-family: 'logo';
    font-size: 4rem;
    padding: 1rem;

    background: linear-gradient(45deg, $redColor, $accentColor);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  &-img {
    width: 54%;
    display: block;
    margin: auto;
  }
}

img {
  max-width: 100%;
}