@import '../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
@import url('https://fonts.googleapis.com/css?family=Bitter|Open+Sans:400,700'); // custom font

// --------------------------------

// Back To Top - by CodyHouse.co

// --------------------------------

:root {
  // colors
  @include defineColorHSL(--cd-color-1, 53, 29%, 95%); // Alabaster
  @include defineColorHSL(--cd-color-2, 330, 13%, 42%); // Falcon
  @include defineColorHSL(--cd-color-3, 5, 76%, 62%); // Burnt Sienna


  
  // font
  --font-primary: 'Bitter', sans-serif;
  --font-secondary: 'Open Sans', sans-serif; 
}




.cd-top {
  display: none;
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  display: inline-block;
  background-color: #2F1F91;
  color: white;
  cursor: pointer;
  padding: 0px;
  border-radius: 4px;
}

.cd-top::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: white;
}
.cd-top:hover {
  cursor: pointer;
  border: 2px solid #2F1F91;
  color: #2F1F91;
  
}
.cd-top:active {
  background-color: #2F1F91;
}
.cd-top.show {
  opacity: 1;
  visibility: visible;
}

.js {
  .cd-top {
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility .3s, background-color .3s;
  }

  .cd-top--is-visible { // back-to-top button visible
    visibility: visible;
    opacity: 1;
  }

  .cd-top--fade-out { // reduce button opacity if user keeps scrolling
    opacity: .5;
  }

  .cd-top:hover {
    background-color: var(--cd-color-3);
    opacity: 1;
  }
}

//demo style
body {
  background-color: var(--cd-color-2);
  @include fontSmooth;
}

.cd-main-header {
  height: 180px;
  background-color: lightness(var(--cd-color-2), 0.76);
  color: var(--cd-color-1);
  font-family: var(--font-secondary);
  
  h1 {
    font-weight: bold;
    color: inherit;
    text-transform: uppercase;
  }

  p {
    color: lightness(var(--cd-color-2), 1.24);
  }

  a {
    color: var(--cd-color-1);
    font-family: var(--font-primary);
  }

  @include breakpoint(md) {
    height: 280px;
  }
}

.cd-main-content p {
  color: var(--cd-color-1);
}