*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    transition:all .3s;
    user-select:none;
  }
  
  
  body{
    background-image: url(bpic.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
    cursor:grabbing;
  }

  
  .love{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50vmin;
    height:40vmin;
    object-fit:contain;
    filter: saturate(2);
    opacity:0;
    transition:all 3s;
  }
  
  .loved{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50vmin;
    height:40vmin;
    object-fit:contain;
    filter: saturate(2);
    opacity:0;
    transition:all 3s;
  }
  .note{
    position:absolute;
    top:10px;
    color:rgba(255,255,255,.75);
    text-align:center;
    font-family: sans-serif;
  }
  
  
  .container{
    width:70vmin;
    height:70vmin;
    transform-style:preserve-3d;
    transform:rotateY(-20deg) rotateX(-5deg);
    animation:animate 45s linear infinite;
    align-items: center;
  }
  
  
  @keyframes animate{
    
   0%,100%{
      transform:rotateY(20deg) rotateX(30deg) translateY(-50px);
    }
    
    50%{
       transform:rotateY(-360deg) rotateX(-5deg) translateY(5px);
    }
    
  }
  
  
  .front{
    width:100%;
    height:100%;
    transform:translateZ(15vmin);
    display:flex;
    position:relative;
    
  }
  
  .back{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
  }
  
  .front,
  .back{
    filter:drop-shadow(0 0 15px #ab1151);
  }
  
  
  .front .front-left,
  .back .back-left{
    background: #00CCFF;
    width:70%;
    height:100%;
      border-top-left-radius:50%;
    border-top-right-radius:50%;
    transform:rotate(-50deg);
    position:absolute;
    left:0;
  }
  
  .front .front-right,
  .back .back-right{
    background: #00CCFF;
    width:70%;
    height:100%;
      border-top-left-radius:50%;
    border-top-right-radius:50%;
    transform:rotate(48deg);
    position:absolute;
    right:0;
  }
  
  
  .left{
    width:15vmin;
    height:40vmin;
    background: #00CCFF;
    position:absolute;
    bottom:0;
    transform:rotateY(90deg) rotateX(50deg) translateX(-7.5vmin) translateY(19vmin) translateZ(-2vmin);
  }
  
  
  
  
  
  .right{
    width:15vmin;
    height:40vmin;
    background: #00CCFF;
    position:absolute;
    bottom:0;
    right:0;
    transform:rotateY(-90deg) rotateX(48deg) translateX(7.5vmin) translateY(17.5vmin) translateZ(-2vmin);
  }
  
  
  .left-piece,
  .left-piece2,
  .left-piece3,
  .left-piece4,
  .left-piece5,
  .left-piece6,
  .left-piece7,
  .left-piece8,
  .left-piece9,
  .left-piece10,
  .left-piece11,
  .left-piece12,
  .left-piece13,
  .left-piece14,
  .left-piece15,
  .left-piece16,
  .left-piece17,
  .left-piece18,
  .left-piece19,
  .left-piece20,
  .left-piece21,
  .left-piece22,
  .left-piece23{
    width:15vmin;
    height:10vmin;
    background: #00CCFF;
    position:absolute;
    bottom:0;
  }
  
  .left-piece{
    transform:rotateY(90deg) rotateX(42deg) translateX(-7.5vmin) translateY(-15vmin) translateZ(8.1vmin);
  }
  
  .left-piece2{
    transform:rotateY(90deg) rotateX(32deg) translateX(-7.5vmin) translateY(-25vmin) translateZ(4.8vmin);
  }
  
  
  .left-piece3{
    transform:rotateY(90deg) rotateX(18deg) translateX(-7.5vmin) translateY(-35vmin) translateZ(-1.8vmin);
    height:5vmin;
  }
  
  
  .left-piece4{
    transform:rotateY(90deg) rotateX(10deg) translateX(-7.5vmin) translateY(-39vmin) translateZ(-6.9vmin);
    height:5vmin;
  }
  
  
  .left-piece5{
    transform:rotateY(90deg) rotateX(3deg) translateX(-7.5vmin) translateY(-42vmin) translateZ(-11.85vmin);
    height:5vmin;
  }
  
  
  .left-piece6{
    transform:rotateY(90deg) rotateX(-10deg) translateX(-7.5vmin) translateY(-43.1vmin) translateZ(-21.6vmin);
    height:5vmin;
  }
  
  
  .left-piece7{
    transform:rotateY(90deg) rotateX(-20deg) translateX(-7.5vmin) translateY(-43.6vmin) translateZ(-29.5vmin);
    height:3vmin;
  }
  
  .left-piece8{
    transform:rotateY(90deg) rotateX(-26deg) translateX(-7.5vmin) translateY(-43vmin) translateZ(-34vmin);
    height:3vmin;
  }
  
  .left-piece9{
    transform:rotateY(90deg) rotateX(-36deg) translateX(-7.5vmin) translateY(-39vmin) translateZ(-41vmin);
    height:3vmin;
  }
  
  
  .left-piece10{
    transform:rotateY(90deg) rotateX(-45deg) translateX(-7.5vmin) translateY(-34.9vmin) translateZ(-46.8vmin);
    height:3vmin;
  }
  
  .left-piece11{
    transform:rotateY(90deg) rotateX(-58deg) translateX(-7.5vmin) translateY(-26.2vmin) translateZ(-53.6vmin);
    height:3vmin;
  }
  
  
  .left-piece12{
    transform:rotateY(90deg) rotateX(-65deg) translateX(-7.5vmin) translateY(-22.4vmin) translateZ(-56.54vmin);
    height:3vmin;
  }
  
  
  .left-piece13{
    transform:rotateY(90deg) rotateX(-73deg) translateX(-7.5vmin) translateY(-17vmin) translateZ(-59.4vmin);
    height:3vmin;
  }
  
  
  .left-piece14{
    transform:rotateY(90deg) rotateX(-79deg) translateX(-7.5vmin) translateY(-13.7vmin) translateZ(-61.1vmin);
    height:3vmin;
  }
  
  
  .left-piece15{
    transform:rotateY(90deg) rotateX(-85deg) translateX(-7.5vmin) translateY(-10.2vmin) translateZ(-62.25vmin);
    height:3vmin;
  }
  
  
  
  .left-piece16{
    transform:rotateY(90deg) rotateX(-92deg) translateX(-7.5vmin) translateY(-5vmin) translateZ(-63.25vmin);
    height:3vmin;
  }
  
  
  
  .left-piece16{
    transform:rotateY(90deg) rotateX(-96deg) translateX(-7.5vmin) translateY(-1vmin) translateZ(-63.35vmin);
    height:3vmin;
  }
  
  
  .left-piece17{
    transform:rotateY(90deg) rotateX(-96deg) translateX(-7.5vmin) translateY(-4vmin) translateZ(-63.35vmin);
    height:3vmin;
  }
  
  
  .left-piece18{
    transform:rotateY(90deg) rotateX(-100deg) translateX(-7.5vmin) translateY(-2.6vmin) translateZ(-63.58vmin);
    height:3vmin;
  }
  
  
  .left-piece19{
    transform:rotateY(90deg) rotateX(-105deg) translateX(-7.5vmin) translateY(0.1vmin) translateZ(-63.58vmin);
    height:3vmin;
  }
  
  
  
  .left-piece20{
    transform:rotateY(90deg) rotateX(-115deg) translateX(-7.5vmin) translateY(8.2vmin) translateZ(-62.9vmin);
    height:3vmin;
  }
  
  
  
  .left-piece21{
    transform:rotateY(90deg) rotateX(-115deg) translateX(-7.5vmin) translateY(5.3vmin) translateZ(-62.9vmin);
    height:3vmin;
  }
  
  
  
  .left-piece22{
    transform:rotateY(90deg) rotateX(-115deg) translateX(-7.5vmin) translateY(2.3vmin) translateZ(-62.9vmin);
    height:3vmin;
  }
  
  
  .left-piece23{
    transform:rotateY(90deg) rotateX(-118deg) translateX(-7.5vmin) translateY(3.5vmin) translateZ(-62.7vmin);
    height:3vmin;
  }
  
  
  
  
  
  .right-piece,
  .right-piece2,
  .right-piece3,
  .right-piece4,
  .right-piece5,
  .right-piece6,
  .right-piece7,
  .right-piece8,
  .right-piece9,
  .right-piece10,
  .right-piece11,
  .right-piece12,
  .right-piece13,
  .right-piece14,
  .right-piece15,
  .right-piece16,
  .right-piece17,
  .right-piece18,
  .right-piece19,
  .right-piece20,
  .right-piece21,
  .right-piece22,
  .right-piece23{
    width:15vmin;
    height:10vmin;
    background: #00CCFF;
    position:absolute;
    bottom:0;
    right:0;
  }
  
  
  .right-piece{
    transform:rotateY(90deg) rotateX(-41.5deg) translateX(-7.5vmin) translateY(-15vmin) translateZ(-8.1vmin);
  }
  
  
  .right-piece2{
    transform:rotateY(90deg) rotateX(-31.5deg) translateX(-7.5vmin) translateY(-25vmin) translateZ(-4.8vmin);
  }
  
  
  
  .right-piece3{
    transform:rotateY(90deg) rotateX(-17.3deg) translateX(-7.5vmin) translateY(-34.3vmin) translateZ(1.8vmin);
    height:5vmin;
  }
  
  
  .right-piece4{
    transform:rotateY(90deg) rotateX(-9.5deg) translateX(-7.5vmin) translateY(-38.5vmin) translateZ(6.9vmin);
    height:5vmin;
  }
  
  
  .right-piece5{
    transform:rotateY(90deg) rotateX(-3deg) translateX(-7.5vmin) translateY(-42vmin) translateZ(11.7vmin);
    height:5vmin;
  }
  
  
  .right-piece6{
    transform:rotateY(90deg) rotateX(10.2deg) translateX(-7.5vmin) translateY(-43.1vmin) translateZ(21.6vmin);
    height:5vmin;
  }
  
  
  .right-piece7{
    transform:rotateY(90deg) rotateX(20.2deg) translateX(-7.5vmin) translateY(-43.6vmin) translateZ(29.5vmin);
    height:3vmin;
  }
  
  .right-piece8{
    transform:rotateY(90deg) rotateX(26.2deg) translateX(-7.5vmin) translateY(-43vmin) translateZ(34vmin);
    height:3vmin;
  }
  
  .right-piece9{
    transform:rotateY(90deg) rotateX(36deg) translateX(-7.5vmin) translateY(-39vmin) translateZ(41vmin);
    height:3vmin;
  }
  
  
  .right-piece10{
    transform:rotateY(90deg) rotateX(45deg) translateX(-7.5vmin) translateY(-34.9vmin) translateZ(46.8vmin);
    height:3vmin;
  }
  
  
  
  .right-piece11{
    transform:rotateY(90deg) rotateX(58deg) translateX(-7.5vmin) translateY(-26.2vmin) translateZ(53.75vmin);
    height:3vmin;
  }
  
  
  .right-piece12{
    transform:rotateY(90deg) rotateX(65deg) translateX(-7.5vmin) translateY(-22.4vmin) translateZ(56.8vmin);
    height:3vmin;
  }
  
  
  .right-piece13{
    transform:rotateY(90deg) rotateX(73deg) translateX(-7.5vmin) translateY(-17vmin) translateZ(59.64vmin);
    height:3vmin;
  }
  
  
  .right-piece14{
    transform:rotateY(90deg) rotateX(79deg) translateX(-7.5vmin) translateY(-13.7vmin) translateZ(61.25vmin);
    height:3vmin;
  }
  
  
  .right-piece15{
    transform:rotateY(90deg) rotateX(85deg) translateX(-7.5vmin) translateY(-10.2vmin) translateZ(62.45vmin);
    height:3vmin;
  }
  
  
  .right-piece16{
    transform:rotateY(90deg) rotateX(96deg) translateX(-7.5vmin) translateY(-1vmin) translateZ(63.59vmin);
    height:3vmin;
  }
  
  
  .right-piece17{
    transform:rotateY(90deg) rotateX(96deg) translateX(-7.5vmin) translateY(-4vmin) translateZ(63.56vmin);
    height:3vmin;
  }
  
  
  .right-piece18{
    transform:rotateY(90deg) rotateX(100deg) translateX(-7.5vmin) translateY(-2.42vmin) translateZ(63.68vmin);
    height:3vmin;
  }
  
  
  .right-piece19{
    transform:rotateY(90deg) rotateX(105deg) translateX(-7.5vmin) translateY(0.2vmin) translateZ(63.68vmin);
    height:3vmin;
  }
  
  
  
  .right-piece20{
    transform:rotateY(90deg) rotateX(115deg) translateX(-7.5vmin) translateY(8.3vmin) translateZ(62.9vmin);
    height:3vmin;
  }
  
  
  
  .right-piece21{
    transform:rotateY(90deg) rotateX(115deg) translateX(-7.5vmin) translateY(5.3vmin) translateZ(62.9vmin);
    height:3vmin;
  }
  
  
  
  .right-piece22{
    transform:rotateY(90deg) rotateX(115deg) translateX(-7.5vmin) translateY(2.3vmin) translateZ(62.9vmin);
    height:3vmin;
  }
  
  
  .right-piece23{
    transform:rotateY(90deg) rotateX(118deg) translateX(-7.5vmin) translateY(3.5vmin) translateZ(62.7vmin);
    height:3vmin;
  }

  @media only screen and (max-width: 600px) {
    .container {
      padding: 0 10px;
    }
  
    .column {
      width: 100%;
    }
  }

  img {
    max-width: 100%;
    height: auto;
  }