* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* colors */
  --gray-900: #121214;
  --gray-800: #202024;
  --gray-400: #7c7c8a;
  --gray-100: #e1e1e6;

  --cyan-500: #81d8f7;
  --cyan-300: #98e1fb;
}

/* BASIC STYLE */

body {
  font-family: sans-serif;
  text-align: center;
  color: var(--gray-100);
  background: var(--gray-900);

  padding: 30px 10px;
}

h1 {
  margin-top: 50px;
}

/* BODY AND FORM - FLEX */

body,
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* FORM ELEMENTS STYLE */

form p {
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 20px;

  font-size: 18px;
}

form label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

form input {
  padding: 18px;
  width: 300px;
  max-width: 100%;

  border-radius: 5px;
  border: 1px solid var(--gray-800);
  background: var(--gray-800);
  color: var(--gray-400);
  font-size: 18px;
}

form input:hover {
  border: 1px solid var(--gray-400);
}

form input:focus {
  outline: 1px solid var(--gray-800);
}

form button {
  padding: 18px;
  border-radius: 10px;
  border: 1.5px solid var(--cyan-500);
  width: 300px;
  background-color: var(--cyan-500);
  color: black;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

form button:hover {
  background: var(--cyan-300);
}

/* SECTION PARAGRAPH STYLE */

#result {
  display: grid;
  gap: 10px;
}

#result p {
  border: 1px solid var(--gray-400);
  border-radius: 5px;
  padding: 18px;

  max-width: 300px;

  font-size: 18px;
  color: var(--gray-400);
  display: flex;
  /* align-items: center; */
  flex-wrap: wrap;
  gap: 10px;
}

#result p:hover {
  border-color: var(--gray-100);
}

#result strong {
  color: var(--gray-100);
}