@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
   font-family: "Posterama 2001 W01 Bold";
   src: url(/fonts/posterama.woff) format('woff');
}

/* Poetsen One (for headings) */
@font-face {
  font-family: "Poetsen One";
  src: url(/fonts/poetsen-one-regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter/Inter-Regular.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter/SemiBold.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter/Inter-Bold.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
   font-family: "Poppins";
   src: url(/fonts/Poppins-Regular.ttf) format('truetype');
}

@font-face {
   font-family: "Poppins";
   font-weight: 600;
   src: url(/fonts/Poppins-SemiBold.ttf) format('truetype');
}

@font-face {
   font-family: "Poppins";
   font-weight: 900;
   src: url(/fonts/Poppins-Bold.ttf) format('truetype');
}

@font-face {
   font-family: "Marker Felt";
   src: url(/fonts/markerfelt-thin.ttf) format('truetype');
}

.ecard-button {
  font-family: "Poetsen One";
  @apply rounded-lg;
  @apply bg-blue-logo hover:bg-[#1cb1d5];
  @apply text-black font-bold border-none focus:outline-none;
  @apply px-4 py-2 md:py-3 lg:py-4;
  @apply tracking-wide;
  @apply shadow-md hover:shadow-lg;
  @apply transition-colors duration-200 ease-in-out;
  @apply transform hover:scale-105 active:translate-y-0.5 transition-transform duration-150 ease-in-out;
  @apply dark:text-white dark:bg-blue-600;
}

.ecard-button:disabled {
  @apply bg-gray-400 text-gray-700 cursor-not-allowed;
  @apply transform-none;
  @apply shadow-none hover:shadow-none;
  @apply hover:bg-gray-400;
  @apply opacity-60;
}

.secondary-button {
  font-family: "Poetsen One";
  @apply rounded-lg;
  @apply bg-white hover:bg-[#f7f5ff];
  @apply text-[#4b0082] font-bold border-2 border-[#4b0082] focus:outline-none;
  @apply px-4 py-2 md:py-3 lg:py-4;
  @apply tracking-wide;
  @apply shadow-md hover:shadow-lg;
  @apply transition-colors duration-200 ease-in-out;
  @apply transform hover:scale-105 active:translate-y-0.5 transition-transform duration-150 ease-in-out;
}

.secondary-button:disabled {
  @apply bg-gray-100 text-gray-500 border-gray-300 cursor-not-allowed;
  @apply transform-none;
  @apply shadow-none hover:shadow-none;
  @apply opacity-60;
}

.rotate-screen-vertical { 
  animation: rotate-screen-vertical 3s infinite;
}
.rotate-screen-widescreen { 
  animation: rotate-screen-widescreen 2s infinite;
}
@keyframes rotate-screen-widescreen {
  from {
    rotate: 135deg;
  }
  35% {
    rotate: 0deg; 
  }
  70% { 
   rotate: 135deg;
  }
  to {
    rotate: 135deg;
  }
}

@keyframes rotate-screen-vertical {
  from {
    rotate: 45deg;
  }
  35% {
    rotate: -90deg; 
  }
  70% { 
   rotate: 45deg;
  }
  to {
    rotate: 45deg;
  }
}

::-webkit-scrollbar {
    -webkit-overflow-scrolling: auto;
 }

.react-datepicker__day--keyboard-selected {
  background-color: #a1e2fa !important;
}

.react-datepicker__header {
   background-color: #fffee7 !important;
}

.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected {
    background-color: #26d1f9 !important;
    color: #fff
}

.react-datepicker-wrapper{
  width: 100%;
}

@font-face {
   font-family: "Posterama 2001 W01 Bold";
   src: url(/fonts/posterama.woff) format('woff'),;
}

@font-face {
   font-family: "Poppins";
   src: url(/../fonts/Poppins-Regular.ttf) format('truetype'),;
}

@font-face {
   font-family: "Poppins";
   font-weight: 600;
   src: url(/../fonts/Poppins-SemiBold.ttf) format('truetype'),;
}

@font-face {
   font-family: "Poppins";
   font-weight: 900;
   src: url(/../fonts/Poppins-Bold.ttf) format('truetype'),;
}

@font-face {
   font-family: "Marker Felt";
   src: url(/../fonts/markerfelt-thin.ttf) format('truetype'),;
}

a {
  text-decoration: none;
}

p { 
  font-family: "Inter";
  @apply tracking-tight;
}

.flex-container {
  margin-top:  10px;
  width: 80%;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.flex-container > div {
  margin: 10px;
  padding: 10px;
}

.table-container {
  margin-top:  20px;
  width: 80%;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

.sharing-text {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  box-sizing: border-box;
  outline: none;
  font-family: "PT Serif";
}

input[type=password], input[type=email], input[type=text], select {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #26d1f9;
  box-sizing: border-box;
  font-family: "PT Serif";
}

input[type=submit] {
  font-family: "Posterama 2001 W01 Bold";
  width: 80%;
  background-color: #147086;
  color: white;
  padding: 40px 12px 35px 12px;
  border: none;
  border-radius: 0.6em;
  cursor: pointer;
  box-shadow: 0 9px #1a4652;
  margin:  auto;
  letter-spacing: 0.1em;
  font-size: 1em;
}

input[type=submit]:hover:enabled {
  background-color: #fec800;
  box-shadow: 0 9px #dea800;
}

input[type=submit]:disabled {
  cursor: not-allowed;
}

input[type=submit]:active {
  background-color: #1888a2;
  box-shadow: 0 5px #1a4652;
  transform: translateY(4px);
}

.nifty_form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.admin_button {
  background-color: #4997d0 ; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
}

.admin_sidebar { 
  background-color: #4997d0 ; 
 }

.admin_h1 { 
  font-size: 30px;
  text-align: center;
 }

.craft-container { 
  background-color: #5ad6cd ; 
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.craft_tutorial_button {
  background-color: #C70A80 ; 
  cursor: pointer;
  border: none;
  color: white;
  border-radius: 12px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 10px 10px 10px;
}

.craft_tutorial_button:hover { 
   background-color: #2b5169;
 }

#admin_table {
  width: 90%;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

#admin_table td, #admin_table th {
  border: 1px solid #ddd;
  padding: 8px;
}

#admin_table tr:nth-child(even){background-color: #f2f2f2;}

#admin_table tr:hover {background-color: #ddd;}

#admin_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4997d0;
  color: white;
}

.admin_icon { 
  width: 200px;
}

.admin_url { 
  color: royalblue;
}

.admin_url:hover { 
  color: darkblue;
}

.logo-container { 
  display: block;
  padding-top: 4em;
}

.form-container { 
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.admin-form-container { 
  display: flex;
  flex-direction: row;
  padding:  .5em;
}

.omniauth-container { 
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  justify-content: center;
  align-items: center;

}

.card-div { 
  padding-top: 2em;
  padding-bottom: 1em;
  background-color: #a1e2fa;
  width: 650px;
  border-radius: 15px;
}

.form-field { 
  width: 85%;
}

.form-box { 
  display: inline-block;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  border-radius: 0.5em;
}

.form-margin {
  margin-bottom:  1em;
}

.logo-icon { 
  display: block;
  max-width:10%;
  min-width:200px;
  width: 10vmin;
  padding: 10px;
  text-align: left; 
}

.flex-center {
    align-items: center;
    text-align: center;
    margin: auto;
    width:  95%;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: auto;
    width:  100%;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

.form-field { 
  width: 520px;
}

input[type=submit] {
  width: 48%;
}

.flex-container {
  margin-top:  20px;
}

.flex-container > div {
  margin: 20px;
  padding: 20px;
}
.error-container { 
  background-color: #a1e2fa;
  padding: 1em;
}
.login-container { 
  background-color: #fffee7;
  min-height: 100vh;
  padding-top: 4em;
}
.card-title-div {
  padding-top: 1em;
  padding-bottom: 1.5em;
}

.social-media-btn {
  width: 250px;
  height: 44px;
  border-radius: 0.2em;
}
.facebook-btn { 
  background-color: #4C69BA;

}
.google-btn { 
  background-color: #4285f4;
}
.social-media-wrapper {
  position: absolute;
  margin-top: 2px;
  margin-left: 1px;
  width: 40px;
  height: 40px;
  border-radius: 2px;
}
.google-wrapper {
  background-color: #fff;

}

.facebook-wrapper {
  background-color: #4C69BA;
  border-right-width:  1px;
  border-color: #fff;
}

.social-media-icon {
  position: absolute;
  margin-top: 10px;
  margin-left: 10px;
  width: 18px;
  height: 18px;
}
.btn-text {
  margin-left: 55px;
  color:#fff;
  font-size: 20px;
  letter-spacing: 0.2px;
  font-family: "Roboto";
  line-height: 40px;
}

.social-media-btn:hover {
  box-shadow: 0 0 6px #4C69BA;
}

.heading1-text { 
  font-family: "Posterama 2001 W01 Bold";
  font-size: 4em;
  letter-spacing: 0.05em;
}
.heading2-text { 
  font-family: "Posterama 2001 W01 Bold";
  font-size: 3em;
}

.heading3-text { 
  font-family: "Posterama 2001 W01 Bold";
  font-size: 2.5em;
}

.action_button {
  width: 200px;
  background-color: #C70A80;
  color: white;
  padding: 24px 8px 12px 8px;
  border: none;
  border-radius: 0.6em;
  cursor: pointer;
  box-shadow: 0 9px #ac076e;
  margin:  auto;
  letter-spacing: 0.1em;
  font-size: 1em;
  text-decoration:none; 
}

.action_button:hover:enabled {
  background-color: #cc3694;
}

.action_button:disabled {
  cursor: not-allowed;
}

.action_button:active {
  background-color: #f181c0;
  box-shadow: 0 5px #9d0765;
  transform: translateY(4px);
}

/* tablet */ 
@media only screen and (min-width:601px) and (max-width: 1000px) {
  .heading1-text { 
    font-family: "Posterama 2001 W01 Bold";
    font-size: 3em;
    letter-spacing: 0.03em;
  }
  .heading2-text { 
    font-family: "Posterama 2001 W01 Bold";
    font-size:2.5em;
  }

  .heading3-text { 
    font-family: "Posterama 2001 W01 Bold";
    font-size: 2em;
  }
  .login-container { 
    padding-top: 2em;
  }
  .card-div { 
    width: 90%;
  }
}

@keyframes fall {
  0% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.confetti-piece {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background-color: red; /* or vary with JS */
  opacity: 0;
  animation: fall 5s linear infinite;
  animation-delay: calc(var(--delay, 0s));
}

/* mobile */
@media only screen and (max-width: 600px) {
  .card-title-div {
    padding-top: 0;
    padding-bottom: 0
  }
  .social-media-btn {
    width: 250px;
    height: 40px;
    border-radius: 0.2em;
  }
  .social-media-wrapper {
    position: absolute;
    margin-top: 0.5px;
    width: 40px;
    height: 38px;
    border-radius: 2px;
  }

  .form-field { 
    width: 90%;
  }
  .form-margin {
    margin-bottom:  0em;
  }
  .card-div { 
    width: 95%;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .omniauth-container{ 
    flex-direction: column;
  }
  .login-container { 
    padding-top: 0em;
  }

  .btn-text {
    margin-left: 55px;
    color:#fff;
    font-size: 18px;
    letter-spacing: 0.2px;
    font-family: "Roboto";
    line-height: 36px;
  }

  input[type=text], input[type=password], input[type=email],select {
    padding: 8px 5px;
    margin: 4px 0;
    display: inline-block;
    line-height: 1;

  }
  input[type=submit] {
    width: 90%;
    padding: 24px 8px 12px 8px;
  }
  .heading1-text { 
    font-family: "Posterama 2001 W01 Bold";
    font-size: 2.5em;
    letter-spacing: 0.02em;
  }

  .heading2-text { 
    font-family: "Posterama 2001 W01 Bold";
    font-size: 1.8em;
  }

  .heading3-text { 
    font-family: "Posterama 2001 W01 Bold";
    font-size: 1.5em;
  }
  .action_button {
    width: 75%;
  }
}

@media print {
  .print-logo { 
    width: 25%;
  }
  .print-hide {
    display: none !important;
  }
  .print-div { 
    @apply px-8;
  }
}