:root {
  --light: #ffffff;
  --dark: #000000;
  --blue1: #e8f5fa;
  --blue2: #b7e2ed;
  --blue3: #8cc5e9;
  --green: #8cc63f;
}

/* general styles ----------------------*/
body {
  background-color: var(--blue1);
}

.shadow1 {
  box-shadow: 0 0 5px #51515126;
}

a, a:after {
  text-decoration: none;
  color: var(--light);
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

/* Modal Styles ----------------------*/
.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-body p {
  font-size: 18px;
}

#pokelist {
  margin: 0 60px 20px;
  z-index: 200;
}

.drop {
  /* keep the dropdown above the buttons */
  z-index: 200;
}

.fireImg {
  width: 260px;
  position: absolute;
  bottom: 55px;
}

/* seat button grid styles ----------------------*/
#radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 140px;
  z-index: 100;
}

/* Toolbar button styles ----------------------*/
.toolbar {
  background-color: var(--light);
  padding: 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.tool-container {
  background-color: var(--blue3);
  color: var(--light);
  font-weight: 500;
  margin: 8px;
  padding: 10px;
  padding-right: 16px;
  border-radius: 40px;
  display: flex;
  align-items: center; 
}

.tool-container:hover {
  cursor: pointer;
}

#add-container {
  transition: all 0.12s;
}

#add-container:hover {
  background-color: var(--green);
}

.icon-container {
  background-color: var(--light);
  border-radius: 100%;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  transition: all .12s;
}

.icon-container:hover, #add-container:hover .icon-container, .volume-container:hover .icon-container, #toggleBackground:hover .icon-container {
  background-color: var(--blue2);
  cursor: pointer;
  border-radius: 100%;
}

.icon-container img {
  width: 100%;
}

/* Campfire section styles ----------------------*/
.camp-container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  position: relative;
}

.camp {
  width: 100%;
  max-width: 1200px;
  z-index: -100;
}

.slot {
  aspect-ratio: 1/1;
  position: absolute;
  border-radius: 100%;
  transition: rotate 0.1s;
  animation-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.slot img {
  width: 100%;
}

/* styles for pokeball to send pokemon back  */
.droppable-pokeball {
  position: absolute;
  bottom: 1em;
  left: 0;
  width: 12vw;
  height: 12vw;
}

#pokeB {
  width: 12vw;
  height: 12vw;
  display: flex;
  }

#pokeB.over {
  animation: spin 2s linear infinite;
}

/* for the remove #pokeB */
.hidden {
  opacity: 0;
}

/* Footer styles ----------------------*/
footer {
  padding: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer h5 {
  margin-bottom: 26px;
}

footer a {
  padding: 8px 20px;
  background-color: var(--blue3);
  margin: 4px;
  border-radius: 40px;
  transition: all 0.12s;
}

footer a:hover {
  background-color: var(--green);
}

.creators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}