@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);
}

html {
  font-size: 62.5%;
}

body {
  background-image: url("../imagens/wallpaper/wallpaper.jpg");
  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;
}

.box {
  position: relative;
  width: clamp(15em, 50vw, 300px);
  height: 30em;

  padding: 1em 2em;

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

  font-size: 1.2rem;
  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(1.5em);
  -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: 1.5em;
}

.box form img {
  width: 4em;
}

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

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

  input {
    font-size: 1.2rem;
    padding: 0.2em 0.1em 0.1em 1em;
    height: 2.5em;
    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);
}