@charset "UTF-8";

html, body {
     margin: 0;
     padding: 0;
     text-align: center;
     font-family: "shantell Sans", sans-serif;
}

body {
     width: 90%;
     margin: auto;
     padding-bottom: 75px;
     background-color: antiquewhite;
    }

header img {
     margin-top: 10px;
     margin-bottom: 10px;
     width: 10%;
    }

/* NAVIGATION */

nav{
     position: relative;
     z-index: 9999;
}

nav ul {
     width: 80%;
     list-style-type: none;
     list-style-image: none;
     display: flex;
     justify-content: center;
     margin: 0 auto;
     padding: 0;
}

nav ul li {
     height: 100px;
     position: relative;
     flex-grow: 1;

}

nav ul li a {
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     font-weight: normal;
     font-size: 1.5rem;
     color: rgb(255, 126, 5);
}

nav ul li a:hover  {
     color: rgb(255, 32, 148);
}

nav ul li ul {
    display: none;
}

nav ul li ul a {
     position: absolute;
     width: 100%;
     flex-direction: column;
     display: none;
}

nav ul li:hover ul {
     display:block;
     color: antiquewhite;
     background-color: rgb(255, 126, 5);
}

nav ul li ul li a {
     display: flex;
     height: 100px;
     color: antiquewhite;
}

nav ul li ul li a:hover {
    color: antiquewhite;
    background-color: rgb(255, 32, 148);
}

/* MAIN COnTENT */

main {
     display: flex;
     flex-direction: row;
     margin: 0 auto;
     align-content: center;
     vertical-align: middle;
     align-items: center;
     justify-content: center;
     text-align: center;

}

main a {
    text-decoration: none;
}

main h2 {
    font-family: 'kaoly_demoregular';
    color: rgb(255, 32, 148);
    font-size: 2.5rem;
    line-height: 3.5rem;
}

.layout-all {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: center;
     justify-content:center;
     align-items: center;
     width: 90%;
     margin:auto;
}

.top-to-bottom{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content:center;
    align-items: center;
    width: 90%;
    margin:auto;
}

.column{
     font-size: 1.25rem;
     line-height: 1.1em;
     margin: auto;
     white-space:normal;
     width:30%;
     padding: 10px;
     justify-content: center;
     
}

.one-third-column-left{
    float: left;
    font-size: 1.25rem;
    line-height: 1.1em;
    margin: 25px;
    white-space: normal;
    width:30%;
    padding: 10px;
}

.one-third-column-right{
    float: right;
    font-size: 1.25rem;
    line-height: 1.1em;
    margin: 25px;
    white-space: normal;
    width:30%;
    padding: 10px;
}

.section1 {
     display: block;
     text-align: left;
}

.section2 {
     display: block;
     text-align: right;
}

main img {  
     width: 100%;
     justify-content:center;
     align-items: center;
     max-width: 500px;
}

.left-image {
     transform: rotate(-15deg);
     float:right;

}

.right-image {
     transform: rotate(15deg);
     float:left;
}

.current-page {
    color: rgb(255, 32, 148);
}

.link {
    color: rgb(255, 126, 5);
    text-decoration: none;
}

footer {
    position: fixed;
    height: 75px;
    background-color: rgb(255, 32, 148);
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 20px;
    vertical-align:middle;
}

footer img {
    float:left;
    width: auto;
    max-height: 70px;
}

footer p {
    float: right;
    justify-content: right;
    margin: 25px;
    white-space: normal;
    color:white;
}

/* FONTS */

.shantell-sans-regular {
    font-family: "Shantell Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
      "BNCE" 0,
      "INFM" 0,
      "SPAC" 0;
  }

.shantell-sans-bold {
    font-family: "Shantell Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
      "BNCE" 0,
      "INFM" 0,
      "SPAC" 0;
  }
  
  
  
@font-face {
     font-family: 'kaoly_demoregular';
     src: url('../images/kaoly_demo-regular-webfont.woff') format('woff2'),
         url('../images/kaoly_demo-regular-webfont.woff2') format('woff');
     font-weight: normal;
     font-style: normal;
}










/* NOTES

COLORS

orange: rgb(255, 126, 5);
pink: rgb(255, 32, 148);



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>


*/