I was styling my website and I choose Catamaran and Lato for headings and body respectively. However, the headers seem to inherit styles from the body which makes the font and the font size the same thing for my headings and paragraph. I was thinking that this is a problem of specificity but I cannot figure out what went wrong.

```css
@import url("colors.css");

    /*Global Styles
    ------------------------------------------------*/
    html, body {
        margin: 0;
        padding: 0;
        font-family: 'Catamaran', Sans-Serif;
        font-size: 16px;
    }  

    p{
        color: var(--dark_text);
    }

    img{
        margin: 0;
        padding: 0;
    }

    h1 h2 h3 {
        font-family: 'Catamaran', Sans-Serif;
        font-size: 66px;
        margin: 0;
        padding: 0;
        color: var(--dark_red);

    }

    .content_wrap {
        width: 800px;
        margin: 0 auto;
        padding: 60PX 0;
    }

    /*Navigation Bar  
    ------------------------------------------------*/  
    #nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    #nav li {
        float: left;
    }

    #nav li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    /*Projects 
    ------------------------------------------------*/

    /*Profile
    ------------------------------------------------*/
    #profile{
        background: var(--dark_red);
        color: var(--white_text);
        text-align: center;
    }

    #profile p{
        color: var(--white_text);
    }

    #profile .button{
        text-decoration:none;
        color: var(--dark_text);
        background: var(--light_green);
        padding: 6px;
        border: 2px var(--light_green);
        border-radius: 6px;
        display: inline-block;
    }

    #profile .button:hover{
        text-decoration:none; 
        background: rgb(241, 227, 228,80);
    }

    /*Projects 
    ------------------------------------------------*/
    #projects{
        background-color: var(--light_green);
    }

    #projects .button{
        text-decoration:none;
        color: var(--white_text);
        background: var(--dark_red);
        padding: 6px;
        border: 2px var(--dark_red);
        border-radius: 6px;
        display: inline-block;
    }

    #projects .button:hover{
        text-decoration:none; 
        background: rgb(96, 123, 125, 80);
    }

    /*Work Experience 
    ------------------------------------------------*/
    #work_experiences{
        background-color: var(--light_red);
    }

    #work_experiences p{
        margin: auto;
    }

    /*Drawings and Paintigs
    ------------------------------------------------*/
    #drawings_paintings{
        margin: 0;
        padding: 0;
    }

    /*Footer
    ------------------------------------------------*/
    footer{
        margin: 0;
        padding: 0;
        background-color: var(--dark_green) ;
        color: var(--white_text);
    }

    footer a{
        color:seashell;
        text-decoration: none;
    }
```

```html
<!DOCTYPE html>
    <HTML lang="en-US" dir="ltr">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" 
                content="width=device-width, initial-scale=1">
            <meta name="description"
                content="Clycine Yuanqing Hao's personal website and some 
                funny stuffs : )">
            <link href="https://fonts.googleapis.com/css?family=Catamaran|Lato:400i" 
                rel="stylesheet">
            <link href="styles.css" rel="stylesheet">
            <title>Clycine's personal website</title>
            <script src="main.js"></script>
        </head>

    <BODY>
        <H1 aria-label="Hello World"> <!--to add CSS code to make this displayed in random positions inside of a rectagle-->
            <div class="grid" aria-hidden="true">
            <span>H</span>
            <span>E</span>
            <span>L</span>
            <span>L</span>
            <span>O</span>
            <span>W</span>
            <span>O</span>
            <span>R</span>
            <span>L</span>
            <span>D</span>
            </div> </H1>

                         <!--***************** TABLE OF CONTENTS *****************-->

    <section id="nav">
        <nav role="navigation"> 
            <ul>
                <li> <a href="/~yhao19">About Me</a></li>
                <li> <a href="cs_related.html">Computer Science related</a></li>
                <li> <a href="drawings_paintings.html">Drawings and Paintings</a></li>
                <li> <a href="funny_stuffs.html">Funny Stuffs</a></li>
            </ul>
        </nav>
    </section>

                         <!--***************** PROFILE ******************-->
    <section id="profile">
        <div class="content_wrap">
            <h1>Clycine Yuanqing Hao </h1> 
            <picture>
                <source media="(min-width:600px)"
                        srcset="pictures/cly/behindLilas815x929.JPG">
                <source srcset="pictures/cly/behindLilas546x602.JPG">
                <img src="pictures/cly/behindLilas815x929.JPG" 
                        alt="Clycine next to a lilas tree" 
                        width="163" height="186">
            </picture>
            <h2>CS student + Digital & Conventional Artist</h2>
            <p>As a Computer Science student, I look forward to explore the world of innovation and 
                technology. I am interested in understanding how my knowledge and skills can apply 
                to real-life tech projects. </p>
            <p>As an artist, I am passinoante to discover beauty and to express them in my own way, 
                with a cup of tea in my hand, of course.</p>
            <a class="button" href="file/Yuanqing(Clycine)_Hao_Resume.pdf">Click here to see PDF of my resume</a>
        </div>
    </section>

                         <!--***************** PROJECT ******************-->
    <section id="projects">
        <div class="content_wrap">
            <h3 class="title">Projects & Researches</h3>
            <p>Biology research project (written report) - <i>L’hydroponie : une alternative à l’agriculture conventionnelle ?</i></p>
            <p>Language: French</p>
            <blockquote>"The main objectives of this research were to understand how different hydroponic systems
                function and what equipment they require, to acknowledge this technique's limits and
                advantages, to explore the role played by nutrients in plants' growth, and ultimately, to
                determine if hydroponics can be an alternative to conventional agriculture."  
                (Boutiba & Hao, 2019)</blockquote>
            <a class="button" href="file/rapport_final_biologie.pdf">PDF of the research</a> 
        </div>
    </section>

                         <!--***************** WORK EXPERIENCES ******************-->
    <section id="work_experiences">
        <div class="content_wrap">
            <h3 class="title">Work Experiences</h3>
            <p>Private French Tutor</p>
            <p>01/2022 to 12/2022</p>
            <p>Individuals – Montréal, Québec</p>
            <ul>
                <li>Offered tutoring for intermediate French learners.</li>
                <li>Helped students learn more about Québec culture through practical conversations.</li>
                <li>Integrated French lessons into real-life scenarios and role-playing.</li>
            </ul>

            <p>Project Intern</p>
            <p>06/05/2022</p>
            <p>Soteria120 – Calgary, Alberta</p>
            <ul>
                <li>Obtained real-work experience by participating in 
                    a user experience testing for website in Soteria120</li>
                <li>Collaborated with a team of 3 students and program manager 
                    that included data entry (input validations), design validations, 
                    user-experience testing, and quality assurance report writing.</li>
            </ul>
        </div>
    </section>

    <footer>
        <div class="content_wrap">
            <a href="#navbar">Back to the table of contents</a>
            <a href="https://www.mcgill.ca/">McGill University</a>
            <p><pre>Phone number: (819)815-3589         Email: clycinehao@gmail.com </pre> </p>
        </div>
    </footer>
    </BODY>

    </HTML>    
```

Thank you so much !