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

@layer utilities {
  .bg-navy {
    background-color: #0b1d3a; /* or your custom navy */
  }

  .text-navy {
    color: #0b1d3a;
  }
}

body {
    font-family: 'Permanent Marker', cursive;
    background-color: #9CB0FF;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #2c3e50;
    font-family: 'Permanent Marker', cursive
}

h2.bg-kanji {
  font-family: 'Yuji Boku', cursive;
}

p {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    color: #FF9198;
}

.roboto {
  font-family: 'Roboto Condensed', sans-serif;
}

/* Font image in Home page */
.hero {
  background-image: url('/static/images/front-img.jpg');
  background-size: cover;
  background-position: center;
}

/* Font image in About page */
.hero-about {
    background-image: url('/static/images/karate/sb23.JPG');
    background-size: cover;
    background-position: center;
}

.hero-side {
    background-image: url('/static/images/Shorinryu.jpg');
    background-size: cover;
    background-position: right;
}

.hero-nkk {
    background-image: url('/static/images/logo2.jpg');
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
}