body, *{
  padding: 0px;
  margin: 0px;
  background-repeat: no-repeat;
  background-position:Center;
  background-size: contain;
  font-family: 'Montserrat', sans-serif;
}
body{
  background-color: #DDE3F9;
}
#app{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 20px;
}
.websites,
.search,
.generator {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 10%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 40px 40px;
    grid-gap: 10px;
    margin-top: 20px;
}
.search{
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.field {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    align-items: stretch;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    padding: 10px;
    border-radius: 4px;
    position:relative;
}
.field > span{
  margin-bottom: 10px;
}
.search > input,
.field > input{
  border: none;
  border-bottom: 2px solid grey;
  padding: 10px;
}
.header{
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.header {
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    background-color: #353535;
    border-radius: 6px;
    align-items: center;
}
.header > span,
.header > span > *{
  color: white!important;
  text-decoration: none!important;
}
.genBtn {
  background-color: #eaeaea;
  width: 25px;
  height: 25px;
  color: #383C6E;
  border-radius: 50%;
  position: absolute;
  bottom: 17px;
  right: 17px;
  cursor: pointer;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.tt{
  font-size: 8px;
}
.websites{
  margin-top: 20px;
  grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
  grid-template-rows: auto;
  grid-gap: 20px;
}
.site {
    padding: 50px 0px;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 8%) 0px 4px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    cursor: pointer;
    position:relative;
}
.site > .img, .site > img{
  height: 100px;
  width: 100px;
  border-radius: 20px;
}
.site > span {
    font-size: 14px;
    margin-top: 20px;
    color: grey;
    text-align:Center;
}
.noShade{
  box-shadow: rgb(0 0 0 / 15%) 0px 0px 0px 0px!important;
}
.badge{
  position:absolute;
  right: 10px;
  top: 10px;
  border-radius: 3px;
  margin: 0px!important;
  font-size: 15px;
margin-top: 20px;
color: grey;
background-color: #efefef;
padding: 5px 6px;
}
.loader{
  position:absolute;
  width: 200px;
  height: 200px;
  top: 0px;
  right: 0px;
}

.header.header_white {
  background-color: #fff!important;
  font-size: 15px;
  display: block;
}
.genBtn > img {
  width: 25px;
}