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

/* ===================================================================
 * fonts.scss
 *
 * ------------------------------------------------------------------- */

/*
 * domine
================================================================================ */
@font-face {
  font-family: "domine-regular";
  src:
    url("../fonts/domine/domine-regular-webfont.woff2") format("woff2"),
    url("../fonts/domine/domine-regular-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "domine-bold";
  src:
    url("../fonts/domine/domine-bold-webfont.woff2") format("woff2"),
    url("../fonts/domine/domine-bold-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

/*
 * metropolis
================================================================================ */
@font-face {
  font-family: "metropolis-bold";
  src:
    url("../fonts/metropolis/metropolis-bold-webfont.woff2") format("woff2"),
    url("../fonts/metropolis/metropolis-bold-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "metropolis-semibold";
  src:
    url("../fonts/metropolis/metropolis-semibold-webfont.woff2") format("woff2"),
    url("../fonts/metropolis/metropolis-semibold-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "metropolis-medium";
  src:
    url("../fonts/metropolis/metropolis-medium-webfont.woff2") format("woff2"),
    url("../fonts/metropolis/metropolis-medium-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "metropolis-regular";
  src:
    url("../fonts/metropolis/metropolis-regular-webfont.woff2") format("woff2"),
    url("../fonts/metropolis/metropolis-regular-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "metropolis-light";
  src:
    url("../fonts/metropolis/metropolis-light-webfont.woff2") format("woff2"),
    url("../fonts/metropolis/metropolis-light-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "metropolis-extralight";
  src:
    url("../fonts/metropolis/metropolis-extralight-webfont.woff2")
      format("woff2"),
    url("../fonts/metropolis/metropolis-extralight-webfont.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "metropolis-italic";
  src:
    url("../fonts/metropolis/metropolis-regularitalic-webfont.woff2")
      format("woff2"),
    url("../fonts/metropolis/metropolis-regularitalic-webfont.woff")
      format("woff");
  font-style: normal;
  font-weight: normal;
}

/*# sourceMappingURL=fonts.css.map */

body,
html,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #06051f; /* Tailwind gray-900 */
  font-family: "metropolis-regular", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "domine-regular", serif;
}
body {
  touch-action: none;
}

#app {
  font-family: "Montserrat", serif;
}

/* Keep text-shadow as it's not a default tailwind utility */
h1,
h2,
h3,
p,
a {
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  user-select: none;
}

#canvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.predict-btn-wrapper {
  padding: 1px;
  border-radius: 50px;
  display: inline-flex;
  box-shadow: 0px 3px 0px 0px rgba(189, 112, 5, 1);
  outline: 2px solid #fed7aa;
  outline-offset: -1px;
  cursor: pointer;
}
.predict-btn {
  height: 46px;
  padding: 8px 40px;
  border-radius: 50px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(to bottom, #fed7aa, #fbbf24);
  box-shadow:
    inset 0px 5px 10px rgba(255, 255, 255, 0.5),
    inset 0px 2px 2px rgba(189, 112, 5, 1);
  transition:
    background 0.3s ease,
    transform 0.2s ease;
}
.predict-btn-text {
  font-size: 16px;
  font-weight: 500;
  color: #020617;
}
.predict-btn-wrapper:hover {
  outline: 2px solid #f0abfc;
  box-shadow: 0px 3px 0px 0px rgba(88, 28, 135, 1);
}
.predict-btn-wrapper:hover .predict-btn {
  background: linear-gradient(180deg, #ff9df8 0%, #2a22eb 100%);
  box-shadow:
    inset 0px 5px 10px rgba(255, 255, 255, 0.4),
    inset 0px 2px 2px rgba(42, 34, 235, 0.8);
}
.predict-btn-wrapper:hover .predict-btn-text {
  color: #ffffff;
}