main.css

@alias {
  bgc: background-color;
  fs: font-size;
}

@font-face {
  font-family: 'Cienfuegos';
  font-path: '../vendor/cienfuegos/Cienfuegos_demo_font';
  font-weight: normal;
  font-style: normal;
}

body {
  bgc: #fafafa;
  color: #333;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  fs: responsive 15px 24px;
}

.wrapper {
  margin: 0 auto;
  width: 66%;
}

.header {
  clear: fix;
}

h1 {
  font-family: 'Cienfuegos', serif;
  fs: responsive 30px 46px;
  float: left;
}

.search {
  text-align: right;
  float: right;
}

input {
  width: 260px;
  padding: 6px;
  fs: 18px;
}

input::placeholder {
  color: red;
  opacity: 0.8;
}

p {
  bgc: white;
  padding: 20px;
  border: 1px solid #ddd;
  display: flex;
}

.circle {
  background-color: rgba(#FF33D4, 0.8);
  margin: 0 auto;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  position: absolute -75px 0 0 0;
  opacity: 0.75;
}

ul.amounts {
  background: rgba(153, 221, 153, 0.8);
  padding: 12px;
}

ul.amounts > li:at-least(4) {
  margin-left: 20px;
  color: blue;
}