@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900');
@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 0, 0, 0;
  --background-end-rgb: 0, 0, 0;
}


body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

/* Custom styles that are just must more simple to do this here then with tailwind */
.radial-gradient-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  mask-image: radial-gradient(ellipse at center, black 1%, transparent 80%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45'%3E%3Cdefs%3E%3CradialGradient cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:black; stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:black; stop-opacity:0' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23fadeGradient)' /%3E%3Cpath d='M0 22.5 h45' stroke='gray' stroke-opacity='0.3' stroke-width='1' /%3E%3Cpath d='M22.5 0 v45' stroke='gray' stroke-opacity='0.3' stroke-width='1' /%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.text-logo {
  font-weight: 100;
  @media (min-width: 640px) {
    font-size: 5rem;
  }
  font-family: "Cinzel", serif;
  position: relative;
  z-index: 20;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: transparent;
  background-image: linear-gradient(to bottom, #fafafa, #aab83a);
  padding: 2rem;
  filter: drop-shadow(2px 80px 40px rgba(255, 255, 255, 0.30));
}


.icon {
  margin-left: 0.25rem;
  transform: translateY(25%);
  width: 15px;
  height: 15px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewbox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.14645%203.14645C8.34171%202.95118%208.65829%202.95118%208.85355%203.14645L12.8536%207.14645C13.0488%207.34171%2013.0488%207.65829%2012.8536%207.85355L8.85355%2011.8536C8.65829%2012.0488%208.34171%2012.0488%208.14645%2011.8536C7.95118%2011.6583%207.95118%2011.3417%208.14645%2011.1464L11.2929%208H2.5C2.22386%208%202%207.77614%202%207.5C2%207.22386%202.22386%207%202.5%207H11.2929L8.14645%203.85355C7.95118%203.65829%207.95118%203.34171%208.14645%203.14645Z%22%20fill%3D%22lightgray%22%20fillrule%3D%22evenodd%22%20cliprule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}