style.css

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0%;
    height: 100%;
    background-color: #A9B388;
    color: #5F6F52;
}

.container {
    height: 400px;
    width: 400px;
    border: 2px solid #5F6F52;
    box-shadow: 2px 2px 2px 1px #B99470;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 2%;
    background-color: white;
}

.backdrop {
  display: flex;
  justify-content: center;
  width: 100%;
}

input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: white;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #B99470;
  margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background: #5F6F52;
  box-shadow: -80px 0 0 80px #B99470;
}

.options {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}

.colors {
  background-color: white;
  border: 1px solid #5F6F52;
}

.clear, .option, .opaque {
    border: 1px solid #5F6F52;
    width: 100px;
    height: 20px;
    text-align: center;
    padding: 4px 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.clear:hover, .option:hover, .opaque:hover {
    color:white;
    background-color: #5F6F52;
}

.size {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.site-footer
{
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  width: 100%;
  margin: 0;
}
.site-footer hr
{
  border-top-color:#5F6F52;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer a
{
  color:#5F6F52;
  font-weight: bold;
}
.site-footer a:hover
{
  text-decoration:underline;
  color: white;
}
.site-footer .social-icons
{
  text-align:center
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#5F6F52;
}
.copyright-text
{
  margin:0;
  text-align: center;
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.github:hover
{
  background: #000;
}
.social-icons a.medium:hover
{
  background-color:#000;
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.instagram:hover
{
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}