/* color palette
Muted Emerald (#3F6F5F)
Muted Sapphire (#415C87) 
Muted Amethyst (#6A5B94) 
Muted Turquoise (#5C8585) 
Muted Alexandrite (#4F4077) 
Obsidian (#1A1A1A) 
Silver Mist (#B8B8B8) 
Hex Gold (#D4A64F) 
Moonstone (#D4C9C0)
*/

@media screen {
    /*my standard styling base template*/
    *{
        /*padding: 0;*/
        margin: 0;
    }
    article, aside, figure, footer, header, main, menu, nav, section {
        display: block;
    }
    

    /*defining google fonts*/
    .atkinson-hyperlegible-regular {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
      
      .atkinson-hyperlegible-bold {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 700;
        font-style: normal;
      }
      
      .atkinson-hyperlegible-regular-italic {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 400;
        font-style: italic;
      }
      
      .atkinson-hyperlegible-bold-italic {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 700;
        font-style: italic;
      }
      .atkinson-hyperlegible-regular {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
      
      .atkinson-hyperlegible-bold {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 700;
        font-style: normal;
      }
      
      .atkinson-hyperlegible-regular-italic {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 400;
        font-style: italic;
      }
      
      .atkinson-hyperlegible-bold-italic {
        font-family: "Atkinson Hyperlegible", sans-serif;
        font-weight: 700;
        font-style: italic;
      }
      .raleway-standard{
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
      }


      /*Assigning google fonts*/
    h1, h2, h3, h4{
        font-family: "raleway";
    }
    p, li, footer span{
        font-size: 16px;
        font-family: "Atkinson Hyperlegible";
        color: #B8B8B8;
    }


    /*custom css*/
    /*assigning colors*/

    body{
        background: #D4C9C0;
    }
    nav, footer{
        background: #4F4077;
    }
    #Home{
        background: #3F6F5F;
    }
    #About{
        background: #5C8585;
    }
    #Portfolio{
        background: #415C87;
    }
    #Reviews{
        background: #5C8585;
    }
    #Services{
        background: #6A5B94;
    }
    #Contact{
        background: #5C8585;
    }
    h1, h2, h3{
        color:#1A1A1A;
    }
    span:not(#copyright), li a{
        font-weight: bold;
        color: #D4A64F;
    }
    /*Buttons, dividers, etc*/
    .AboutSection:not(:last-of-type){
        border-bottom: 2px dotted #D4A64F;
        margin: 1%;
        padding-bottom: 1%;
    }
    .toTopLink{
        background-color: #D4A64F;
        border: 2px dotted #1A1A1A;
        border-radius: 15px;
        padding: 1%;
        float: right;
    }
    #headNav li a, #footNav li a, .toTopLink{
        text-decoration: none;}
    footer{
        text-align: center;
    }
    iframe{
        max-height: 100%;
    }
    #headLogo{
        background: #D4C9C0 url(../images/HexRebelLogo-308x233.png) center no-repeat;
        padding: 150px;
        margin: 0 10px;
    }
    
    
}




/*desktop*/
@media screen and (min-width: 1024px){
    /*flex Layout*/
    #Home, .AboutSection, .portfolioSection, .reviewsSection, .servicesSection, .contactSection{
        display:flex;
    }
    #brandHead{
        display: flex;
        align-items: center;
    }
    #Home, .AboutSection, .portfolioSection, .reviewsSection, .servicesSection{
        align-items: center;
    }
    .contactSection{
        align-items: top;
    }
    
    
    /*header and footer*/
    /*#headLogo{
        background: #D4C9C0 url(../images/HexRebelLogo-308x233.png) center no-repeat;
        padding: 120px 160px;
    }*/
    #headNav ul li, #footNav ul li, #Home ul li{
        display: inline-block;
    }
    #headNav, #footNav{
        text-align: center;
    }
    nav ul li:not(:last-of-type){
        border-right: 2px solid rgba(26, 26, 30, .75);
    }
    nav ul li{
        padding: 1%;
        width: 10%;
    }
    /*main*/
    main{
        margin: 0 auto;
    }
    footer p, #BrandTitle, #Home, #About, #Portfolio, #Reviews, #Services, #Contact{
        padding: 1%;
    }
    .sectionText{
        margin: 1%;
    }
    .sectionPic{
        max-width: 20%;
        max-height: 300px;
    }
    .beliefPic{
        max-width: 100%
    }
    #beliefText{
        text-align: center;
    }
    #homeLinks li{
        margin:5px;
    }
    

    

}


/*tablet-landscape -- @media screen and (min-width: 992px) and (max-width: 1199px){}*/
/*tablet-portrait -- @media screen and (min-width: 768px) and (max-width: 991px){}*/
/*tablet*/
@media screen and (min-width: 768px) and (max-width: 1023px){
#wrapper{
        max-width: 1023px;
    }
    #brandHead{
        display: flex;
        align-items: center;
    }
    footer p, #BrandTitle, #Home, #About, #Portfolio, #Reviews, #Services, #Contact{
        padding: 2%;
    }
    .sectionPic, .beliefPic{
        max-width: 100%;
    }
    #headNav ul, #footNav ul{
        list-style: none;
        text-align: center;
        padding: 0;
    }
    #headNav ul li, #footNav ul li{
        list-style: none;
        border:1px solid #1A1A1A;
        padding: 2%;
    }
    #copyright{
        display: block;
    }
    #footNav ul li:first-child{
        border-top: 2px solid black;
    }
}



/*phone*/
@media screen and (max-width: 767px){
    #wrapper{
        max-width: 767px;
    }
    footer p, #BrandTitle, #Home, #About, #Portfolio, #Reviews, #Services, #Contact{
        padding: 5%;
    }
    .sectionPic, .beliefPic{
        max-width: 100%;
    }
    #headNav ul, #footNav ul{
        list-style: none;
        text-align: center;
        padding: 0;
    }
    #headNav ul li, #footNav ul li{
        list-style: none;
        border:1px solid #1A1A1A;
        padding: 5%;
    }
    #copyright{
        display: block;
    }
    #footNav ul li:first-child{
        border-top: 2px solid black;
    }
    h1, h2, h3{
        color:#1A1A1A;
        padding: 1% 0;
    }
}