@import "style.css";

.parallax {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.cards-aboutUs {
  padding: 1rem 2rem;
  margin: 1rem 0;
  width: 100%;
}
.cards-aboutUs h2 {
  animation: pumping 2s ease-in-out infinite;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  line-height: 150%;
  margin-bottom: 4rem;
  text-align: center;
}
.card-aboutUs-right {
  background-color: var(--secondaryBox);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--backgroundColor);
  color: var(--whiteText);
  margin-left: auto;
  margin-bottom: 4rem;
  padding: 2.5rem 2rem;
  position: relative;
  width: 80%;
  z-index: -1;
}
.card-aboutUs-left {
  background-color: var(--primaryBox);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--backgroundColor);
  color: var(--whiteText);
  margin-right: auto;
  margin-bottom: 4rem;
  padding: 2.5rem 2rem;
  position: relative;
  width: 80%;
  z-index: -1;
}
.picture-right {
  border: 3px solid var(--backgroundPhotoParties);
  border-radius: 50%;
  height: 70px;
  position: absolute;
  top: -25px;
  right: -25px;
  width: 70px;
}
.picture-left {
  border: 3px solid var(--backgroundPhotoParties);
  border-radius: 50%;
  height: 70px;
  position: absolute;
  top: -25px;
  left: -25px;
  width: 70px;
}
.winnie-picture {
  background-image: url(../img/tedfriendrequest.jpg);
  background-size: 250%;
  background-position: 24% 50%;
  background-repeat: no-repeat;
}
.ted-picture {
  background-image: url(../img/Team/teddyloveu.jpg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.twinky-picture {
  background-image: url(../img/DSK.jpg);
  background-size: 250%;
  background-position: 20% 0%;
  background-repeat: no-repeat;
}
.bubsy-picture {
  background-image: url(../img/parties/concert.jpg);
  background-size: 550%;
  background-position: 42% 0%;
  background-repeat: no-repeat;
}
.comment {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.comment span {
  margin-right: 0.5rem;
}
.stars-comment img {
  height: 15px;
  width: 15px;
}
.date {
  display: inline-block;
  font-weight: 700;
  margin-top: 0.5rem;
}
.insult-button-container {
  margin: 2rem 0;
  text-align: center;
}
.insultButton {
  background-color: var(--primaryBox);
  border: 0;
  box-shadow: 0 0 10px var(--backgroundColor);
  outline: none;
  border-radius: 5px;
  color: var(--whiteText);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 1rem 1.5rem;
  transition: 200ms;
}
.insultButton:hover {
  background-color: var(--closeButton);
  box-shadow: 0 0px 6px var(--closeButton);
  cursor: pointer;
}
.insultButton:active {
  transform: scale(0.95);
}
.earthshake {
  animation: earthquake 200ms cubic-bezier(0.4, 0.1, 0.6, 0.9) 2;
}
/* DESKTOP SCREEN */
@media (min-width: 799px) {
  .navAboutUs {
    border-bottom: 2px solid var(--primary);
  }
  header nav a {
    margin: 0;
  }
  .parallax {
    height: 400px;
  }
  .cards-aboutUs h2 {
    font-size: 1.4rem;
  }
  .cards-aboutUs {
    padding: 1rem 2rem;
    margin: 2rem auto;
    width: 80%;
  }
}
@media (min-width: 1300px) {
  .cards-aboutUs h2 {
    font-size: 1.7rem;
  }
  .card-aboutUs-right {
    margin-left: auto;
    width: 60%;
    z-index: -1;
  }
  .card-aboutUs-left {
    margin-right: auto;
    width: 60%;
    z-index: -1;
  }
}