/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
/**
 * Add your custom styles below
 * 
 * Remember: 
 * - Be organised, use comments and separate your styles into meaningful chunks
 *    for example: General styles, Navigation styles, Hero styles, Footer etc.
 * 
 * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
 
 * Module: HTML/CSS
 * Lesson: 1
 */

 @import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);

 /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 /* Base reset */
 :root {
     --grey-dark: #545454;
     --grey-light: #737373;
     --white: #ffff;
     --orange: #f15a29;
     --orange-light: #f15a29;
     --black: #00000;
 }

 * {
     margin: 0px;
     padding: 0px;
 }

 body {
     -webkit-font-smoothing: antialiased;

     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     box-sizing: border-box;
     font-family: "Roboto", sans-serif;
     color: var(--grey-dark);
 }

 /*  Setion 1: navigation header  */
 /* section 1 container */
 .content1 {
     display: flex;
     justify-content: center;
     padding: 15px 0px 10px 0px;
     flex-direction: row-reverse;
     /* order of the nav text*/
 }

 h1 {
     font-size: 60px;
     margin-bottom: 20px;
     font-weight: 300;
     /*   font-family: inherit; */
 }

/* navigations links */
 .top-navigation {
     background-color: var(--white);
     width: 100%;
     height: 10%;
     /*position: fixed; */
 }

 li {
     list-style: none;
     display: inline-block;
 }

 /* or active tab */
strong {
    font-weight: 550;
} 
 a:hover {
    text-decoration: none;
     color: var(--orange);
 }

 .nav_link {
     text-decoration: none;
     flex-direction: row;
     padding: 10px;
     display: inline-block;
     font-size: 18px;
     color: var(--grey-dark);
 }

 /* navigations links - end  */
 .logo {
     padding: 0% 40% 0% 3%;
     max-width: 50px;
     max-height: 50px;
 }

 /* section 2  - container */
 .content2 {
     text-align: center;
     padding: 300px;
     color: var(--white);
     text-align: center;
 }

 .intro {
     margin: 0;
     padding: 0;
     /* background: url("..img/first-background.jpg"); */
     background-image: url(../img/first-background.jpg);
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-attachment: fixed;
 }

 button {
     margin: 10xp 10px 10px 10px;
     width: 170px;
     height: 50px;
     background-color: var(--orange);
     border-radius: 0.3rem;
     border: none;
     transition: 0.6s;
     overflow: hidden;
     cursor: pointer;
     font-family: inherit;
     font-size: 18px;
     color: var(--white);
 }

 /* main button hover */
 button:hover {
     background-color: var(--white);
     color: var(--orange);
 }

 /* sections  3 icon space */
 .content3 {
     text-align: center;
     display: block;
     background-color: var(--white);
     overflow: hidden;
     padding: 12rem 0rem 12rem 0rem;
 }

 /* images of devices */
 img {
     width: 127px;
     height: 127px;
     display: inline-block;
 }

 h2 {
     /*   padding: 30px 0px 30px 0px; */
     margin-bottom: 30px;
     font-size: 30px;
     font-family: inherit;
     font-weight: 400;
     display: block;
 }

 h3 {
     font-size: 20px;
     font-weight: 450;
     margin-top: 50px;
     padding: 0 10px 0 10px;
     color: var(--grey-dark);
 }

 /* section 4 -  footer  */
 .footer {
     background-color: var(--white);
     overflow: hidden;
     padding: 0rem 0rem 0rem 0rem;
     text-align: center;
 }


 .icon {
     text-align: center;
 }
 
 .social {
    width: 22px;
    height: 22px;
    border-radius: 60px;
    box-shadow: 0px 0px 3px var(--grey-light);
    padding: 0.5em 0.6em;
    margin: 0 20px 0 20px;
 }

 h4 {
     font-size: 16px;
     font-weight: 350;
     margin-top: 30px;
     margin-bottom: 20px;
 }