@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Poppins:ital,wght@0,100;0,400;0,500;0,700;1,600&family=Roboto+Serif:opsz,wght@8..144,300&family=Titan+One&display=swap");

:root {
  --black: rgba(0, 0, 0, 1);
  --texto: rgba(255, 255, 255, 1);
  --bg-shadow: rgba(34, 33, 33, 1);
  --clr4: rgba(80, 80, 80, 1);
  --link: rgba(240, 240, 240, 1);

  --bg-info: rgb(237, 212, 137);
  --bg-info-border: rgba(180, 156, 85, 0.7);


}

html {
  font-size: 62.5%;
}

body {
  background-image: url("../imagens/empty-highway-surrounded-by-hills-cloudy-sunset-sky-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

html,
body {
  position: relative;
  margin: 0em;
  padding: 0em;
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn {
  position: absolute;
  top: 40px;

  display: flex;
  flex-direction: row;
  gap: 0.5em;
  padding: 0.5em;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--texto);
  background-color: var(--clr4);
  border: none;
  border-radius: 0.5em;
  transition: background 0.2s;
}

.box {
  position: relative;
  width: clamp(18em, 50vw, 400px);
  height: 31em;

  top: -2em;

  padding: 2em 2.5em;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  font-size: 1.6rem;
  color: var(--texto);

  border-radius: 1.5rem;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(70, 70, 70, 0.7) 100%
  );
  box-shadow: 0.1rem 0.1rem 1.5rem var(--bg-shadow);
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
}

.box form {
  position: relative;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
  gap: 0.5em;
}

.box form img {
  width: 17em;
}

.box form .groupInput {
  position: relative;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
}

.box form .groupInput input {
  font-size: 1.2rem;
  padding: 0.2rem 0.2rem 0.2rem 0.5rem;
  height: 4rem;
  width: 100%;
  border-radius: 0.3em;
  border: none;
  color: var(--black);
}

.box form input[type="submit"] {
  font-size: 1em;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  width: 100%;
  height: 3.5rem;
  border-radius: 0.5rem;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--texto);
  background-color: var(--black);
  box-shadow: 0.3rem 0.3rem 0.7rem var(--black);
}

.box form .link {
  align-self: center;
}

.box form .link a {
  color: var(--link);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
}

.box form .link a:hover {
  color: var(--texto);
}

.box .info {
  position: absolute;
  bottom: 3em;
  width: 80%;
  display: flex;
  z-index: 4;
}

.box .info p {
  display: flex;
  color: var(--texto);
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
  align-items: center;
  margin-left: 2em;
}

.box .info img {
  width: 30%;
  height: 30%;
}


.infoText{

  font-size: 1.4rem;
  font-weight: 500;
  text-align: left;
  align-items: center;

  padding: 1em;

  color: var(--black);
  background-color: var(--bg-info);
  border: solid 0.1em var(--bg-info-border);
  border-radius: 0.5em;
}