/* 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");

/* Figtree for the body */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");


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


.weather__icon {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: background-image 0.9s ease-in-out;
}

/* Variebles*/
:root {
  /* 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 */
  --PRIMARY-COLOR: #963792; /* 60% */
  --SECONDARY-COLOR: #444463; /* 30*/
  --TERTIARY-COLOR: #7273a6; /* 10%*/
  --TEST-4: #abaabc;
  --LIGHT: #fff;
  --DARK: #000;

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

  /* Number Sizes */
  --XXS-N-0-5: 0.5rem;
  --XS-N-1: 1rem;
  --SEMI-S-N-1-25: 1.25rem;
  --S-N-1-5: 1.5rem;
  --M-N-2: 2rem;
  --L-N-2-5: 2.5rem;
  --XL-N-3: 3rem;
  --XXL-N-3-5: 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 */

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

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

.text-center {
  text-align: center;
}

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

.grid {
  place-content: center;
}

/* Pointers for buttons */
/* .todo__btn {
  cursor: pointer;
} */

/* The form styles  can't be set globally*/

input {
  font-family: inherit;
  color: inherit;
}

/* Typograpy */

/* Headings */
h1,
h2,
h3,
h4 {
  font-family: "Poppins", sans-serif;
  color: var(--SECONDARY-COLOR);
}

h1 {
}

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;
}