body {
  background-color: #000017;
  padding: 100px 120px;
  height: 45vh;
  border-radius: 50px;
}
.main {
  display: flex;
  justify-content: space-between;
}
.left > p {
  color: #8983c6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
}
.left > h2 {
  color: white;
  font-family: "Times New Roman", Times, serif;
  font-size: 50px;
  margin: 0px;
}
.left > button {
  background-color: white;
  color: #000017;
  padding: 12px 32px;
  border-radius: 50px;
  border: none;
  margin: 20px 0px 0px 0px;
}
.left > label {
  color: #8983c6;
  display: block;
  margin: 40px 0px 0px 0px;
}
.email > button {
  background-color: #18182f;
  color: white;
  padding: 12px 32px;
  border-radius: 50px;
  border: dashed black;
  margin: 20px 0px 0px 0px;
}
.right {
  display: flex;
  gap: 200px;
  font-family: Arial, Helvetica, sans-serif;
}
.links > p {
  color: #8983c6;
  margin: 0px;
}
.links > a {
  color: white;
  display: block;
  padding: 16px 0px 0px 0px;
  text-decoration: none;
}
.data > p {
  color: #8983c6;
  margin: 0px;
}
.data > a {
  color: white;
  display: block;
  padding: 16px 0px 0px 0px;
  text-decoration: none;
}
a {
  position: relative;
  width: max-content;
}
a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  background-color: #8983c6;
  height: 4px;
  width: 4px;
  border-radius: 50px;
  transition: 0.7s;
}
a:hover::before {
  width: 100%;
}
hr {
  margin-top: 100px;
  background-color: #8983c6;
  border: none;
  height: 2px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin: 50px 0px 0px 0px;

}
.bottom > p {
  color: #8983c6;
}
.icons > i {
  margin-right: 10px;
}
@media (width <= 420px){
    body {
        background-color: red;
        color: #f1f1f1;
    }
    .main {
  display: flex;
  justify-content: space-between;
}
.left > p {
  color: #8983c6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
}
.left > h2 {
  color: white;
  font-family: "Times New Roman", Times, serif;
  font-size: 50px;
  margin: 0px;
}
.left > button {
  background-color: white;
  color: #000017;
  padding: 12px 32px;
  border-radius: 50px;
  border: none;
  margin: 20px 0px 0px 0px;
}
.left > label {
  color: #8983c6;
  display: block;
  margin: 40px 0px 0px 0px;
}
.email > button {
  background-color: #18182f;
  color: white;
  padding: 12px 32px;
  border-radius: 50px;
  border: dashed black;
  margin: 20px 0px 0px 0px;
}
.right {
  display: flex;
  gap: 200px;
  font-family: Arial, Helvetica, sans-serif;
}
.links > p {
  color: #8983c6;
  margin: 0px;
}
.links > a {
  color: white;
  display: block;
  padding: 16px 0px 0px 0px;
  text-decoration: none;
}
.data > p {
  color: #8983c6;
  margin: 0px;
}
.data > a {
  color: white;
  display: block;
  padding: 16px 0px 0px 0px;
  text-decoration: none;
}
a {
  position: relative;
  width: max-content;
}
a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  background-color: #8983c6;
  height: 4px;
  width: 4px;
  border-radius: 50px;
  transition: 0.7s;
}
a:hover::before {
  width: 100%;
}
hr {
  margin-top: 100px;
  background-color: #8983c6;
  border: none;
  height: 2px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin: 50px 0px 0px 0px;

}
.bottom > p {
  color: #8983c6;
}
.icons > i {
  margin-right: 10px;
}
}