/* freeCodeCamp Web Responsive Certification.
- Project Name: Technical Documentation Page
- GitHub Repository link: 
https://github.com/w3zeblamf/technical-documentation-page.git
https://w3zeblamf.github.io/technical-documentation-page/
***************************************** */

/* Set the font size (Google fonts) */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;600;700&display=swap');

/* --Reset and Common Styles-- */

/* The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page. */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    outline: none;
    text-decoration: none;
    font-family: 'Zilla Slab', serif;
}

/*Color Variables*/

:root {
    --primary-color: #1B1B1B;
    --secondary-color: #00FFC3;
    --light-gray-color: #E7E7E7;
}

/* REM: Relative to font-size of the root element: Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property's initial value. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px
 
 We are going to use 'rem' as the measurement unit. By default 1 ram = 16 pixels, because the font size of the HTML element  is equal to 16 pixels.
 
 To convert one ram into then pixels, we have to decrease the font size of the HTML element. We need to make it sixty two point five percent. So, in this case, one rem (1rem) will be equal to ten pixels (10px). */


html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
   
}

/* -- End of Reset and Common Styles-- */


/* Nav Styling */
nav {
    width:  32rem;
    height: 100vh;
    color: var(--primary-color);
    overflow-y: scroll;
    overflow-x: hidden;

}

nav header {
    padding: 1.5rem;
    margin-left: 1rem;
    margin-top: 3rem;
}

nav a {
    color: var(--primary-color);
    display: block;
    font-size: 2.3rem;
    padding: 1.5rem;
    margin-left: 1rem;
    font-weight: 500;
    
}

a:link, a:visited {
    color: #005282;
}

/* End of Nav Styling */

/* Main container styling */

main {
    flex: 1;
    height: 100vh;
    overflow-y: scroll;
}

section {
    padding: 1.8rem;
    line-height: 1.5;
}


header {
    font-size: 3.9rem;
    font-weight: 700;
    padding: 1.5rem;
    color: var(--primary-color);
}


.main-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

#introduction {
    margin-top: 2rem;
}

.intro-title {
    font-size: 4.9rem;
    font-weight: 700;
    color: var(--primary-color);
}


i {
    margin-right: .5rem
}

h2 {
    font-size: 3rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    font-weight: 500;
    color: var(--primary-color);
}

h3 {
    font-size: 2.8rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    font-weight: 500;
    color: var(--primary-color); 
}

h4 {
    font-size: 2.3rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    font-weight: 500;
    color: var(--primary-color);
}

p{
    font-size: 2rem;
    padding: inherit;
}

code {
    font-size: 2rem;
    padding: inherit;
}

ul  {
    font-size: 2rem;
    padding-left: 6rem;
 
    
}

.callout { 
    background-color: #bbd8ff;
    border-left: .6rem solid #005282;
    border-radius: .6rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin-left: 2rem;
    margin-top: 2rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    width: 100%;
    max-width: 90%;
    
    
}

pre {
    background-color: #f4f4f4;;
    border-left: .6rem solid #005282;
    border-radius: .6rem;
    font-size: .1rem;
    line-height: 1.2;
    margin: 2rem;
    max-width: 90%;
    overflow: auto;
    width: 100%;
}

.selector {
    color: green;
}

.property {
    color: red;
}

/* End of Main container styling */


/* Media query styling */ 

@media (max-width: 600px) {
    
    body {
        flex-direction: column;
      
    }
    
    nav {
        height: 20rem;
        overflow-y: scroll;
        width: 100%;
    }
    
    main {
        height: auto;
        width: 100%;
        overflow-y: scroll;
    }
}

/* End Media query styling */