@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";

.nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-top: clamp(1rem, 3vw, 1.5rem);
    margin-inline: clamp(2rem, 12vw, 12rem)
}

@media (min-width: 720px) {
    .nav {
        justify-content: space-between;
        flex-direction: row
    }
}

.nav__logo:visited, .nav__logo:active, .nav__logo {
    color: #d159b9;
    font-weight: 700;
    font-size: clamp(1.188rem, 3vw, 1.438rem)
}

.nav__list {
    display: flex;
    gap: 2rem;
    justify-content: center
}

.nav li:hover {
    border-bottom: solid 1px #858585
}

.nav li.active:hover, .nav .active {
    border-bottom: solid 1px #000
}

.footer {
    margin-inline: auto;
    margin-block: auto clamp(1rem, 3vw, 1.5rem);
    font-size: clamp(.688rem, 3vw, 1rem)
}

.footer a {
    color: #406ac9;
    text-decoration: underline
}

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

* {
    padding: 0;
    margin: 0;
    font: inherit
}

html {
    font-size: 100%
}

img, picture, svg, video {
    display: block;
    max-width: 100%
}

body {
    min-height: 100vh
}

h1, h2, h3, h4 {
    font-weight: 400;
    line-height: 1.1
}

h1 {
    font-size: 3rem
}

h2 {
    font-size: 2.5rem
}

h3 {
    font-size: 2.062rem
}

h4 {
    font-size: 1.75rem
}

h5 {
    font-size: 1.438rem
}

h6 {
    font-size: 1.188rem
}

p {
    line-height: 1.5;
    font-size: clamp(.95rem, 3vw, 1.15rem)
}

a, a:visited, a:active {
    text-decoration: none;
    color: inherit
}

ul, li {
    list-style: none
}

body {
    font-family: "Inter", sans-serif
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.hero {
    padding-block: clamp(1.5rem, 4vw, 3rem);
    margin-inline: clamp(2rem, 12vw, 12rem)
}

@media (min-width: 520px) {
    .hero {
        display: flex;
        align-items: center
    }

    .hero__left, .hero__right {
        flex: 1 1 0px
    }
}

.hero h2 {
    font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: .9
}

.hero h5 {
    margin-top: .25rem;
    font-size: clamp(1.188rem, 3vw, 2.062rem)
}

.hero__cta {
    display: flex;
    margin-top: 1.5rem;
    align-items: center
}

.hero__cta__button {
    padding: clamp(.5rem, 2vw, .75rem) clamp(.75rem, 2vw, 1.25rem);
    border-radius: 50px;
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.438rem);
    color: #fff;
    transition: .5s;
    background-size: 200% auto;
    background-image: linear-gradient(to right, #8c2778 0%, #df8bce 51%, #c837ab 100%);
    cursor: pointer;
    border: none
}

.hero__cta__button:hover {
    box-shadow: 0 2px 1px rgba(0, 0, 0, .09), 0 4px 2px rgba(0, 0, 0, .09), 0 8px 4px rgba(0, 0, 0, .09), 0 16px 8px rgba(0, 0, 0, .09), 0 32px 16px rgba(0, 0, 0, .09);
    background-position: right center
}

.hero__cta__info {
    margin-left: clamp(.75rem, 2vw, 1.5rem);
    color: #4a4a4a;
    font-size: clamp(.688rem, 2vw, 1rem)
}

.hero__cta__subtitle {
    margin-top: clamp(.5rem, 2vw, 1rem);
    font-size: clamp(.812rem, 2vw, 1.188rem);
    font-weight: 600
}

.hero img {
    margin-top: 1rem;
    margin-inline: auto;
    width: clamp(150px, 20vw, 250px);
    aspect-ratio: 1
}

.hero__info {
    margin-top: clamp(.5rem, 2vw, 1.5rem);
    font-size: clamp(.688rem, 2vw, 1.188rem);
    text-align: center;
    font-style: italic
}

.hero--wrap {
    background-color: #ecf0fa
}

.tutorial {
    display: flex;
    flex-direction: column;
    align-items: center
}

.tutorial__button {
    margin-block: clamp(1.5rem, 6vw, 2.5rem);
    padding: clamp(.5rem, 2vw, .75rem) clamp(.75rem, 2vw, 1.25rem);
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0);
    font-size: clamp(.688rem, 2vw, 1rem);
    cursor: pointer;
    border: solid 1px #bfbfbf
}

.tutorial__settings {
    background-color: #faebf7;
    padding:20px;
    margin-bottom: clamp(1.5rem, 6vw, 2.5rem);
    border-radius: 5px;
}


@media (min-width: 720px) {
    .tutorial__video--wrap {
        padding: 4rem 10rem;
        border-radius: 5px;
        background-color: #ecf0fa
    }
}

.tutorial__up {
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
    transition: .5s
}

.aboutus {
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    margin-inline: clamp(2rem, 12vw, 12rem)
}

.aboutus--wrap {
    margin-bottom: 1rem;
    background-color: #faebf7
}

.aboutus h2 {
    font-size: clamp(1.438rem, 3vw, 3rem);
    font-weight: 700;
    margin-bottom: .5rem
}

.aboutus p {
    font-size: clamp(.812rem, 3vw, 1rem)
}

.aboutus p:last-child {
    margin-top: clamp(.25rem, 3vw, .5rem)
}


.signup {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block: clamp(1.5rem, 6vw, 0rem);
    padding: clamp(.5rem, 2vw, .75rem) clamp(.75rem, 2vw, 1.25rem);
}

.signup__button {
    margin-top: clamp(1.5rem, 6vw, 2.5rem);
    padding: clamp(.5rem, 2vw, .75rem) clamp(.75rem, 2vw, 1.25rem);
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 255);
    font-size: clamp(.688rem, 2vw, 1rem);
    cursor: pointer;
    border: solid 1px #bfbfbf
}

.signup__block {
    background-color: #faebf7;
    padding:20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.signup__input {
    padding:10px;
    border-radius: 5px;
    margin-top: 5px;
}


/*# sourceMappingURL=style.css.map */