@charset "UTF-8";

:root {
  --black: #181818;
  --white: #f3f3f3;
  --purple: #681fad;
  --light-purple: #8226d9;
  --lighter-purple: #9649df;
  --cyan: #1f91ad;
  --light-cyan: #26b5d9;
  --light-gray: #f0f0f0;
  --font-family-poppinslight: poppinslight, "Segoe UI", Tahoma, Geneva, Verdana,
    sans-serif;
  --font-family-poppinsregular: poppinsregular, "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
  --font-family-poppinsmedium: poppinsmedium, "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: white;
  margin-block: 20px;
  border-radius: 100vw;
}

::-webkit-scrollbar-thumb {
  background: #008bc7;
  border: 2px solid white;
  border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(192 100% 15% / 1);
}

* {
    margin: 0;
    padding: 0;
}

body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-family-poppinsregular);
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

h1 {
  font-family: var(--font-family-poppinsbold);
  text-align: center;
  font-size: 3rem;
  margin-top: 1em;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

main p {
  max-width: 500px;
  font-family: var(--font-family-poppinslight);
  word-spacing: 0.1em;
}

h2 {
  font-size: 2.5rem;
  line-height: 1em;
  font-family: var(--font-family-poppinsmedium);
}

span {
  color: #8227d6;
}

strong {
  font-weight: bold;
}

img {
  width: 450px;
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

form [type="submit"] {
  background-image: linear-gradient(to left, #1f91ad, #681fad);
  color: white;
  text-transform: uppercase;
  width: 100%;
  font-weight: bold;
}

form [type="submit"]:hover {
  cursor: pointer;
  background-image: linear-gradient(to left, #26b5d9, #8226d9);
}

form [type="submit"]:active {
  background-image: linear-gradient(
    to left,
    hsl(192, 70%, 35%),
    hsl(271, 70%, 35%)
  );
}

input {
  margin-top: 20px;
  padding: 14px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
}

footer {
  background-image: linear-gradient(
    to right,
    #49157a,
    #651ea7,
    #8227d6,
    #1099d4,
    #008bc7
  );
  text-align: center;
  font-size: 0.8rem;
  font-family: var(--font-family-poppinslight);
}

footer a {
  font-family: var(--font-family-poppinsmedium);
  color: white;
  text-decoration: none;
}

footer p {
  padding: 2px;
}

footer a:hover {
  color: var(--cyan);
  transition: 0.3s all;
}