/* All elements */

* {
	padding: 0;
	margin: 0;
}

/* Page */

body {
  background-image: url("https://projects.codecraftworks.com/web/uaxvKOVAe7GeeAHQHEKM/assets/backdrop.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center bottom 10%;
  margin-bottom: 150px;
}

/* Title */
.title {
  font-family: system-ui;
  font-size: 3rem;
  color: ivory;
  text-shadow: 3px 3px 1px black;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.title::after {
  content: "🚀";
  text-shadow: none;
}

/* Rocket */

.rocket {
  position: relative;
  width: 250px;
  margin: 0 auto;
}

.rocket__shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.rocket__parts {
  position: relative;
  width: 250px;
  margin: 0 auto;
}

.rocket__part {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  list-style: none;
}

.rocket__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 60px;
  border: 0;
  background: transparent;
  z-index: 1;
}

.rocket__button:hover {
  opacity: 0.8;
}

.rocket__button--left {
  left: -50px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 30px solid ivory;
  border-bottom: 20px solid transparent;
}

.rocket__button--left:hover {
  cursor: pointer;
}

.rocket__button--right {
  right: -50px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 30px solid ivory;
  border-bottom: 20px solid transparent;
}

.rocket__button--right:hover {
  cursor: pointer;
}

.rocket__options-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.rocket__options {
  position: relative;
  height: 100%;
  list-style: none;
  transition: transform 0.25s ease-out;
}

.rocket__option {
  position: absolute;
  top: 0;
	bottom: 0;
  width: 100%;
}

.rocket__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Share Button */

.save {
  font-size: 1.5rem;
  margin: 25px auto 0;
  padding: 3px;
  padding-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: none;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
  cursor: pointer;
  background-color: ivory;
}

.save:hover {
  opacity: 0.8;
}

.save:active {
  box-shadow: none;
}

.save__icon {
  height: 40px;
}

/* Shape Menu */

.menu {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  background-color: lightblue;
  margin-top: 20px;
  padding: 20px 20px 50px;
}

.menu__shape {
  cursor: pointer;
  user-select: none;
}

/* Draggable Elements */

.draggable {
  position: absolute;
  user-select: none;
  z-index: 2;
  scale: 1;
}

.draggable:hover {
  cursor: grab;
  opacity: 0.8;
}

.draggable:active {
  cursor: grabbing;
}

.draggable:focus {
  outline: dashed;
}

.draggable:focus:active {
  outline: dashed 2px;
}

/* Shapes */

.triangle-bottomright,
.t0 {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

.triangle-bottomleft,
.t1 {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

.triangle-topright,
.t2 {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

.triangle-topleft,
.t3 {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

.circle,
.c {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

.flame,
.f {
  width: 80px;
  height: 100px;
  background-image: url("https://projects.codecraftworks.com/web/J99pf0w2JvswK3CPFKt8/assets/flame.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.triangle-up,
.t4 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

.triangle-down,
.t5 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

.square,
.q {
  width: 100px;
  height: 100px;
  background-color: red;
}

.moon,
.m {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

.star,
.s {
  width: 100px;
  height: 100px;
  background-image: url("https://projects.codecraftworks.com/web/uSiu6PRPU0qAyI9d3hgT/assets/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}