/*-----------------------------------*\ 
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * dark theme colors 
   */

  --background-primary: hsl(218, 23%, 23%);
  --background-secondary: hsl(220, 26%, 14%);

  --action-primary: hsl(216, 15%, 52%);
  --action-secondary: hsl(218, 23%, 23%);

  --foreground-primary: hsl(210, 38%, 95%);
  --foreground-secondary: hsl(211, 25%, 84%);
  --foreground-tertiary: hsl(214, 20%, 69%);

  --accent: hsl(229, 76%, 66%);

}


  
/* --- Newsletter -- */
  .newsletter {
    position: sticky;
    top: 3rem;
    margin-bottom: 98px;
  }

  .newsletter p {
    color: var(--foreground-secondary);
    margin-bottom: 1rem;
  }

  .newsletter input {
    border: none;
    background: var(--action-primary);
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font: inherit;
    color: var(--foreground-secondary);
    border-radius: 5px;
    margin-bottom: 1rem;
  }

  .newsletter input::placeholder { color: inherit; }

  .newsletter input:focus {
    outline: 2px solid;
    outline-offset: 0;
  }

  .newsletter .btn-primary {
    margin-inline: auto;
    margin: auto; /* fallback for margin-inline */
  }


.wrapper {
  padding-bottom: 1.25rem;
  margin-bottom:  1.25rem;
  border-bottom: 1px solid var(--action-primary);
	 opacity: .6;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap: 15px;

    background: var(--background-primary);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
}



.btn {
  min-width: 10rem;
  border-radius: 100px;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  padding: 0.6875rem 1.1875rem;
}

.btn-primary:hover {
  background: var(--foreground-secondary);
  color: var(--action-primary);
}

/* -- ----- -- */