@import url('https://fonts.cdnfonts.com/css/vintage-comic');

/* FONTS */
body {
  font-family: 'Noto Sans New Tai Lue', sans-serif;
  font-size: 22px;
  background-size: cover;
  background-image: url(../img/bg.png);
  background-position: center;
}
h1, h2, h3, h4, .title {
  font-family: 'Chinatown Champs', sans-serif;
}

[data-bs-theme=light] {
    color-scheme: light;
    --si-body-bg: #efefef;
}
[data-bs-theme=light] .bg-light:not(.badge), [data-bs-theme=light] .card.card-hover.bg-light {
    background-color: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(10px);
}
.nav-link:hover, .nav-link:active {
    color: #432626 !important;
}
/* BUTTONS */
button {
  font-family: 'Chinatown Champs', sans-serif !important;
}
button.button-black {
  background: white !important;
  border-color: black !important;
  color: #f40707;
  font-size: 2rem;
  padding: .25rem .5rem 0 .5rem;
  border-radius: 5px;
}
button.button-black:active {
    bottom: -6px;
    background: #FFCC00;
    border-color: black;
    color: #0041B9;
}
button.button-black i {
  color:#b90000 !important;
}
.text-red {
  color: #b90000;
}
.lead {
  color: #000;
}

.vibrate {
	-webkit-animation: vibrate-3 0.5s linear infinite both;
	        animation: vibrate-3 0.5s linear infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-3-23 18:31:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-3
 * ----------------------------------------
 */
 @-webkit-keyframes vibrate-3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}



.circle {
  height: 300px;
  width: 300px;
  border-radius: 300px;
}

/* Some basic styling */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.98);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}
#play-music-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

button {
    position: relative;
    width: auto;
    padding: .55rem 1.25rem;
    border: none;
    border: 3px solid black !important;
    border-radius: 8px;
    background: #f50404 !important;
    color: rgb(246, 255, 0);
    font-size: 1.85rem;
    font-weight: bold;
    font-family: 'Chinatown Champs', sans-serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    outline: none;
    cursor: pointer;
    transition-property: background, color;
    transition-duration: 0.2s;
    text-decoration: none;
  }
  button a {
    text-decoration: none;
    color: rgb(246, 255, 0);
    text-transform: uppercase;
    font-weight: 800;
  }
  button a:hover, button:hover {
    cursor: pointer !important;
}
  button:active {
    bottom: -6px;
    border-bottom: 5px solid #800e7c;
    background: #a17300;
    color: #ada48b;
}
button.gayfish {
  position: relative;
  width: auto;
  padding: .75rem 1.5rem;
  border: none;
  border: 3px solid black !important;
  border-radius: 0;
  background: #ffffff !important;
  color: black;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: 'Vanilla', sans-serif !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  outline: none;
  cursor: pointer;
  transition-property: background, color;
  transition-duration: 0.2s;
  text-decoration: none;
}
button.gayfish a {
  text-decoration: none;
  color: #eee;
  text-transform: uppercase;
  font-weight: 800;
}
button a:hover, button:hover {
  cursor: pointer !important;
}
button:active {
  bottom: -6px;
  border-bottom: 5px solid #800e7c;
  background: #a17300;
  color: #ada48b;
}
.nav-link:hover, .nav-link:active {
  color: #eb55e9 !important;
}

.btnlg {
  font-size: 2rem !important;
  padding: 1rem 2rem !important;
}

/* TEXT ANIMATION*/
.title {
    text-align: center;
    letter-spacing: 0.1em;
    font-size: 9rem;
    line-height: 80%;
    letter-spacing: -1px;
    color: white;
    animation: anim 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    text-shadow: 8px 10px 0px #0041B9;
    /*-webkit-animation: anim 6s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;*/
  }


/* HEROS SWITCH afro REBOUND */
.rebound {
    animation: reboundAnimation 0.5s ease-in-out;
  }
  
  @keyframes reboundAnimation {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px);
    }
    60% {
      transform: translateY(-10px);
    }
  }

/* TEXT HERO */
  
.herotitle {
    transform: translateX(-70%) rotate(-15deg);
    display: block;
    float: left;
    left: 50%;
    position: relative;
  }
  kbd {
    border-radius: 0;
    text-align: center;
    padding: 1rem;
    font-size: 1.45rem;
    background-color: #fff !important;
    color: #0041B9 !important;
    border: 3px solid black;
  }
  td span {color: #000;}

/* GENERATOR */
/* Adjust the z-index stacking order */
.afro {
    height: 420px !important;
    width: 420px !important;
}
.afro img {
    position: absolute;
  }
  .zindex-2 {
    z-index: 2;
  }
  .zindex-1 {
    z-index: 1;
  }
  .zindex-0 {
    z-index: 0;
  }
  .zindex-n1 {
    z-index: -1;
  }
  
  /* Ensure images take full height of the container */
  .afro img {
    width: auto;
    background: transparent;
  }
  /* Optional: Adjust the positioning of the images within the container */
  .afro img {
    top: 0;
    left: 0;
  }
  /* Optional: Add some spacing and border to visually differentiate the elements */
  /* Optional: Center the container in its parent */
  .afro {
    margin: 0 auto;
  }


  /* ANIMISTA */
  .roll-in-blurred-left {
    -webkit-animation: roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
            animation: roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }
  .roll-in-blurred-right {
    -webkit-animation: roll-in-blurred-right 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
            animation: roll-in-blurred-right 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }
/**
 * ----------------------------------------
 * animation roll-in-blurred-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) rotate(-720deg);
            transform: translateX(-1000px) rotate(-720deg);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes roll-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) rotate(-720deg);
            transform: translateX(-1000px) rotate(-720deg);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation roll-in-blurred-right
 * ----------------------------------------
 */
 @-webkit-keyframes roll-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) rotate(720deg);
            transform: translateX(1000px) rotate(720deg);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes roll-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) rotate(720deg);
            transform: translateX(1000px) rotate(720deg);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

/* NAV MOBILE */
.offcanvas.show .nav-item .nav-link {
  color: #00c0a3;
}
.offcanvas.show .nav-item .nav-link a:hover {
  color: #52d2ba;
}
.navbar-toggler {
  position: relative;
  width: 2.875rem;
  height: 2.25rem;
}
.navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after {
  left: 20%;
}
.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}
/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
#copiedMessage {color: #000 !important;}

/* media queries */
@media screen and (max-width: 968px) {
  .title-home {
    font-size: 8rem;
    top: 3rem !important;
  }
  .subtitle {
    font-size: 6rem !important;
    margin-top: 2rem;
    line-height: 5rem;
  }
  kbd {
    border-radius: 0;
    text-align: center;
    padding: .25rem;
    font-size: .825rem !important;
    background-color: #0041B9 !important;
    border: 3px solid black;
  }
  tr {
    display: flex;
    flex-flow: column;
    margin-bottom: 1rem;
  }
  td, th {padding: 0 !important;}
  td span {color: #0041B9;}
  th.h3 {
    font-weight: bold;
  }
}
@media screen and (max-width: 768px) {
  .afro {
    max-height: 460px !important;
    max-width: 460px !important;
  }
  .title {
    font-size: 4rem !important;
  }
}

.slide-in-br {
	-webkit-animation: slide-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
 @-webkit-keyframes slide-in-br {
  0% {
    -webkit-transform: translateY(1000px) translateX(1000px);
            transform: translateY(1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-br {
  0% {
    -webkit-transform: translateY(1000px) translateX(1000px);
            transform: translateY(1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}

.slide-in-br {
  animation: bounce 0.5s ease infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

.discoball-one,
.discoball-two {
  width: 360px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.discoball-one {
  animation: showDiscoballOne .5s linear infinite;
}

.discoball-two {
  animation: showDiscoballTwo .5s linear infinite;
}

@keyframes showDiscoballOne {
  0%, 50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes showDiscoballTwo {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}


.bg-disco {
  animation: hueLoop 2s infinite;
}

@keyframes hueLoop {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}


.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}
 @-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}