:root {
  --icon-padding: 20px;
  --icon-font-size: 24px;
  --icon-size: calc(var(--icon-padding) * 2 + var(--icon-font-size));
}

* {
  box-sizing: border-box;
  font-size: 16px;
}

.search-container {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  vertical-align: middle;
  height: 55px;
}

.search-container > #search {
  width: 390px;
}

.search-container > button {
  margin-left: 10px;
  padding: 0 20px;
}

.icons-container {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
}

.icons-container > i {
  padding: var(--icon-padding);
  font-size: var(--icon-font-size);
  cursor: pointer;
  border-radius: 10px;
  width: var(--icon-size);
  height: var(--icon-size);
}

.icons-container > i:hover {
  background-color: #EEE;
}