@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;600&family=Ubuntu:wght@400;500;700&display=swap');
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --Light-red: hsl(356, 100%, 66%); /* (CTA text) */
    --Very-light-red: hsl(355, 100%, 74%); /* (CTA hover background) */
    --Very-dark-blue: hsl(208, 49%, 24%); /* (headings) */
    --Very-dark-grayish-blue: hsl(207, 13%, 34%); /* (body copy) */
    --Very-dark-black-blue: hsl(240, 10%, 16%); /* (footer background) */
    --White: hsl(0, 0%, 98%); /* (text) */
    --Grayish-blue: hsl(240, 2%, 79%); /* (footer text) */
}
body {
    font-family: "Overpass", sans-serif;
    font-size: 18px;
    color: var(--White);
}
h1 {
font-size: 65px;
margin-bottom: 15px;
letter-spacing: -2px;
}
h2 {
    font-size: 40px;
    letter-spacing: -2px;
}
h3 {
    font-size: 28px;
    padding-bottom: 25px;
}
ul {
    list-style: none;
}
.dropdown li a {
font-family: "Ubuntu", sans-serif;
text-decoration: none;
font-size: 14px;
font-weight: 400;
color: var(--Very-dark-grayish-blue);
line-height: 2;
}
.dropdown li a:hover {
    color: var(--Very-dark-black-blue);
    font-weight: 500;
}
/* Section One */
.modern-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 600px;
    background:url('images/bg-pattern-intro-desktop.svg') no-repeat 25% 52%/200em,  linear-gradient(to right, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
    border-bottom-left-radius: 6rem;
}
.header {
    width: 80%;
    display: flex;
    gap: 60px;
    margin-top: 30px;
}
.menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.login, .product {
    display: flex;
    gap: 30px;
    align-items: center;
}
.login li:first-child {
    cursor: pointer;
}
.hamburger, .dark-arrows {
    display: none;
}
.dropdown {
    display: none;
    place-content: center;
    padding-left: 20px;
    position: absolute;
    background-color: var(--White);
    margin-top: 20px;
    transform: translateX(-10%);
    width: 150px;
    height: 140px;
    border-radius: 5px;
}
.menu-dropdown button {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: var(--White);
    font-size: 15px;;
}
.menu-dropdown button:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
.hero-content {
    margin-block: auto;
    text-align: center;
}
.hero-content p {
    margin-bottom: 40px;
}
.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
} 
.buttons button, .signup {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    width: 120px;
    height: 50px;
    border-radius: 30px;
    border: none;
}
.buttons button:first-child, .signup {
    background-color: var(--White);
    color: var(--Light-red);
}
.buttons button:last-child {
    background-color: transparent;
    border: 1px solid var(--White);
    color: var(--White);
}
.buttons button:last-child:hover {
    background-color: var(--White);
    color: var(--Very-light-red);
}
.buttons button:first-child:hover, .signup:hover {
    background-color: var(--Very-light-red);
    color: var(--White);
}

/* Section Two */
.white-container {
    overflow: hidden;
    color: var(--Very-dark-blue);
    min-height: 1000px;
}
.white-container p, .content p {
    font-size: 17px;
    line-height: 1.8;
}
.white-container h2 {
    text-align: center;
    position: relative;
    transform: translatey(10rem);
}
.flexbox {
    display: flex;
    gap: 15px;
    align-items: center;
}
.content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 50%;
}
.editor {
    padding-left: 10rem;
}
.editor-img {
    width: 50%;
    position: relative;
    right: -80px;
}
.mobile {
    display: none;
}
/* Section Three */

.art-state {
    height: 400px;
    background: url("images/bg-pattern-circles.svg") no-repeat -14rem -30rem/63rem, linear-gradient(to right, hsl(237, 17%, 21%), hsl(237, 23%, 32%));
    border-bottom-left-radius: 6rem;
    border-top-right-radius: 6rem;
}
.state {
    margin-left: 2rem;
    width: 40%;
}
.state-img {
    margin-left: 8rem;
}
/* Section Four */
 .tooling-img {
    width: 50%;
    position: relative;
    left: -17.5rem;
 }
.tooling {
    padding-right: 10rem;
}
/* Section Five */
.footer {
display: flex;
gap: 10rem;
padding: 5rem 10rem;
background-color:var(--Very-dark-black-blue);
}
.footer-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.footer-header {
    font-size: 14px;
    text-decoration: none;
}
.footer-header ul, .footer-header a {
    margin-top: 25px;
    line-height: 2;
    text-decoration: none;
    color: var(--Grayish-blue);
}
.footer-header a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
/* Author */
.attribution { 
    font-size: 12px; 
    text-align: center; 
    background-color:var(--Very-dark-black-blue);
}
    .attribution a { 
        color: hsl(228, 45%, 44%); 
    }

    /* Media Queries */
    @media screen and (max-width: 1000px) {
        h3 {
            padding-bottom: 10px;
        }
        .flexbox {
            gap: 0;
        }
        .editor {
            padding-left: 5rem;
        }
        .white-container p, .content p {
            font-size: 15px;
            line-height: 1.6;
        }
        .state h2 {
            font-size: 32px;
        }
        .state {
            margin-left: 10px;
        }
        .state-img {
            margin-left: 2rem;
        }
        .tooling {
            padding-right: 4rem;
        }
        .tooling-img {
            left: -25rem;
         }
         .footer {
            gap: 8rem;
            padding: 5rem;
            }
    }

    @media screen and (max-width: 800px) {
        h1 {
            font-size: 50px;
        }
        .flexbox {
            flex-direction: column-reverse;
        }
        .editor {
            padding-left: 0;
        }
        .editor-img img {
            width: 100%;
        }
        .mobile {
            display: block
        }
        .desktop {
            display: none;
        }
        .editor-img {
            width: 50%;
            right: 0; 
        }
        .white-container h2 {
            transform: translatey(0);
            margin-top: 80px;
            margin-bottom: 20px;
        }
        .content {
            width: 80%;
            text-align: center;
        }

        .art-state {
            flex-direction: column;
            min-height: 700px;
            background: url("images/bg-pattern-circles.svg") no-repeat 0rem -20rem/50rem, linear-gradient(to bottom, hsl(237, 17%, 21%), hsl(237, 23%, 32%));
        }
        .state {
            margin-left: 0;
            width: 80%;
            margin-bottom: auto;
            height: 80%;
            justify-content: flex-end;
        }
        .state-img {
            position: absolute;
            transform: translateY(-12rem);
            margin-left: 0;
        }
        .tooling-box {
            flex-direction: column;
        }
        .tooling {
            padding-right: 0rem;
        }
        .tooling-img {
            width: 80%;
            left: 0rem;
            margin-block: 30px;
         }
         .tooling-img img {
            width: 100%;
         }

    }

    @media screen and (max-width: 400px) {
        h1 {
            font-size: 35px;
            margin-bottom: 15px;
            letter-spacing: -2px;
            }
            h2 {
                font-size: 30px;
            }
            h3 {
                font-size: 28px;
                padding-bottom: 10px;
            }
        .modern-platform {
            background:url('images/bg-pattern-intro-mobile.svg') no-repeat 35% 30%/80rem,  linear-gradient(to bottom, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
        }
        .header {
            justify-content: space-between;
            gap: 0;
            margin-top: 50px;
        }
        .menu{
            display: none;
            position: absolute;
            background-color: var(--White);
            border-radius: 8px;
            z-index: 1000;
            width: 80%;
            margin-top: 60px;
            padding-block: 30px;
        }
        .light-arrows {
            display: none;
        }
        .menu-dropdown {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .menu-dropdown button {
            display: flex;
            color: var(--Very-dark-blue);
        }
        #menu.active {
            display: block; 
        }
        .dark-arrows {
            display: block;
           margin-left: 5px; 
        }
        .product {
            flex-direction: column;
        }
        .hamburger {
            display: block;
            position: relative;
            cursor: pointer;
        }
        .dropdown {
            padding-left: 0; /**/
            position: relative; /**/
            background-color: hsla(240, 3%, 79%, 0.281); /**/
            transform: translateX(0); /**/
            width: 220px; /**/
            height: auto; /**/
            text-align: center; /**/
            padding-block: 20px;
        }
        .login{
            font-size: 16px;
            flex-direction: column;
            gap: 10px;
           color: var(--Very-dark-black-blue);
           border-top: 1px solid hsla(240, 3%, 79%, 0.281);
           width: 90%;
           margin-top: 30px;
           margin-inline: auto;
        }
        .login li:first-child {
            margin-top: 20px;
        }
        .signup {
            background: linear-gradient(to right, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
            color: var(--White);
        }
        .hero-content {
            width: 80%;
        }
        .editor-img {
            width: 100%;
         }
         .editor-box {
            min-height: 1250px;
         }
         .editor {
            margin-top: 50px;
         }
         .state-img {
            transform: translateY(-9rem);
            width: 90%;
         }
         .state-img img {
            width: 100%;
         }
         .art-state {
            min-height: 550px;
            background: url("images/bg-pattern-circles.svg") no-repeat -8rem -12rem/40rem, linear-gradient(to bottom, hsl(237, 17%, 21%), hsl(237, 23%, 32%));
        }
        .tooling-img {
            width: 100%;
         }
         .tooling-box {
            min-height: 900px;
         }

         .footer {
            flex-direction: column;
            gap: 0;
            padding: 5rem 0;
            text-align: center;
            }
            .footer .logo-container {
                margin-bottom: 30px;
            }
            .footer-links {
                flex-direction: column;
                gap: 30px;
            }
            .footer-header {
                font-weight: 600;
                font-size: 15px;
            }
            .footer-header ul, .footer-header a {
                margin-top: 10px;
                line-height: 2;
                text-decoration: none;
                color: var(--Grayish-blue);
            }
    }