body {
  background: #FFFFFF;
  font-family: monospace, arial;
}



#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    height: 100vh;
    padding: 20px 18px;
    background: #FFFFFF;
    border-right: 1px solid #d8d8d6;
}

#sidebar li {
    font-size: 13px;
    padding: 6px 0;
    cursor: pointer;
    color: #2a2a2a;
}

ul {
    list-style-type: none;
}

.ipod {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;

position: absolute;
width: 180px;
height: 301px;
left: 352px;
top: 425px;


}

.camcorder {
  position: relative;
  width: 639.18px;
  height: 639.18px;
  right: 261.82px;
  top: -120px;

  background: url(PhotoshopExtension_Image.png);
  transform: matrix(-0.94, 0.33, 0.33, 0.94, 0, 0);
  
  animation: floating 3s ease-in-out infinite;
}


@keyframes floating {
  0% {
    /* Start position: no vertical movement */
    transform: matrix(-0.94, 0.33, 0.33, 0.94, 800, -70);
  }
  50% {
    /* Midpoint: move up by 15 pixels (adjust as needed) */
    transform: matrix(-0.94, 0.33, 0.33, 0.94, 800, -60);
  }
  100% {
    /* End position: return to the starting point */
    transform: matrix(-0.94, 0.33, 0.33, 0.94, 800, -70);
  
}

/* Ellipse 1 */

.ellipse {
box-sizing: border-box;

position: absolute;
width: 176px;
height: 44px;
left: 756px;
top: 514px;

border: 1px solid #000000;

}

/* Surprise me */

.surpriseme {
position: absolute;
width: 94px;
height: 17px;
left: 730px;
top: 520px;

font-family: 'Sometype Mono';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
/* identical to box height */

color: #000000;

}