/* CSS VARIABLES */

:root{
    --main-color: #A6A6A6;
    --muted-color: #000;
    --black-color: #333;
}

/* RESET'S */

ul{
    list-style: none;
}

/* GENERAL STYLES */

html{
    scroll-behavior: smooth;
}

body{
    background-color: #82dffe;
    color: var(--black-color);
    font-family: 'Ubuntu', 'Arial', Helvetica, sans-serif;
    max-width: 1440px;
    line-height: 1.5;
    text-align: center;
}

h1{
    font-size: 3rem;
    font-weight: bold;
}

h2{
    font-size: 2.25rem;
    font-weight: bold;
    margin: 15px 0;
}

h3{
    color: var(--muted-color);
    font-size: 1.5rem;
}

img{
    width: 100%;
}

p{
    color: var(--muted-color);
    font-family: 'Open Sans', 'Arial', Helvetica, sans-serif;
}

/* NAVIGATION MENU BAR */

.navigation-menu{
    background-color: #FFF;
}

/* INTRODUCTION SECTION */

.intro{
    min-height: 60vh;
}

.intro h2{
    margin-top: 100px;
}

.download-button{
    background-color: #25d366;
    border-radius: 90px;
    color: #fff;
    padding: 10px 55px;
}

.learn-more-button{
    background-color: #fff;
    border-radius: 90px;
    color: var(--main-color);
    padding: 10px 55px;
}

.buttons{
    margin: 30px 0;
}

.buttons a{
    margin: 15px;
}

/* SEPARATION LINE */

.separation-line{
    border-bottom: 10px solid #6FDBFF;
    margin: 50px 3em 100px;
}

/* ARTICLE SECTIONS */ 

article section{
    margin-bottom: 6.25em;  
}

/* DOWNLOAD SECTION */

.download-section h2{
    font-weight: 500;
    margin: 50px 0 20px;
}

.download-button-store img{
    margin: 20px 0;
}

.download-section p{
    color: var(--black-color);
}

blockquote p{
    margin-top: 50px;
}

/* SECURITY SECTION */

.cards{
    background-color: #fff;
    border-radius: 20px;
    max-height: 100%;
    margin: 25px auto 50px;
    padding: 50px;
}

figure img{
    width: 122px;
}

figure p{
    color: var(--black-color);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 15px auto;
}

figcaption{
    color: var(--muted-color);
}

/* QUESTION SECTIONS */

.faq-section h2{
    color: #000;
}

.faq-section li{
    font-size: 1.125em;
}

.cards a{
    color: var(--black-color);
    font-size: 1.125em;
    text-decoration: underline;
}

/* SITE FOOTER */

footer{
    background-color: #6FDBFF;
    padding-top: 90px;
}

footer h3,
footer a{
    color: #fff;
}

.credits{
    color: #fff;
    background-color: #68D8FF;
    padding: 15px;
    width: 100%;
}

.credits a{
    color: #fff;
}