@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');


html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  font-size: 20px;
  font-family: 'Muli';
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-align: center;
}
@media screen and (max-width: 1100px) {
  body {
    background-size: cover;
  }
}
@media screen and (max-width: 777px) {
  body {
    background-position: 5% 0;
    background-size: 100% 100%;
  }
}
.hidden {
  display: none;
}
form {
  display: inline-block;
  text-align: left;
  background-color: HSLA(0, 0%, 23%, 0.85);
  padding: 20px;
  margin-top: 80px;
  color: HSL(0, 0%, 100%);
  max-width: 350px;
}
@media screen and (max-width: 777px) {
  form {
    text-align: center;
  }
}
@media screen and (max-width: 365px) {
  form {
    margin-top: 0;
  }
}
form h1#title {
  font-family: Montserrat, Raleway, Roboto, Arial, Helvetica, sans-serif;
  font-size: 2em;
  text-shadow: #202A44;
  line-height: 130%;
  text-align: center;
}
form input {
  padding: 7px;
  margin-bottom: 25px;
  width: calc(-125px + 100%);
}
form button {
  padding: 11px;
  background-color: HSL(42, 94%, 49%);
  background-image: linear-gradient(to bottom, HSL(52, 82%, 89%), HSL(42, 94%, 49%));
  border: none;
  border-radius: 25px;
  transition: all 0.4s ease-in;
  outline: none !important;
}
form button:hover {
  color: HSL(0, 0%, 100%);
  background-image: none;
  background-color: HSL(42, 94%, 40%);
}
form button:active {
  transition: all 0.1s ease-in;
  background-color: HSL(42, 94%, 50%);
}
body {
/* Fallback in case image fails to load */
  background-color: #202A44;
}

.article {
  color:white;
  padding: 2% 20%;
  text-align:left;
}

.article a {
  color:yellow;
}