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

@font-face {
    font-family: "Honoka Shin Micho";
    src: url("../fonts/font_1_honokamin.ttf");
}

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

@font-face {
    font-family: "Cormorant";
    src: url("../fonts/Cormorant_Garamond/CormorantGaramond-Light.ttf");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Notosans";
    src: url("../fonts/Notosans/NotoSansJP-VariableFont_wght.ttf");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Notosans-Bold";
    src: url("../fonts/Notosans/NotoSansJP-Bold.ttf");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "Notosans-Medium";
    src: url("../fonts/Notosans/NotoSansJP-Medium.ttf");
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: "Rexton";
    src: url("../fonts/Rexton/Rexton\ Regular.otf");
    font-style: normal;
    font-weight: normal;
}

:root {
    --nav-height: 90px;
    --sp-nav-height: 60px;
    --brown: #8D6936;
    --grey: #f3f3f3;
    --light-yellow: rgb(243,230,215);
    --bar-width: 30px;
    --bar-height: 3px;
    --hamburger-gap: 6px;
    --fore-ground: #333;
    --ham-margin: 5px;
    --animation-timing: 350ms ease-in-out;
    --hamburger-height: calc( var(--bar-height) * 3 + var(--hamburger-gap) * 2 );
    --red-button: rgb(231, 12, 26);
    --red-border: rgb(195, 7, 23);
    --olive: rgb(238, 238, 233);
    --grey-title: #808080;
    --main-grey: #3c3c3c;
}

.font-honoka {
    font-family: "Honoka Shin Micho";
}

.font-popin {
    font-family: "Popin Regular";
}

.font-cormorant {
    font-family: "Cormorant";
}

.font-noto {
    font-family: "Notosans";
}

.font-noto-bold {
    font-family: "Notosans-Bold";
}

.font-noto-medium {
    font-family: "Notosans-Medium";
}

.font-rexton {
    font-family: "Rexton";
}

.heading-gradient {
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    background-clip: text;
    color: transparent;
}