html {
  font-size: 62.5%;
}

:root {
  /*
         colors 
          */
  --safety-orange: hsl(215, 100%, 50%);
  --safety-blue: hsl(215deg 100% 50% / 59%);
  --lavender-gray: hsl(230, 19%, 81%);
  --persian-rose: hsl(328, 100%, 59%);
  --persian-blue: hsl(222.01deg 100% 50% / 80%);
  --red-crayola: hsl(341, 100%, 49%);
  --eerie-black: hsl(240, 6%, 10%);
  --dark-black: hsl(226, 99%, 33%);
  --light-gray: hsl(0, 0%, 80%);
  --cultured-2: hsl(210, 60%, 98%);
  --platinum: hsl(0, 0%, 90%);
  --gray-web: hsl(220, 5%, 49%);
  --light-white: #0000004b;
  --cultured: hsl(0, 0%, 93%);
  --black_10: hsla(0, 0%, 0%, 0.1);
  --black_5: hsla(0, 0%, 0%, 0.05);
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsl(0, 14%, 98%);
  --black: hsl(0, 0%, 0%);

  /* --primary: #275EFE; */
  --primary: #ef4444;
  /* --primary-light: #7699FF; */
  --primary-light: #f87171;
  --dark: #1c212e;
  --grey-dark: #3f4656;
  --grey: #6c7486;
  --grey-light: #cdd9ed;
  --white: #fff;
  --green: #16bf78;
  --sand: #fbbf24;
  --sand-light: #fbbf24;

  /* Gradient color */
  --gradient: linear-gradient(
    to left top,
    var(--persian-blue),
    var(--safety-blue)
  );

  /* typgraphy */
  --ff-roboto: "Roboto", sans-serif;
  --ff-league-spartan: "League Spartan", sans-serif;

  --fs-1: 3.5rem;
  --fs-2: 3rem;
  --fs-3: 2.1rem;
  --fs-4: 1.7rem;
  --fs-5: 1.4rem;
  --fs-6: 1.3rem;

  --fw-700: 700;
  --fw-500: 500;

  /* spacing */
  --section-padding: 60px;

  /* shadow */
  --shadow-1: 0 6px 24px var(--black_5);
  --shadow-2: 0 2px 28px var(--black_10);

  /**
         * border radius
         */

  --radius-2: 2px;
  --radius-5: 5px;
  --radius-8: 8px;

  /**
         * transition
         */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}

li {
  color: var(--grey);
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  line-height: 4rem;
}
p {
  font-size: var(--fs-3);
  color: var(--grey-dark);
}
h1 {
  font-size: var(--fs-1);
}
/* Rest of code  */

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 3s ease-in;

}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 100;
    }
}

.heading-text,
.footer-text {
  width: 100%;
  margin-left: 5rem;
}

.footer {
  display: flex;
  background-color: var(--white-2);
  padding-block: 20px;
  justify-content: center;
  align-items: center;
}

.copyright {
  font-size: var(--fs-5);
  text-align: center;
}

.copyright-link {
  color: var(--safety-orange);
  font-weight: var(--fw-500);
  display: inline-block;
}