@import url("https://mxmst.ru/css/base.css");

* {
  color: #fafafa;
}

:root {
  --content-width: 1000px;
}

body {
  background-color: #111111;
  justify-content: space-between;
  align-items: center;
}

.main-content {
  gap: 3rem;
  width: 90vw;
  max-width: var(--content-width);
  /*min-height: 500px;*/
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  & .main-text {
    gap: 1rem;

    & h1 {
      font-size: 10rem;

      @media screen and (max-width: 420px) {
        font-size: 8rem;
      }

      @media screen and (max-width: 350px) {
        font-size: 6rem;
      }
    }

    & h2 {
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.4;
    }
  }

  & .main-actions {
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;

    & a {
      --border-radius: .6rem;

      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.8rem;
      border: 1px solid #fafafa;
      padding: .8rem 1.4rem;
      transition: background-color .15s, transform .2s;
      -webkit-border-radius: var(--border-radius);
      -moz-border-radius: var(--border-radius);
      border-radius: var(--border-radius);
      flex-grow: 0;
      justify-content: center;

      &:hover {
        background-color: #181818;
      }

      &:active {
        transform: scale(.96);
      }

      & svg {
        height: 1.6rem;
        flex-shrink: 0;
      }

      & p {
        @media screen and (max-width: 350px) {
          width: min-content;
        }
      }

      @media screen and (max-width: 360px) {
        width: 100%;
      }
    }
  }
}