@import "./style/base.css";

.body{
    height: 100vh;
    /* background: url(bg.jpg) no-repeat center; */
    background-size: cover;
    display: flex;
    align-items: center;
}
@import url(https://fonts.googleapis.com/css?family=Roboto);
*, *::before, *::after {box-sizing:border-box} 

html{
  font-family: 'Roboto';
  width:100%;
  color:white;
}

.contact-icon{
  fill:  #B7BFF6;
}

#column-1 {
  grid-area: col1;
}

#column-2 {
  grid-area: col2;
}

.bg-img{
  height: 1080px;
  background-image: url("https://source.unsplash.com/featured?nature");
  background-repeat: repeat;
}

#dimmer{
	z-index: 1;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, 0.5);
}

.btn-close{
  font-size:8px;
  position:absolute;
  background:white;
  color:black;
  font-weight:bold;
  width:24px;
  height:24px;
  right:0.75rem;
  top:0.75rem;
  display:grid;
  justify-content:center;
  align-items:center;
  border-radius:32px;
}

#contact-wrapper{
  
  /*styling*/
  background:#202638;
  padding:2.5rem;
  border-radius:12px;
  width:max(min(80%,1000px),750px);
  
  /*positioning*/
  position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
  
  /*column wrapper*/
    display: grid;
    grid-template-areas:
    'col1 col2';
    column-gap: 1rem;
}

.form-input{
  border: 1px solid #7888A0;
  border-radius: 4px;
  margin-top:0.3rem;
}

.form-input.field{
  width: 100%;
  height: 46px;
}

.form-input.text-area{
  width: 100%;
  height: 128px;
}

#button-container{
  text-align:right;
}

button{
  font-family: 'Roboto';
  background: #CFCFCF;
  text-align:center;
  border-style:none;
  border-radius: 10px;
  padding: 8px 16px 8px 16px;
}

.form-group{
  padding: 0 0 1rem 0;
}


.btn-main{
  color:white;
  background-color:#FF3358;
}

#form-card{
  background:white;
  padding:2rem;
  border-radius:12px;
}

.form-label{
  color:#7888A0;
  font-size:0.8rem;
  font-weight:bold;
}

.form-input::placeholder{
  font-family: 'Roboto';
  padding:0.5rem;
}

.contact-item,a{
  padding-bottom:2rem;
  color:#B7BFF6;
  font-size: 0.8rem;
}

.contact-item > * {
  margin-right: 1rem;
}

#contact-item-container{
  padding-top:4rem;
}

@media only screen and (max-width: 760px) {

   .btn-close{
     font-size:16px;
    position:absolute;
    width:40px;
    height:40px;
    right:2rem;
    top:2rem;

  }
  #contact-wrapper{

    /*styling*/
    padding:2.5rem;
    border-radius:0px;
    width:100vw;
    height:100%;
    /*positioning*/
    position:fixed;
    top:0%;
    left:0%;
    transform: translate(0%,0%);

    /*column wrapper*/
      display: grid;
      grid-template-areas:
      'col1'
      'col2';
      column-gap: 1rem;
  }
  
  #contact-item-container{
    padding: 1rem 0;
  }

}
  
@media only screen and (max-width: 400px) {


  
  #contact-wrapper{

    /*styling*/
    padding:1rem;

    /*column wrapper*/
      display: grid;
      grid-template-areas:
      'col1'
      'col2';
      column-gap: 1rem;
  }
  
  #contact-item-container{
    padding: 1rem 0;
  }

}