<div class="badge-space">
 <div class="badge"></div> 
</div>
<div class="ribbon color"></div>

</div>

:root {
  --bhue: 80; 
  --bsat: 60;
  --blig: 55;
  --light:hsl(var(--bhue), calc(var(--bsat)*1%), calc(var(--blig)*1%));
  --dark:hsl(var(--bhue), calc(var(--bsat)*1%), calc(var(--blig)*1% - 15%));
  --darkest:hsl(var(--bhue), calc(var(--bsat)*1%), calc(var(--blig)*1% - 35%));
}

.color {
  background: -moz-linear-gradient(0deg, var(--dark) 0%, var(--light) 9%, var(--dark) 17%, var(--darkest) 51%, var(--dark) 82%, var(--light) 91%, var(--dark) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, var(--dark)), color-stop(9%, var(--light)), color-stop(17%, var(--dark)), color-stop(51%, var(--darkest)), color-stop(82%, var(--dark)), color-stop(91%, var(--light)), color-stop(100%, var(--dark))); /* safari4+,chrome */
  background: -webkit-linear-gradient(0deg, rgba(113,153,18,1) 0%, rgba(150,204,24,1) 9%, rgba(113,153,18,1) 17%, rgba(51,69,8,1) 51%, rgba(113,153,18,1) 82%, rgba(150,204,24,1) 91%, rgba(113,153,18,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(0deg, var(--dark) 0%, var(--light) 10%, var(--dark) 20%, var(--darkest) 50%, var(--dark) 80%, var(--light) 90%, var(--dark) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(0deg, var(--dark) 0%, var(--light) 10%, var(--dark) 20%, var(--darkest) 50%, var(--dark) 80%, var(--light) 90%, var(--dark) 100%); /* ie10+ */
  background: linear-gradient(90deg, var(--dark) 0%, var(--light) 10%, var(--dark) 20%, var(--darkest) 50%, var(--dark) 80%, var(--light) 90%, var(--dark) 100%); /* w3c */
}

.ribbon {
  height: 70px;
  width:100%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  /*border-top: 1px solid var(--light);*/
  border-bottom: 1px solid var(--dark);
}

html {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-width: 100%;
  padding: 0;
  margin:0;
  background-color: #e4e5db;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d9d7ba' fill-opacity='0.62' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.badge-space {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.badge {
    --size: 200px;
    --light: #fcfaed;
    --dark: #d5d4ca;
    align-self: center;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    z-index: 1;
    background: url(http://www.donrafael.cl/en/images/bg-olivo.png) no-repeat center/cover, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQYV2NkQALXrl37zwjigxhaWlpgNphAFmRElgVJAAAAUA+G2H7kfgAAAABJRU5ErkJggg=="), linear-gradient(90deg, var(--dark) 0%, var(--light) 45%, var(--light) 55%, var(--dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 5px 5px 10px rgba(50,50,50, 0.2), inset 10px 0 20px var(--light), inset -2px 0 20px rgba(128,128,128,0.5);
}

.password-box {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
}