@import url("./src/css/output.css");
@import url("./src/css/templates.css");

.font-micro-5 {
  font-family: "Micro 5", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-silkscreen {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow-wrap: anywhere;
}

.font-pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

@keyframes dropInEffect {
    0% {
        opacity: 0;
        transform: translateY(-70px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-hidden {
    opacity: 0;
    transform: translateY(-70px);
    visibility: hidden;
    transition: all 0.6s ease;
}

.card-visible {
    visibility: visible;
    animation: dropInEffect 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.title {
  background: linear-gradient(#3b82f6 0%, #a855f7 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

option {
    border-color: white;
    background-color: oklch(20.5% 0 0);
}

.text-very-strong {
    text-shadow:
        1px  0px 0px #000, 
       -1px  0px 0px #000, 
        0px  1px 0px #000, 
        0px -1px 0px #000,
        1px  1px 0px #000, 
       -1px -1px 0px #000, 
        1px -1px 0px #000, 
       -1px  1px 0px #000,
        0px  0px 5px #000;
}

.text-ultra-strong {
    text-shadow:
        2px  0px 0px #000, 
       -2px  0px 0px #000, 
        0px  2px 0px #000, 
        0px -2px 0px #000,
        2px  2px 0px #000, 
       -2px -2px 0px #000, 
        2px -2px 0px #000, 
       -2px  2px 0px #000,
        0px  0px 5px #000;
}