styles.css

@import url("https://fonts.google.com/specimen/Rubik");

:root{
  --mainHeadline : white;
  --text : hsl(0, 0%, 17%);
  --titles : hsl(0, 0%, 59%);
  --text-input-size: 18px;
  --very-dark-gray: hsl(0, 0%, 17%);
  --dark-gray: hsl(0, 0%, 59%);
  --pixles24: 24px;
  --pixles32: 32px;
  --weight400 : 400;
  --weight500 : 500;
  --weight700 : 700;

}

body{
  margin: 0px;
  font-family: 'Rubik', sans-serif;
}

.main-container{
  background-image: url("/images/pattern-bg.png");
  display: flex; 
  flex-direction: column;
  align-items: center;
  background-size: cover;
  background-repeat:no-repeat;
} 

.page-title{
font-size: var(--pixles32);
color: var(--mainHeadline);
font-weight: var(--weight400);

}

.bold-title{
  font-weight: var(--weight700);
  font-size: var(--pixles24);
}



.data-on-address{
  background-color: white;
  width: 60%;
  z-index: 1;
  margin-bottom: -55px;
  padding: 50px;
  border-radius: 8px;
  display: flex;
  justify-content: space-around;
  
}

.submit-ip-btn{
  background: black;
  color: white;
  height: 40px;
  border-radius: 0 8px 8px 0;
}

.ip-input-div{
  height: 40px;
  width: 40%;
  display: flex;
  justify-content: center;
  border-radius: 8px 0 0 8px ;
}

.ip-input{
  width: 450px;
  border-radius: 8px 0 0 8px;
}

.vertical-line{
  border-left: 1px solid black;
  height: 75px;
  width: 1px;
}

.secondary-title{
  font-weight: var(--weight700);
  color: var(--titles);
}

#mapid { 
  height: 600px;
  left: 20% 0;
  z-index: 0;
  margin: auto;
 }

 @media only screen and (max-width: 375px) {
  .data-on-address{
    flex-direction: column;
    justify-content: space-around;
  }

  .vertical-line{
    border: white;
  }

  .ip-input-div{
    display: flex;
    width: 80%;
    justify-content: center;
  }

  .data-on-address{
    margin-bottom: -30px;
    height: 250px;
    align-items: center;
    text-align: center;
    height: -webkit-fill-available;
  }

  .main-container{
    height: 350px;
  }


}