:root {
  --background-primary: rgba(0, 0, 0, .5);
  --header-color: #FFFFFF;
  --icon-color: #FFFFFF;
  --hover-color: #bd1241;
  --button-color: #bd1241;
  --button-hover-color: #a81c42;
  --black: #000000;
  --white: #FFFFFF;
}

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
}

/* Multiply */

h3 {
  font-size: 23px;
  line-height: 30px;
  color: var(--header-color);
  margin: 24px 0 32px;
}

/* Content */

h1 {
  font-size: 50px;
  color: var(--header-color);
}

#coming-soon {
  background-image: url(../assets/background-5.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}


#coming-soon .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-primary);
  z-index: 9999;
  padding: 50px;
}

#coming-soon .containerized {
  max-width: 720px;
  margin: 0 auto;
}

#coming-soon i {
  font-size: 32px;
  color: var(--icon-color);
  transition: all ease-in-out 0.3s;
  margin-left: 32px;
}

#coming-soon a:hover i {
  color: var(--hover-color);
}

#coming-soon .coming-content {
  margin-top: 200px;
}

#coming-soon form {
  margin-top: 24px;
}

#coming-soon input {
  padding: 12px 24px;
  font-weight: 600;
  font-size: 20px;
  border-radius: 6px;
  border: none;
  color: var(--white);
  background-color: transparent;
  border: 1px solid var(--white);
}

#coming-soon input::placeholder {
  color: var(--white);
}

#coming-soon a {
  padding: 12px 24px;
  font-weight: 500;
  font-size: 20px;
  margin-left: 30px;
  border-radius: 6px;
  transition: all ease-in-out .3s;
  background-color: var(--button-color);
  border: 1px solid var(--button-color);
}

#coming-soon a:hover {
  background-color: var(--button-hover-color);
  border: 1px solid var(--button-hover-color);
}