body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: calc(100% - 16px);
    
    background-color: #ffffff00;
}

.present {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    margin-top: 10vw;
    width: 42vw;
    height: 35vw;
    @media only screen and (min-aspect-ratio: 1/1){
        width: 42vh;
        height: 35vh;
    }
}

.present__box {
    background-color: #FE4365;
    background-image: -webkit-repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    background-image: repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 0 0.5vw 0.5vw;
    box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
}

.present__ribbon--horizontal,
.present__ribbon--vetical {
    content: "";
    position: absolute;
    margin: auto;
    background-color: #F9CDAD;
}

.present__ribbon--vertical {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 5vw;
    height: 100%;
    background-color: #F9CDAD;
    background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent);
    background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent);
    box-shadow: inset 0 -4px 6px -2px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.1);
    @media only screen and (min-aspect-ratio: 1/1){
        width: 5vh;
    }
}

.present__ribbon--horizontal {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5vw;
    background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent);
    background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent);
    box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1);
    @media only screen and (min-aspect-ratio: 1/1){
        height: 5vh;
    }
}

.present__top {
    background-color: #FE4365;
    background-image: -webkit-repeating-linear-gradient(135deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    background-image: repeating-linear-gradient(-45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    position: absolute;
    top: 0;
    left: -1%;
    width: 102%;
    height: 20%;
    border-radius: 0.5vw 0.5vw 0 0;
    box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
}

.present__bow {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    margin: auto;
    width: 30%;
    height: 40%;
    background-color: #83AF9B;
    border-radius: 2px 2px 0 0;
    box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
}

.present__bow:before,
.present__bow:after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 70%;
    height: 150%;
    background-color: inherit;
    border-radius: 2px;
    z-index: -1;
}

.present__bow:before {
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: inset 6px 6px 6px rgba(0, 0, 0, 0.1);
}

.present__bow:after {
    right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
}

.present {
    -webkit-animation: shake 5s ease-in-out infinite;
    animation: shake 5s ease-in-out infinite;
  }

.present__top {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
}

.present:hover {
    -webkit-animation: none;
    animation: none;
}

.present:hover .santa {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.1s ease-out;
    transition: -webkit-transform 0.1s ease-out;
    transition: transform 0.1s ease-out;
    transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}

.present:hover .present__top {
    -webkit-transform: translateY(-17vw);
    transform: translateY(-17vw);
    -webkit-animation: pop-the-top 0.4s ease-in;
    animation: pop-the-top 0.4s ease-in;
}

@-webkit-keyframes pop-the-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    30% {
      -webkit-transform: translateY(-24vw);
      transform: translateY(-24vw);
    }

    60% {
      -webkit-transform: translateY(-16vw);
      transform: translateY(-16vw);
    }

    75% {
      -webkit-transform: translateY(-18vw);
      transform: translateY(-18vw);
    }

    90%,
    100% {
      -webkit-transform: translateY(-17vw);
      transform: translateY(-17vw);
    }
}

@keyframes pop-the-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    30% {
      -webkit-transform: translateY(-24vw);
      transform: translateY(-24vw);
    }

    60% {
      -webkit-transform: translateY(-16vw);
      transform: translateY(-16vw);
    }

    75% {
      -webkit-transform: translateY(-18vw);
      transform: translateY(-18vw);
    }

    90%,
    100% {
      -webkit-transform: translateY(-17vw);
      transform: translateY(-17vw);
    }
}

@-webkit-keyframes shake {
    52% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    54% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    56% {
      -webkit-transform: translateX(-0.5vw);
      transform: translateX(-0.5vw);
    }

    58% {
      -webkit-transform: translateX(0.5vw);
      transform: translateX(0.5vw);
    }

    60% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    62% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    64% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
}

@keyframes shake {
    52% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    54% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    56% {
      -webkit-transform: translateX(-0.5vw);
      transform: translateX(-0.5vw);
    }

    58% {
      -webkit-transform: translateX(0.5vw);
      transform: translateX(0.5vw);
    }

    60% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    62% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    64% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
}