@import url("/static/bootstrap-5.3.0-dist/css/bootstrap.min.css");
@import url("/static/css/all.min.css");

@font-face {
  font-family: cap;
  src: url("/static/Caprasimo-Regular.ttf");
}

@font-face {
  font-family: pfd;
  src: url("/static/PlayfairDisplay-VariableFont_wght.ttf");
}

@font-face {
  font-family: sla;
  src: url("/static/Slabo27px-Regular.ttf");
}

@font-face {
  font-family: pt;
  src: url("/static/PTSerif-Regular.ttf");
}

body {
  background-image: url("/static/bg-chat-dark.jpg");
  /* background-image: url("/static/bg-chat-darker.jpg"); */
  background-repeat: repeat;
  background-size: 10%;
}

.font-sm {
  font-size: 0.85rem;
}

.font-vsm {
  font-size: 0.75rem;
}

.pt {
  font-family: "pt";
}

.cap {
  font-family: "cap";
}

.pfd {
  font-family: "pfd";
}

.sla {
  font-family: "sla";
}

.form-w {
  width: 20%;
}

.w-15 {
  width: 15%;
}

.w-10 {
  width: 10%;
}

.w-35 {
  width: 35%;
}

.w-85 {
  width: 85%;
}

.w-70 {
  width: 70%;
}

.w-60 {
  width: 60%;
}

.w-20 {
  width: 20%;
}

.w-20 {
  width: 30%;
}

/* .h-prod-fixed {
  height: 32rem;
} */

.footer {
  height: 24rem;
}

.w-prod-fixed {
  width: 27%;
}

.h-35 {
  height: 35%;
}

.h-58-p {
  height: 58px;
}

.h-85 {
  height: 85%;
}

.h-15 {
  height: 15%;
}

.bg-header {
  background: linear-gradient(0.25turn, black, rgb(25, 34, 90));
}

.bgImgPA {
  background-image: url("bg-laugh-dark.jpg");
  background-position: center;
  background-size: 150%;
}

.bgImgBA {
  background-image: url("bg-brand-dark.jpg");
  background-position: center;
  background-size: 100%;
}

.bgImgPC {
  background-image: url("bg-clone-dark.jpg");
  background-position: center;
  background-size: 100%;
}

.frosty {
  background-color: rgb(255, 255, 255 / 0.01);
  backdrop-filter: blur(10px);
  transition: backdrop-filter 1s;
}

.frosty:hover {
  backdrop-filter: blur(0px);
}

.border-pa {
  border-color: rgba(112, 48, 160) !important;
}

.text-pa {
  color: rgba(112, 48, 160) !important;
}

.bg-pa {
  background-color: rgba(112, 48, 160) !important;
}

.border-pc {
  border-color: rgba(192, 0, 0) !important;
}

.text-pc {
  color: rgba(192, 0, 0) !important;
}

.bg-pc {
  background-color: rgba(192, 0, 0) !important;
}

.bg-footer {
  background: linear-gradient(black, navy);
}

form > div {
  margin-top: 0.5rem;
}

#signupApp a {
  text-decoration: none;
}

#chatApp a {
  text-decoration: none;
}

#loginApp a {
  text-decoration: none;
}

#homeApp a {
  text-decoration: none;
}

#fantasyApp a {
  text-decoration: none;
}

#chatApp a:hover {
  text-decoration: underline;
}

#signupApp a:hover {
  text-decoration: underline;
}

#loginApp a:hover {
  text-decoration: underline;
}

#homeApp a:hover {
  text-decoration: underline;
}

#fantasyApp a:hover {
  text-decoration: underline;
}

.fw {
  width: 50%;
}

div[data-bs-toggle]:hover {
  cursor: pointer;
}

.cI {
  padding-top: 2.75rem;
}

.fS {
  margin-bottom: 16rem;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.list-enter-active,
.list-leave-active {
  transition: all 1.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

ul > li {
  padding: 1rem !important;
}

.clicky:hover {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: #198754 !important;
  border-color: #198754 !important;
}

.bg-body-tertiary-chat {
  background-color: rgba(43, 48, 53, 0.35);
}

.bg-frosty {
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

.mb-6 {
  margin-bottom: 3rem;
}

.blurry {
  /* -webkit-mask-image: linear-gradient(to top, black 10%, transparent 80%); */
  mask-image: linear-gradient(to top, black 50%, transparent);
}

/* Prevent number arrows on input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* #fantasyApp > img {
  height: 50
} */

@media screen and (max-width: 430px) {
  #verify,
  #signupApp,
  #createApp,
  #loginApp,
  #chatApp {
    height: 100svh !important;
  }

  #loginApp {
    height: 100svh !important;
  }

  .bg-frosty {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  .mb-6 {
    margin-bottom: 0rem;
  }

  .w-prod-fixed {
    width: 100%;
  }

  .w-35 {
    width: 100%;
  }

  body {
    background-size: 50%;
  }

  .prodItem {
    margin-bottom: 2rem;
    margin-right: 0rem;
  }

  .form-w {
    width: 85%;
  }

  .fw {
    width: 100%;
  }

  .cI {
    padding-top: 3.25rem;
  }
}