globals.css

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

:root {
  --blue: #000aff;
  --yellow: #ffe713;
  --dark: #00010f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-weight: 500;
  color: var(--dark);
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

.triangle {
  width: 0;
  height: 0;
  border-bottom: 64px var(--blue) solid;
  border-left: 78px var(--dark) solid;
  position: relative;
}

.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 0;
  height: 0;
  border-bottom: 64px var(--blue) solid;
  border-left: 78px transparent solid;
  opacity: 0.08;
  transform-origin: 0 0;
  transform: rotate(10deg);
}

@screen small-phone {
  .triangle {
    border-bottom: 96px var(--blue) solid;
    border-left: 112px var(--dark) solid;
  }

  .triangle::before {
    border-bottom: 96px var(--blue) solid;
    border-left: 112px transparent solid;
  }
}

.effect {
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark);
}