@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap');
/*
font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif;
*/

/* General design -----------------------------------------------*/

body {
    margin: 0;
    padding: 0;
    background-color: hsl(220, 27%, 13%);
    font-family: 'Open Sans', sans-serif;
    color: white;
}

h1 {
    font-size: 1.3em;
    font-family: 'Raleway', sans-serif;
}

h2 {
    font-size: 1.2em;
    font-family: 'Raleway', sans-serif;
}

h3 {
    font-size: 1em;
    font-family: 'Raleway', sans-serif;

}

p {
    font-size: 0.8em;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/* Header design -----------------------------------------------*/

header, a {
    font-family: 'Raleway', sans-serif;
}

header, header ul {
    display: flex;
}

header {
    max-width: 375px;
    justify-content: space-between;
    margin-top: 10px;
}

header img {
    transform: scale(42%);
    position: relative;
    left: -30px;    
}

header ul {
    padding-left: 0;
}

header li {
    margin-right: 30px;
}

header a {
    color: hsl(0, 0%, 100%);
    font-size: 0.7em;
}

header a:hover {
    border-bottom: solid 1px white;
}

/* Main design -----------------------------------------------*/

main {
    text-align: center;
    margin-top: 35px;
}

main img {
    max-width: 300px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

main h1, main p {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    max-width: 300px;
    line-height: 1.6em;
}

main p {
    max-width: 276px;
}
main a {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 220px;
    background: linear-gradient(to right, hsl(176, 68%, 64%), hsl(198, 60%, 50%));
    border-radius: 20px;
}

.get_started {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 12px;
    padding-top: 12px;
    font-size: 0.8em;
    font-weight: 700;
    color: white;
}

main a:hover, .submit a:hover {
    filter: brightness(110%);
}

/* Pros design */

.pros {
    max-width: 300px;
    margin-top: 100px;
    display: inline-flexbox;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pros1 {
    margin-top: -70px;
}

.pros img {
    transform: scale(72%);
    margin-top: 70px;
}


.pros h3 {
    margin-top: 20px;    
}

.pros p {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    max-width: 298px;
    line-height: 1.6em;
}

/* Arguments section design */

.arguments_section {
    text-align: left;
    margin-top: 180px;
}

.arguments_section img {
    max-width: 300px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.arguments_section h1, .arguments_section p {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6em;
}

.arguments_section p {
    max-width: 292px;
    margin-top: 20px;
}

.arguments_section h1 {
    font-size: 1em;
    max-width: 260px;
    margin-top: 40px;
}

.arguments_section a {
    border-bottom: solid 1px hsl(176, 68%, 64%);
    color: hsl(176, 68%, 64%);
}

.arguments_section a:hover, .arguments_section a[href*="#"]:hover {
    border-bottom: solid 1px #fff;
    color: #FFF;
    filter: brightness(300%);
}

.arguments_section a[href*="#"] {
    background: url('./images/icons8-circled-right-30.png') no-repeat 100% 0 ;
    background-size: 16px 16px;
    padding-right: 19px;
}

/* Reviews design */

.reviews {
    max-width: 297px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 180px;
    margin-bottom: 350px;
}

.quotes {
    width: 25px;
    position: relative;
    top: -60px;
    left: -15px;
}

.review1, .review2, .review3 {
    background-color: hsl(222, 29%, 18%);
    padding: 25px 25px 20px 18px;
    margin-bottom: 20px;
    border-radius: 5px;
    z-index: 9;
}

.reviews p {
    font-size: 0.7em;
    margin: 0 0 20px 0;
}

.reviewers {
    display: flex;
}

.name {
    font-weight: 700;
    font-size: 0.8em;
    display: flex;
}

.title {
    display: flex;
    font-size: 0.5em;
}

.profile {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    position: relative;
    top: 2px;
}

/* Submit section design */

.early_access {
    max-width: 297px;
    margin-top: -160px;
    margin-left: calc((297px / 2) - 297px);
    padding: 20px 20px;
    text-align: center;
    background-color: hsl(217, 28%, 15%);
    border-radius: 5px;
    box-shadow: 0px 1px 6px -2px #000;
    position: absolute;
    left: 50%;
}

.early_access p {
    max-width: 265px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}

input[value=""] {
    font-family: 'Raleway', sans-serif;
    font-size: 0.6em;
    font-weight: 700;
    color: rgb(173, 173, 173);
    border: none;
    border-radius: 25px;
    width: 240px;
    padding-bottom: 12px;
    padding-top: 18px;
    padding-left: 30px;
}

input {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.submit_button {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 15px;
    width: 272px;
    background: linear-gradient(to right, hsl(176, 68%, 64%), hsl(198, 60%, 50%));
    border-radius: 20px;
    padding-bottom: 12px;
    padding-left: 75px;
    padding-top: 12px;
    font-size: 0.8em;
    font-weight: 700;
    color: white;
    border: transparent;
    cursor: pointer;
}

form:invalid {
    color: red;
}

/* Footer design */

footer {
    background-color: hsl(216, 53%, 9%);
    z-index: 9;
    padding-top: 225px;
    padding-left: 20px;
    width: 100%;
}

.infos {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
}

footer img {
    transform: scale(80%);
    padding-left: 47px;
    margin-bottom: 20px;
}

.footer_nav ul {
    padding-left: 0;
}

.contact ul {
    padding-left: 29px;
}

.contact ul li p {
    display: inline-block;
    vertical-align: text-top;
    position: relative;
    top: -8px;
    max-width: 220px;

}

.contact li {
    padding-left: 16px;
    margin-bottom: 15px;
    line-height: 20px;
}

.contact li p {
    margin-top: 0;
    margin-bottom: 0;
}

.contact li span {
    font-size: 0.8em;
}

#location {
    list-style-image: url(./images/icon-location.svg);
}

#phone {
    list-style-image: url(./images/icon-phone.svg);
}

#contact_email {
    list-style-image: url(./images/icon-email.svg);
}

.footer_nav {
    margin-top: 50px;
}

.footer_nav a {
    color: white;
    font-size: 0.9em;
}
.footer_nav li {
    margin-bottom: 10px;
}

.footer_nav ul {
    margin-bottom: 40px;
}

.socials img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(343deg) brightness(102%) contrast(104%);
    border: solid 1px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 8px;
}

.socials a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: relative;
    top: -38px;
}

.socials {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 20px;
}