:root {
  --wine-color-dark: #6B0902;
  --wine-color-light: #BA0926;
  --label-white: white;
  --label-gray: #F2EFEF;
  --bottle-green-light: #3C6132;
  --bottle-green-dark: #213318;
  --wrapper-dark: #231917;
  --wrapper-light: #433834;
  
  --background-color: #465387;
}

body{
  background: var(--background-color);
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 20vmin;
  margin-bottom: 20vmin;
  width: 15vmin;
  height: 53vmin;
}

.bottle {
  position: absolute;
  bottom: 0;
  width: 15vmin;
  height: 40vmin;
  background: -webkit-gradient(linear,
    left top, right top,
    from(var(--wine-color-dark)), 
    color-stop(var(--wine-color-light)), 
    to(var(--wine-color-dark))
  );
  background: linear-gradient(to right,
    var(--wine-color-dark), 
    var(--wine-color-light), 
    var(--wine-color-dark)
  );
  border-radius: 40% 40% 50% 50% / 30% 30% 10% 10%;
}

.bottle::after {
  content: '';
  position: absolute;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  left: 3vmin;
  top: 2vmin;
  width: 3vmin;
  height: 8vmin;
  border-radius: 50% 50% 0 0;
  box-shadow: -1vmin -1vmin 0 rgba(255,255,255,0.2);
}

.label {
  position: absolute;
  width: 15vmin;
  height: 10vmin;
  background: -webkit-gradient(linear,
  left top, right top,
  from(var(--label-gray)),
  color-stop(var(--label-white)),
  to(var(--label-gray))
  );
  background: linear-gradient(to right,
  var(--label-gray),
  var(--label-white),
  var(--label-gray)
  );
  top: 15vmin;
}

.grapes {
  position: absolute;
  height: 5vmin;
  width: 5.5vmin;
  left: 50%;
  top: 3.5vmin;
  -webkit-transform: translateX(-50%) rotate(25deg);
          transform: translateX(-50%) rotate(25deg);
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.leaf {
  position: absolute;
  width: 3vmin;
  height: 2vmin;
  background: var(--bottle-green-light);
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  right: 0;
  top: -2vmin;
}

.grape-row {
  width: 100%;
  height: 1.5vmin;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

.grape {
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
  background: var(--wine-color-light);
 
}

.label::before {
  content: '';
  position: absolute;
  width: 15vmin;
  height: 3vmin;
  background: -webkit-gradient(linear,
    left top, right top,
    from(var(--wine-color-dark)), 
    color-stop(var(--wine-color-light)), 
    to(var(--wine-color-dark))
  );
  background: linear-gradient(to right,
    var(--wine-color-dark), 
    var(--wine-color-light), 
    var(--wine-color-dark)
  );
  border-radius: 50%;
  top: -2vmin;
}

.label::after {
  content: '';
  position: absolute;
  width: 15vmin;
  height: 3vmin;
  border-radius: 50%;
  bottom: -1vmin;
  background: -webkit-gradient(linear,
  left top, right top,
  from(var(--label-gray)),
  color-stop(var(--label-white)),
  to(var(--label-gray))
  );
  background: linear-gradient(to right,
  var(--label-gray),
  var(--label-white),
  var(--label-gray)
  );
}

.neck {
  position: absolute;
  width: 15vmin;
  height: 14vmin;
  background:-webkit-gradient(linear,
    left top, right top,
    from(var(--wine-color-dark)), 
    color-stop(var(--wine-color-light)), 
    to(var(--wine-color-dark)));
  background:linear-gradient(to right,
    var(--wine-color-dark), 
    var(--wine-color-light), 
    var(--wine-color-dark));
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.cutout {
  width: 6.2vmin;
  height: 16vmin;
  position: absolute;
  background: var(--background-color);
}

.cutout.left {
  left: -1vmin;
}

.cutout.right {
  right: -1vmin;
}

.glass {
  position: absolute;
  bottom: 3vmin;
  width: 5vmin;
  height: 4vmin;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: -webkit-gradient(linear,   
    left top, right top,   
    from(var(--bottle-green-dark)),
    color-stop(var(--bottle-green-light)), 
    to(var(--bottle-green-dark))
  );
  background: linear-gradient(to right,   
    var(--bottle-green-dark),
    var(--bottle-green-light), 
    var(--bottle-green-dark)
  );
}

.glass::after {
  content: '';
  position: absolute;
  width: 5vmin;
  height: 2vmin;
  background: -webkit-gradient(linear,   
    left top, right top,   
    from(var(--bottle-green-dark)),
    color-stop(var(--bottle-green-light)), 
    to(var(--bottle-green-dark))
  );
  background: linear-gradient(to right,   
    var(--bottle-green-dark),
    var(--bottle-green-light), 
    var(--bottle-green-dark)
  );
  border-radius: 50%;
  bottom: -0.5vmin;
}

.cap {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 5vmin;
  height: 7vmin;
  background: -webkit-gradient(linear,
  left top, right top,
  from(var(--wrapper-dark)),
  color-stop(var(--wrapper-light)),
  to(var(--wrapper-dark))
  );
  background: linear-gradient(to right,
  var(--wrapper-dark),
  var(--wrapper-light),
  var(--wrapper-dark)
  );
}

.cap::after {
  content: '';
  position: absolute;
  width: 5vmin;
  height: 2vmin;
  bottom: -1vmin;
  border-radius: 50%;
  background: -webkit-gradient(linear,
  left top, right top,
  from(var(--wrapper-dark)),
  color-stop(var(--wrapper-light)),
  to(var(--wrapper-dark))
  );
  background: linear-gradient(to right,
  var(--wrapper-dark),
  var(--wrapper-light),
  var(--wrapper-dark)
  );
}

.neck::after {
  content: '';
  position: absolute;
  width: 5.5vmin;
  height: 2vmin;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: -webkit-gradient(linear,
  left top, right top,
  from(var(--wrapper-dark)),
  color-stop(var(--wrapper-light)),
  to(var(--wrapper-dark))
  );
  background: linear-gradient(to right,
  var(--wrapper-dark),
  var(--wrapper-light),
  var(--wrapper-dark)
  );
  top: 1vmin;
}