@charset "UTF-8";

html {
    background-color: antiquewhite;
    font-family: montserrat, sans-serif;
}

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

/* HEADER */

header {
    display:flex;
    justify-content: space-between;
    margin: 0;
    background-color: rgb(101,122,18);

}

header img {
    margin: 20px;
    max-width: 400px;
    height: auto;
}

h1 {
    margin: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: right;
    align-content: center;

}

.align-right {
    text-align: right;
}

/* NAVIGATION */

ul li {
    display: inline;
    list-style-type: none;
    width: 150px;
    float:right;
    text-align: center;
  }

ul li a {
    display: block;
    color: black;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
    align-self: center;
    Height: 85px;
    align-content: center;

}

ul li:hover a{
    background-color: rgb(101,122,18);
    color:antiquewhite;
}

/* MAIN */


.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.item {
    display:flex;
    flex-direction: column;
    flex: 1;
    border-color: rgb(101,122,18);
    margin: 40px;
}

.sub-items {
    align-self: center;
    width: fit-content;
    flex-grow: 1;
}

.sub-items img {
    flex-grow: 2;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 20px;
  }

.dropdown:hover{
    color:rgb(101,122,18)
}
  
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    color: black;
  }
  
.dropdown:hover .dropdown-content {
    display: block;
}

.not-bold{
    font-weight: normal;
}

.all-courses{
    display:flex;
    flex-wrap: wrap;
}

.course{
    align-self: center;
    width: fit-content;
    flex-grow: 1;

}

/*FOOTER*/

footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(101,122,18);
    color: white;
    text-align: center;
}
/* FONTS */


.montserrat-body{
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-style: normal;
}








/* NOTES

COLORS

TMCC Green: rgb(101,122,18)



selector {
    property: value;
    property2: value;
    property3: value;
}


----------
~ Tag ~

tag {
    property: value;

}

p { 
    color:deeppink;
    font-size: medium;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
<p>Paragraph content goes here</p>


----------
~ Class ~

.class {
    property: value;
}

.pink {
    height: 100px;
    background-color: pink;
}

<footer class="pink">
footer content goes here 
</footer>


----------
~ ID ~

#id {
    property: value;
}

#vegan {
    background-color: green;
    color: darkgreen;
    font-size: 3rem;
}

<article id="vegan">
    article content goes here 
</article>


----------
~ pseudo-class ~

tag:pseudo-class {
    property: value;
}

a:hover {
    color:red;
}
<a href="a" target="_blank"> Click here to make all your dreams come true</a>


----------
~ attribute ~

can only be put on tag style

tag[attribute] {
    property: value;
}

a[target="_blank"] {
    color: cornflower;
}

<a href="a" target="_blank">click here blah blah blah </a>


----------
~ compound selectors ~

    Inside of...

.class tag #id .class2 tag2 {
    property: value;
}

main .fishy p {
    color: salmon;
}

<main>
    <article class="fishy">
        <p>I am a salmon colored paragrahp</p>
    </article>
</main>

    specific

main .fishy p span {
    color: orange;
}

<main>
    <article class="fishy">
        <p>I am a <span>salmon</span> colored paragrahp</p>
    </article>
</main>

    apply to multiple things 

.class, tag, #id, .class2, tag2 {
    property: value;
}

main, .fishy, p, span {
    backgroun-color: salmon;
}

<main>
    I have a SALMON background
</main>

<article class="fishy">
    I have a SALMON background
</article>

<p>
    I have a SALMON background
</p>

<span>
    I have a SALMON background
</span>


*/