/* Bootstrap Breakpoints:
  xs: <576px (extra small devices, phones)
  sm: ≥576px (small devices, phones)
  md: ≥768px (medium devices, tablets)
  lg: ≥992px (large devices, desktops)
  xl: ≥1200px (extra large devices, large desktops)
  xxl: ≥1400px (extra extra large devices, larger desktops)
*/

/* Color palette: Watermelon Sorbet*/
:root {
  --red: rgb(239, 71, 111);
  --yellow: rgb(255, 209, 102);
  --green: rgb(6, 214, 160);
  --blue: rgb(17, 138, 178);
  --dBlue: rgb(7, 59, 76);
}

@font-face {
  font-family: "Londrina Shadow";
  src: url("/assets/fonts/LondrinaShadow-Regular.ttf");
}

.addScoreAnimation {
  animation: addScoreAnimation 1s ease-in-out;
}

.answerCardsContainer .card::before {
  content: "📌";
  position: absolute;
  transform: scaleX(-1);
  top: -16px;
  left: -14px;
}
.answerCardsContainer .card::after {
  content: "📌";
  position: absolute;
  top: -10px;
  right: -12px;
}

.answerCardsContainer .card {
  border: 1px solid gray;
}
.answerCardsContainer {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

body,
.btn,
.card-title,
input {
  font-family: "Courier New", Courier, monospace;
}
body {
  background-color: var(--red);
  overflow-x: hidden; /* To avoid scroll bars on embiggen animation */
}

button:active {
  transform: scale(0.9);
}

.btn-select5 {
  background-color: var(--red);
}
.btn-select10 {
  background-color: var(--yellow);
}
.btn-select10:hover {
  background-color: #dcb14e;
}
.btn-selectAll {
  background-color: var(--green);
}

.card:nth-child(odd) {
  transform: rotate(3deg);
}
.card:nth-child(even) {
  transform: rotate(-3deg);
}

.embiggenFinalScore {
  animation: embiggenFinalScore 1s ease-in-out alternate 4;
}

.endScreen .card {
  border: 2px double black;
}

.flip {
  animation: flip 1.5s ease-in-out;
}

.finalScore {
  background-color: var(--yellow);
  box-shadow: 0 0 40px rgb(255, 209, 102);
  border-radius: 50%;
  font-weight: 600;
  text-decoration: underline 5px;
}

.finalScoreText {
  color: var(--red);
}

h1,
h2,
.startPhotosContainer .card-title,
label[for="playerNameInput"],
.noHighScore {
  font-family: "Londrina Shadow";
}

.highScoreListcontainer {
  animation: pulseShadowRed 1s ease-in-out infinite alternate;
}

.highScoreListHeader {
  text-decoration: underline 4px solid black;
  animation: pulseUnderline 1s ease-in-out infinite alternate;
}

input {
  animation: pulseShadowYellowGreen 1s ease-in-out infinite alternate;
}
@keyframes addScoreAnimation {
  from {
    scale: 1;
    opacity: 1;
    background: var(--yellow);
    border-radius: 10px;
  }
  to {
    scale: 2;
    opacity: 0;
    background: var(--yellow);
    border-radius: 10px;
  }
}
@keyframes pulseShadowYellowGreen {
  from {
    box-shadow: 0 0 20px var(--yellow);
  }
  to {
    box-shadow: 0 0 20px var(--green);
  }
}

@keyframes pulseShadowRed {
  from {
    box-shadow: 0 4px 8px var(--red);
  }
  to {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0);
  }
}

@keyframes pulseUnderline {
  from {
    text-decoration-color: rgba(255, 255, 255, 0);
  }
  to {
    text-decoration-color: var(--red);
  }
}

@keyframes slideOut {
  to {
    transform: translateX(-100%);
    scale: 0;
    opacity: 0;
  }
}
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes slideUpOut {
  to {
    transform: translateY(-100px);
    opacity: 0;
  }
}

@keyframes embiggenFinalScore {
  from {
    scale: 1;
  }
  to {
    scale: 2;
  }
}

@keyframes flip {
  from {
    opacity: 1;
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
    opacity: 0;
  }
}

.nextQuestionBtn {
  background-color: var(--red);
  box-shadow: 0 0 20px var(--red);
  color: black;
}
.nextQuestionBtn:hover {
  transition: color 0.3s ease-in-out;
}

.photoContainer {
  border: 2px double black;
  box-shadow: 0 0px 20px var(--yellow);
  view-transition-name: photoContainer;
}

.questionBtnContainer .btn:hover {
  box-shadow: 0 0 25px var(--red);
  transition: box-shadow 0.3s ease-in-out;
}
.rightAnswerCardShadow {
  box-shadow: 0 0 10px var(--green);
}

.startBtnContainer {
  view-transition-name: startScreen;
}

.siteContainer,
.questionBtnContainer .btn {
  box-shadow: 0 0 40px var(--yellow);
}
.startScreenContainer .btn {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid black;
}

.startPhotosContainer {
  height: 35vh;
  overflow: hidden;
}

.startPhotosContainer img {
  filter: hue-rotate(50deg);
  filter: contrast(5);
}

::view-transition-old(photoContainer) {
  animation: slideOut 0.8s ease-in-out;
}

::view-transition-new(photoContainer) {
  animation: slideIn 0.8s ease-in-out;
}

::view-transition-old(startScreen) {
  animation: slideUpOut 0.7s forwards;
}

.welcomeHeader,
.questionScreenContainer h2 {
  text-shadow: var(--yellow) 0 0 40px;
}

.wrongAnswerCardShadow {
  box-shadow: 0 0 10px var(--red);
}