/* Fonts  */

/* Poppins -> thin 100 extralight 200 italic,regular 400,medium 500,medium italic 500, bold 700 italic*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;1,200;1,500;1,700&display=swap");

/* Goblal Styles */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Variebles */
:root {
  /* Colors */

  /*Primary */
  --TOMATO: hsl(4, 100%, 67%);

  /* Neutral */
  --DARK-SLATE-GREY: hsl(234, 29%, 20%);
  --CHARCOAL-GREY: hsl(235, 18%, 26%);
  --GREY: hsl(231, 7%, 60%);
  --WHITE: hsl(0, 0%, 100%);

  /* General */
  --CONTAINER-BG-C: rgba(0, 0, 0, 0.5);
  --BOX-SHADOW: 10px 10px 5px 0px rgba(0, 0, 0, 54);
  --TEXT-SHADOW: 4px 4px 3px black;

  /* Colors */
  --LIGHT: #fff;
  --DARK: #000;

  --DARK-COLOR-TR: hsla(0, 0%, 0%, 0.205);

  /* Number Sizes */
  --XX-SMALL: 0.5rem;
  --X-SMALL: 1rem;
  --SEMI-SMALL: 1.25rem;
  --SMALL: 1.5rem;
  --MEDIUM: 2rem;
  --LARGE: 2.5rem;
  --X-LARGE: 3rem;
  --XX-LARGE: 3.5rem;

  /* Font Sizes */
  --FW-100: 100;
  --FW-200: 200;
  --FW-300: 300;
  --FW-400: 400;
  --FW-500: 500;
  --FW-600: 600;
  --FW-700: 700;
  --FW-800: 800;
  --FW-900: 900;
}

/* Utilities Classes */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hide Content */

.hide-content {
  opacity: 0;
  visibility: hidden;
}
/* .active-content {
  opacity: 0;
  visibility: hidden;
} */

/* center content */
.center {
  margin: 0 auto;
}

/* Center Content */
.text-center {
  text-align: center;
}

/* Container Propeties */
.wrapper {
  height: 100vh;
  width: 100%;
  flex-flow: column nowrap;
  background-color: var(--CHARCOAL-GREY);
  /* position: relative; */
}

.newsletter-container {
  /* width: calc(100% - 35%); */
  width: 100%;
  border-radius: 15px;
  background-color: var(--WHITE);
}

img {
  display: block;
  object-fit: -webkit-cover;
  object-fit: -moz-cover;
  object-fit: -ms-cover;
  object-fit: cover;
  height: 25px;
  width: 25px;
}
/* The form styles  can't be set globally*/

input {
  font-family: inherit;
  color: inherit;
  outline: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

/* Typograpy */

/* Headings */
h2 {
  font-size: var(--MEDUIM);
  /* font-weight: var(--FW-500); */
  /* font-style: italic; */
  padding: 5px 10px;
  text-align: center;
}

h3 {
  font-size: var(--SMALL);
  font-weight: var(--FW-400);
  margin: 5px 0;
}

h4 {
  font-size: var(--SEMI-SMALL);
  margin: 4px 0;
}

h5 {
  margin: 4px 0;
}

h6 {
  margin: 3px 0;
}