body {
  margin: 200px;
  background: url("assets/graygrad.png") no-repeat center center fixed;
  background-size: cover;
  font-family: sans-serif;
  color: gray;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.slip {
  width: 350px;
  margin: -20px 0; /* overlaps them a bit */
  transition: transform 0.2s ease-out;
  transform-origin: left center; /* pivot from the left edge */
}

.main {
  margin-left: 220px; 
  position: relative;
}
.mascot {
  position: absolute;
  bottom: -200px;
  right: -150px;
  width: 400px;
}
.banner {
  position: absolute;
  top: -500px;
  right: -60px;
  transform: rotate(-45deg);
  width: 300px;
}