/*                              Body BG   Accent    Accent2   Header    Body Text
/* color scheme 'sunset' -      #4A4E4D • #0E9AA7 • #3DA4AB • #F6CD61 • #FE8A71 */
/* color scheme 'blues' -       #EBF4F6 • #BDEAEE • #76B4BD • #58668B • #353030 */
/* color scheme 'dark tints' -  #BCE784 • #5DD39E • #348AA7 • #525174 • #513B56 */
/* color scheme 'mint' -        #2C6975 • #68B2A0 • #CDE0C9 • #E0ECDE • #FFFFFF */
/* color scheme 'dark' -        #EEF9E5 • #DDFC74 • #BF6900 • #1F9E9E • #001119 */
/* color scheme 'kaykoco' -     #E6E6E6 • #EA6500 • #69CA98 • #6B9199 • #302A44 */

html{
  scroll-behavior: smooth;
}
body, page-content {
  margin: 0;
  color: inherit;
  font-family: Poppins, sans-serif;
  overflow-x: hidden;
  }
  #loading{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #E6E6E6;
    z-index: 100;
    transition: .5s;
  }
  /*PAGE CONTAINER*/
  #page-content{
    background-color: #E6E6E6;
    padding-top: 14%;
  }
  /*MAIN HEADER*/
  #main-header{
    z-index: 99;
    margin: 0 auto;
    border-bottom: solid thin #FFFFFF;
    position: fixed;
    top: 0;
    width:100%;
    overflow: hidden;
    background-color: #241F33;
    transition: .25s ease-in;
    }
    /*SITE HEADER*/
    #site-header{
      margin: 0 auto;
      display: flex;
      z-index: 2;
      transition: .25s ease-in;
      box-shadow:10px 10px 20px rgba(48, 42, 68, .6);
      }
      #brand-logo{
        margin: 1% 0 0 2%;
        height: 76px;
        background-image: url('../img/logos/Kaykoco_Creative_Logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        flex: 1;
      }
      #page-title{
        padding: 1%;
        color: #FFFFFF;
        text-align: center;
        flex: 1;
      }
    /*PAGE HEADER*/
    #page-header{
      display: block;
      margin: 0 auto;
      border-bottom: solid thin #FFFFFF;
      position: fixed;
      top: 100;
      width:100%;
      overflow: hidden;
      background-color: #241F33;
      transition: .25s ease-in;
    }
  /*NAV*/
  .mobileBtn{
    display: none;
  }
  #main-nav, #page-nav{
    margin: 0 auto;
    text-align: center;
    flex: 1;
    }
  #main-nav{
    padding: 2%;
  }
  #page-nav{
    font-size: small;
  }
    .nav-list{
      display: flex;
      list-style: none;
      padding-inline-start: 0;
      }
      .nav-list li{
        flex: 1;
        }
        .nav-list a{
          color: #BDEAEE;
          text-transform: uppercase;
          text-decoration: none;
          border-bottom: 1px dotted #BDEAEE;
          transition: ease-in .25s;
        }
        .nav-list a:hover{
          color: #EBF4F6;
          text-decoration: none;
          border-bottom: 1px solid #EBF4F6;
          transition: ease-in .25s;
        }
        .current-link a{
          color: #EBF4F6;
          border-bottom: 4px solid #EBF4F6;
        }
        .current-link a:hover{
          color: #FFFFFF;
          border-bottom: 4px solid #FFFFFF;
        }
    .btn{
      margin: 0;
      border: thin solid #302A44;
      padding: 1%;
      width: fit-content;
      background-color: #BDEAEE;
      color: #76B4BD;
      transition: ease-in .25s;
      text-align: center;
      cursor: pointer;
      user-select: none;
    }
    .btn:hover{
      background-color: #BDEAEE;
      color: #302A44;
      transition: ease-in .25s;
    }
    #top-button{
      display: none;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  /*MAIN FOOTER*/
  #main-footer{
    margin: 0 auto;
    border-top: solid thin #302A44;
    padding: 2% 0 2% 0;
    width:100%;
    background-color: #E6E6E6;
    font-size: x-small;
    text-align: center;
    color: #302A44;
    }
    .footer-text{
      padding-top: 2%;
    }
    #footer-nav{
      margin: 0 auto;
      max-width: 60%;
      }
      #footer-nav-list a{
        color: #302A44;
        text-transform: uppercase;
        text-decoration: none;
        border-bottom: thin dotted #302A44;
        transition: ease-in .25s;
      }
      #footer-nav-list a:hover{
        color: #EA6500;
        text-transform: uppercase;
        text-decoration: none;
        border-bottom: thin dotted #EA6500;
        transition: ease-in .25s;
      }