:root {
 --text-50: #f0eef6;
--text-100: #e0deed;
--text-200: #c2bddb;
--text-300: #a39cc9;
--text-400: #857ab8;
--text-500: #6659a6;
--text-600: #524785;
--text-700: #3d3663;
--text-800: #292442;
--text-900: #141221;
--text-950: #0a0911;

--bg: #f4f3f9;
--background-50: #efeef6;
--background-100: #e0ddee;
--background-200: #c1bbdd;
--background-300: #a299cc;
--background-400: #8377bb;
--background-500: #6355aa;
--background-600: #504488;
--background-700: #3c3366;
--background-800: #282244;
--background-900: #141122;
--background-950: #0a0911;

--primary-50: #f2f2f2;
--primary-100: #e6e6e6;
--primary-200: #cccccc;
--primary-300: #b3b3b3;
--primary-400: #999999;
--primary-500: #808080;
--primary-600: #666666;
--primary-700: #4d4d4d;
--primary-800: #333333;
--primary-900: #1a1a1a;
--primary-950: #0d0d0d;

--secondary-50: #f2f2f2;
--secondary-100: #e6e6e6;
--secondary-200: #cccccc;
--secondary-300: #b3b3b3;
--secondary-400: #999999;
--secondary-500: #808080;
--secondary-600: #666666;
--secondary-700: #4d4d4d;
--secondary-800: #333333;
--secondary-900: #1a1a1a;
--secondary-950: #0d0d0d;

--accent-50: #f0f0f5;
--accent-100: #e0e0eb;
--accent-200: #c2c2d6;
--accent-300: #a3a3c2;
--accent-400: #8585ad;
--accent-500: #666699;
--accent-600: #52527a;
--accent-700: #3d3d5c;
--accent-800: #29293d;
--accent-900: #14141f;
--accent-950: #0a0a0f;
--text: #08070d;
--background: #f4f3f9;
--primary: #333333;
--secondary: #222222;
--accent: #020203;
--font-scale: 1.333;
    --p: 1rem;
    --h5: calc(var(--p) * var(--font-scale));
    --h4: calc(var(--h5) * var(--font-scale));
    --h3: calc(var(--h4) * var(--font-scale));
    --h2: calc(var(--h3) * var(--font-scale));
    --h1: calc(var(--h2) * var(--font-scale));
    --small: calc(var(--p) / var(--font-scale));
    --margin-lg: 0 12%;
    --margin-md: 0 6%;
    --border1: 1rem;
    --border05: 0.5rem;


}
*{
  margin: 0;
  padding: 0;
   font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body {
    background: var(--bg);
}
header {
  height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}
nav {
  height: 5em;
  padding: 0 4em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .logo {
  color: var(--primary);
  font-weight: 800;
  font-size: 1.5em;
  text-transform: uppercase;
}
nav a {
  color: #fff;
  background: var(--accent);
  width: 10em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-decoration: none;
  border-radius: .4em;
}
header .main {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  color: var(--text);
}
.main h1 {
  font-size: 4em;
  font-weight: bolder;
  padding: 0 3em;
}
.main p {
  font-size: 1.5em;
  color: #999;
}
.underline-p {
    position: relative;
    display: inline-block;
}
.underline-p:before {
    content: '';
    width: 100%;
    height: 6px;
    background: var(--accent-400);
    position: absolute;
    left: 0;
    bottom: 6px;
    z-index: -1;
}
.story-container {
  padding: 4em;
  position: relative;
}
.story {
  border-radius: 2em;
  background: var(--secondary);
  padding: 6em 2em;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.story h1 {
  text-align: center;
  font-size: 3em;
}

.story p {
  margin-top: 2em;
  font-size: 1.5em;
  color: #999;
  text-align: center;
  line-height: 1.7em;
}

.top {
  top: -2em;
  left: -1em;
  position: absolute;
}
.bottom {
  position: absolute;
  right: -1em;
  bottom: -2em;
}
#login {
  display: flex;
  gap: .8em;
  align-items: center;
}
.story-container::before {
    content: url(images/45.svg);
    position: absolute;
    top: 5%;
    right: 0%;
    z-index: -1;
    animation: bounce 5s infinite linear;
}
.shape-two {
    width: 12px;
    height: 12px;
    background: #F77A56;
    top: 58%;
    right: 6%;
    animation: bounce 5s infinite linear;
}
.shape-three {
    width: 7px;
    height: 7px;
    background: #F2DAD5;
    top: 84%;
    left: 7%;
    animation: bounce 5s infinite linear;
}
.shape-one {
    width: 6px;
    height: 6px;
    background: #F2DAD5;
    top: 14%;
    right: 15%;
    animation: bounce 5s infinite linear;
}
.shapes {
  position: absolute;
  z-index: -1;
}



footer {
  display: flex;
  flex-direction: column;
  column-gap: 1em;
  justify-content: center;
  align-items: center;
  height: 60vh;
   background: radial-gradient(circle, #0F1116ff 20%, #0F1116cc 50%, #0F111666 80%);

}
footer h1 {
  color: var(--slate-blue);
  margin-bottom: 1.2em;
}
footer ul {
  display: flex;
  gap: 4em;
  margin-bottom: 1.2em;
}
footer li {
  list-style: none;
}
footer li a {
  text-decoration: none;
  color: #fff;
}
footer a {
  text-decoration: none;
  color: #fff;
}
footer p {
  color: #999;
  margin-top: 2em;
}
.socials {
  display: flex;
  gap: 2em;
}


@media screen and (max-width: 767px) {
  .features .grid {
   grid-template-columns: repeat(1, 1fr); 
  }
  .main h1 {
    font-size: 2em;
  }
  .main p {
    padding: 0 1em;
  }
  .main br {
    display: none;
  }
  .underline::before {
    display: none;
  }
 .story-container {
   padding: 1em;
 }
 .story h1 {
   font-size: 1.5em;
   font-weight: bold;
 }
 .story p {
   font-size: 1em;
 }
  nav {
    padding: 0 2em;
  }
  .title h1 {
    font-size: 1.8em;
  }
  .title p {
    padding: 0 1em;
  }
}








/* Animations */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}