@font-face {
  font-family: "ogg";
  src: url("fonts/ogg_medium.otf");
}
@font-face {
  font-family: "sharp";
  src: url("fonts/sharp_medium.otf");
}

:root {
  --color-main-dark: #0f1010;
  --color-main-light: white;
}
* {
  font-family: sharp;
  font-size: 16px;
}
body {
  margin: 5%;
}
form {
  max-width: 500px;
}
h1 {
  font-size: 48px;
}
p,
span {
  font-size: 24px;
}
span {
  /* text-transform: uppercase; */
  background: -webkit-linear-gradient(
    0deg,
    #004dff,
    #7000ff,
    #ff000a,
    #ff8d00,
    #fff000,
    #05ff00
  );
  /* rgb(140, 180, 40),
    rgb(230, 170, 20),
    rgb(250, 90, 50),
    rgb(240, 20, 60),
    rgb(190, 90, 160),
    rgb(120, 150, 220) */

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
a {
  display: flex;
}
a:hover,
a:focus,
a:active {
  opacity: 0.5;
  outline: none;
}
input[type="text"] {
  border-radius: 0;
  box-sizing: border-box;
  padding: 14px 25px;
  margin-bottom: 8px;
  width: 100%;
  border-width: 0;
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}
input[type="text"]:focus,
input[type="text"]:active {
  outline: none;
  -webkit-appearance: none;
  border-bottom-color: var(--color-main-dark);
}
button {
  border-radius: 12px;
  margin-top: 24px;
  padding: 14px 25px;
  padding-top: 16px;
  border: none;
  background-color: var(--color-main-dark);
  color: var(--color-main-light);
  width: 100%;
}
button:hover,
button:active,
button:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.margin_sm {
  margin-bottom: 16px;
}
.madLibContainer {
  background-color: var(--color-main-dark);
  color: var(--color-main-light);
  padding: 5%;
  margin-bottom: 25px;
  border-radius: 12px;
}