:root {
  --background-primary: rgba(0, 0, 0, .8);
  --background-secondary: rgba(49, 110, 145, .8);
  --header-color: #FFFFFF;
  --icon-color: #FFFFFF;
  --hover-color: #b8cbc7;
  --button-color: #316E91;
  --button-hover-color: #0e4564;
  --input-color: #b8cbc7;
  --black: #000000;
  --white: #FFFFFF;
}

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Open Sans', sans-serif
}

/* Multiply */

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

/* Content */

h1 {
  font-size: 60px;
  color: var(--header-color);
  font-style: italic;
  font-weight: 700;
}

#coming-soon {
  background-image: url(../assets/Coming\ Soon\ -\ 6.png);
  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: linear-gradient(-80deg, var(--background-secondary) 45%, transparent 0), linear-gradient(-45deg, var(--background-primary) 100%, transparent 0);
  z-index:9999;
  padding: 50px;
}

#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{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

#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(--black);
  background-color: white;
  border: 1px solid var(--white);
}

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

#coming-soon button{
  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 button:hover{
  background-color: var(--button-hover-color);
  border: 1px solid var(--button-hover-color);
}

#coming-soon .coming-right{
  height: 90vh;
  position: relative;
}

#coming-soon .coming-right img{
  position: absolute;
  bottom: 50px;
  right: 0;
}

#coming-soon .coming-right .social-media{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#coming-soon .coming-right i{
    font-size: 46px;
    margin-top: 24px;
}