<div class="navbar">
    <div class="logoDiv">
      <img id="logo" src="https://cdn-icons-png.flaticon.com/512/5706/5706604.png" alt="logo" />
      <h1 id="bizName">OTWUP</h1>
    </div>
    <ul class="links">
      <li><a href="#" target="_blank">Products</a></li>
      <li><a href="#" target="_blank">About</a></li>
      <li><a href="#" target="_blank">Contact Us</a></li>
    </ul>
     <div class="signUp">
        Sign Up
     </div>
  </div>
<div id="headerDiv">
  <div class="headerContent">
    <div class="plainTextDiv">
      <h1 class="gradient-text" id="gradient2">Start up your business</h1>
      <p id="lorem"> Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. </p>
      <p class="plainText" id="reference"> Gradient background by <a href ="https://codepen.io/aepicos/pen/YzNebYr" target="_blank">Aepicos</a></p>
      <p class="plainText"> Corporate Ipsum by <a href="https://www.cipsum.com/" target="_blank">cipsum.com</a></p>
      
      <div class="btnStart">
        Learn More
      </div>
    </div>
    
    <div>
      <img id="mainIll" src="https://woobro.design/thumbnails/41/launch-project-vector-illustration-5de23524e4c55.png" alt="illustration" />
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@500;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto&display=swap');

body {
  font-family: 'Bungee', cursive;
  text-align: center;

  
/* vvv  FOR MAX COMPATIBILITY vvv */
/*   background: rgb(0,125,89);
  background: -moz-radial-gradient(circle, rgba(0,125,89,0.9743084733893558) 0%, rgba(9,74,112,1) 68%, rgba(0,45,108,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(0,125,89,0.9743084733893558) 0%, rgba(9,74,112,1) 68%, rgba(0,45,108,1) 100%);
  background: radial-gradient(circle, rgba(0,125,89,0.9743084733893558) 0%, rgba(9,74,112,1) 68%, rgba(0,45,108,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#007d59",endColorstr="#002d6c",GradientType=1); */
  
/*  BASIC LINEAR  */
  background: rgb(197,169,255);
  background: linear-gradient(45deg, rgba(197,169,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
  
/*  MORE COMPATIBLE TO OTHER BROWSERS */
/*  background: -moz-linear-gradient(45deg, rgba(219,201,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(219,201,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
    background: linear-gradient(45deg, rgba(219,201,255,1) 0%, rgba(255,255,255,1) 50%, rgba(209,240,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dbc9ff",endColorstr="#d1f0ff",GradientType=1);
 */
  
  height: 100vh;
  background-repeat: no-repeat;  
}

.navbar{
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100vw;
    padding-top: 20px;
}

.logoDiv{
    position: absolute;
    top: 5px;
    left: 45px;
    display: flex;
    border-radius: 25px;
}

#logo{
  margin-top: 15px;
  width: 13%;
  
}

#bizName{
  margin-top: 30px;
  margin-left: 15px;
  background:linear-gradient(180deg, rgba(21,175,228,1) 24%, rgba(134,70,252,1) 86%);
  background-clip: text;
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}


a {
   text-decoration: none;
   color: blueviolet;
}

a:hover, a:focus, a:active{
  color: grey;
}

.links{
  display: inline-flex;
  gap: 100px;
  padding: 0;
  width: 30%;
}

.links li{
  font-family: 'Gemunu Libre', sans-serif;
  display: flex;
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
}

.gradient-text {
  margin: 30px;
  -webkit-text-fill-color: transparent;
  font-size: 42px;
  
}

#headerDiv{
    margin-top: 80px;
    width: 100%;
    height: 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#headerDiv p{
  text-align: initial;
  font-family: 'Roboto', sans-serif;
}

.headerContent{
  display: flex;
}


#gradient2{
  text-align: initial;
  font-size: 60px;
  margin: 40px auto auto auto;
  background: linear-gradient(90deg, rgba(123,21,228,1) 24%, rgba(242,70,252,1) 86%);
  background-clip: text;
  -webkit-background-clip: text;
}

#mainIll{
  width: 55%;
  float: right;
  margin-right: 3%;
  margin-top: 5%;
}

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

.plainTextDiv{
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 90px;
    margin-left: 4%;
    margin-top: 2%;
  gap: 5px;
}

.plainText{
  margin: 0px;
  color: #8b6498;
  font-family: 'Montserrat', sans-serif;
}

#lorem{
  width: 100%;
  color: #8b6498;
}

.btnStart, .signUp{
  margin-top: 35px;
  height: 50px;
  width: 200px;
  background: linear-gradient(to right, #52A0FD 0%, #00e2fa 80%, #00e2fa 100%);
  color: white;
  border-radius: 25px;
  justify-contents: center;
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 0px 10px 13px -7px #3f51b5, 0px 6px 15px 2px rgb(102 187 209 / .76); 
box-shadow: 0px 10px 13px -7px #3f51b5, 0px 6px 15px 2px rgb(102 187 209 / 76%);
  transition: all 80ms ease;
}


.btnStart:hover, .btnStart:focus, .signUp:hover, .signUp:focus {
  transform: scale(1.06);
}

.signUp{
  margin-top: 5px;
  height: 50px;
  width: 150px;
  margin-right: 35px;
}
  
  
  @media (min-width: 481px) and (max-width: 767px){
    #mainIll{
      width: 50%;
    }
    
    .plainTextDiv {
    width: 36%;
    }
}