:root {
   --notification-success-background: hsl(100, 17%, 21%);
   --notification-success-primary: hsl(100, 72%, 73%);
   --notification-failure-background: hsl(10, 17%, 21%);
   --notification-failure-primary: hsl(10, 72%, 73%);
   --background: hsla(35, 30%, 85%, 1);
   --background-dark: hsla(65, 14%, 30%, 1);
   --primary-yellow: hsla(49, 100%, 50%, 1);
   --navbar-height: 64px;

   --bg-light: hsl(52, 100%, 99.8%);
   --bg: hsla(35, 30%, 75%, 1);
   --color: hsl(210, 20%, 5%);
   --color-light: hsl(210, 20%, 97.5%);
}

/* __common__ 
   - standard
*/
body {
   font-family: 'Noto Serif', system-ui, -apple-system, sans-serif;
   background: var(--background);
   color: var(--color);
   overflow-x: hidden;
   margin: 0;
   padding: 0;
}

section {
   display: flex;
   justify-items: center;
   height: fit-content;
   width: 100vw;
   overflow-y: scroll;
}

.sans {
   font-family: "Noto Sans";
}

.serif {
   font-family: "Noto Serif";
}

.bg-secondary-sat {
   background: hsl(120, 35%, 45%);
   color: var(--color);
}

.bg-secondary-light {
   background: hsl(35, 35%, 85%);
   color: var(--color);
}

.bg-secondary-dark {
   background: hsl(105, 40%, 25%);
   color: var(--color-light);
}

.bg-accent-dark {
   background: hsl(210, 30%, 30%);
   color: var(--color-light);
}

.bg-accent {
   background: hsl(210, 25%, 50%);
   color: var(--color);
}

.navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   margin: 0;
   z-index: 100;
}

.icon {
   display: inline-flex;
   margin-left: 0.75rem;
}

/* __common__
   - standard
 */
.icon svg {
   overflow: visible;
}

.favicon {
   font-weight: 800;
   font-size: 1.5rem;
   line-height: 1;
   margin: 0;
   padding: 0;
   text-decoration: none;
   color: var(--color);
}

/* __common__
   - standard
 */
blockquote>p {
   color: hsla(210, 5%, 50%, 1);
   font-weight: 200;
   letter-spacing: 0.1rem;
}

/* __common__ */
p>img {
   /*
      This style targets images embedded with markdown.
   */
   margin: auto;
   object-fit: contain;
   max-height: 80vh;
   max-width: 90%;
   border-radius: var(--bs-border-radius);
   box-shadow: var(--bs-box-shadow);
   transition: .25s transform ease-in-out;
}

p>img:hover {
   transform: scale(1.02);
}

/* __common__ */
#Footer {
   background: hsla(65, 14%, 26%, 1);
}

/* __common__ */
#Footer ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

/* __common__ */
#Footer li {
   padding-bottom: .5rem;
}

/* common */
.btn-yellow {
   background-color: hsla(51, 100%, 45%, 1);
   transition: all 0.3 ease-in-out;
}

/* common */
.btn-yellow:hover {
   background-color: hsla(51, 100%, 80%, 1);
}

/* __common__ */
.underline {
   position: relative;
   z-index: 10;
}

/* __common__ */
.underline::after {
   content: '';
   background: var(--primary-yellow);
   position: absolute;
   left: 0;
   bottom: -2%;
   width: 100%;
   height: 20%;
   z-index: -1;
   transition: all .15s ease-in-out;
}

/* __common__ */
.underline:hover::after {
   bottom: -7%;
   height: 20%;
}

/* __common__ */
#FooterWave {
   /* margin-top: calc(100vw / 1440 * 0.45 * 320 * -1); */
   margin-bottom: -1px;
   background: var(--background);
}

/* __common__ */
.notification__success {
   background-color: var(--notification-success-background);
   color: var(--notification-success-primary);
}

.notification__failure {
   background-color: var(--notification-failure-background);
   color: var(--notification-failure-primary);
}

.notification {
   position: absolute;
   width: max-content;
   left: 0;
   right: 0;
   bottom: 24px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2rem;
   border-radius: 6px;
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
   transform: translateY(30px);
   opacity: 0;
   visibility: hidden;
   animation: fade-in 4s linear;
}

.notification__icon {
   height: 26px;
   width: 26px;
   margin-right: .5rem;
}

.notification__progress__success {
   background: linear-gradient(to right,
         var(--notification-success-background),
         var(--notification-success-primary));
}

.notification__progress__failure {
   background: linear-gradient(to right,
         var(--notification-failure-background),
         var(--notification-failure-primary));
}

.notification__progress {
   position: absolute;
   left: 4px;
   bottom: 4px;
   width: calc(100% - 8px);
   height: 3px;
   transform: scaleX(0);
   transform-origin: left;
   border-radius: inherit;
   animation: progress 3.5s 0.3s linear;
}

@keyframes fade-in {
   5% {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   95% {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes progress {
   to {
      transform: scaleX(1);
   }
}

/* __home__ */
[aria-expanded="false"] svg {
   transform: rotate(90deg);
   transition: transform .4s ease-in-out;
}

[aria-expanded="true"] svg {
   transform: rotate(180deg);
   transition: transform .4s ease-in-out;
}

/* __home__ */
#signUpForm {
   transition-duration: 1s !important;
}

/* __home__ */
#Testimonials p {
   margin: 0 1rem;
}

/* __home__ */
#Problem {
   background: hsla(35, 30%, 85%, 1);
   color: var(--color);
}

/* __home__ */
#Solution {
   /* Linear gradient (white to transparent) on top of the image */
   background: linear-gradient(hsla(35, 30%, 85%, 1) 0%, hsla(35, 30%, 85%, 0.2) 100%), url(/img/endless-constellation.png);
   background-size: 200px;
   background-repeat: repeat;
}

/* __home__ */
#Testimonials {
   /* Linear gradient (white to transparent) on top of the image */
   background: linear-gradient(hsla(65, 14%, 90%, 0.4) 50%, hsla(65, 14%, 90%, 1) 100%), url(/img/px_by_Gre3g.webp);
   background-size: 200px;
   background-repeat: repeat;
}

/* __home__ */
#Banner {
   background-size: cover;
   background-position: center;
   box-shadow: inset 0 0 0 25vh hsla(35, 100%, 15%, .1);
   width: 100%;
   height: 75vw;
   max-height: 50vh;
   min-height: 30vh;
}

/* __home__ */
#Features {
   background: linear-gradient(to bottom right, hsla(58, 12%, 18%, 1) 0%, hsla(65, 14%, 28%, 1) 75%);
}

/* __home__ */
#Features h2 {
   color: hsla(49, 97%, 65%, 1);
}

/* __home__ */
.bg-green {
   background-color: hsla(65, 14%, 60%, 1);
}

/* __news__ __about__ */
.card {
   box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
   transition: .4s transform cubic-bezier(.155, 1.105, .295, 1.12),
      .4s box-shadow,
      .4s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
   cursor: pointer;
   backface-visibility: hidden;
   transform: translateZ(0);
   -webkit-font-smoothing: subpixel-antialiased;
}

/* __news__ __about__ */
.card:hover {
   transform: scale(1.0625);
   box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

/* __news__ __about__ */
.card .btn {
   z-index: 2;
   position: relative;
}