@import url("https://fonts.googleapis.com/css2?family=Poppins:weight@100;200;300;400;500;600;700;800&display=swap");



body{
    background-color:#eee;
    font-family: "Poppins", sans-serif;
    font-weight: 300;

}



.height{
 height: 100vh;
}


.search{
position: relative;
box-shadow: 0 0 40px rgba(51, 51, 51, .1);
  
}

.search input{

 height: 60px;
 text-indent: 25px;
 border: 2px solid #d6d4d4;


}


.search input:focus{

 box-shadow: none;
 border: 2px solid blue;


}
.btn {
    color: black;
}

.search .fa-search{

    position: absolute;
    top: 20px;
    left: 16px;

   }

.search button{

    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    width: 110px;
    background: blue;

   }

body{margin:40px;}

.btn-circle.btn-xl {
  margin-top:20px;
  margin-right: 30px;
  width: 160px;
  height: 160px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 80px;
  background: #DDA0DD;
  float: center;
}



.btn-circle.btn-xl:active{

    background-color: purple;
    
}

.btn-circle.btn-xl:hover{

    background-color: darkorchid;
    
}

.btn-circle.btn-xl:focus{

    background-color: purple;
    
}

.btn-circle.btn-xl img {
    float: center;
}



@media screen and (max-width:850px) and (min-width:620px) {
    .col {
        columns: 2;
    }
    }

@media screen and (max-width:600px) and (min-width:350px) {
    .col {
        columns: 1;
    }
}