@import "./font.css";
@import "./pages/home.css";
@import "./pages/about.css";
@import "./pages/service.css";
@import "./pages/servicedetail.css";
@import "./pages/contact.css";
@import "./pages/booking.css";
@import "./pages/mention.css";
@import "./component/card.css";
@import "./component/button.css";
@import "./component/navigation.css";
@import "./component/footer.css";

:root{
    --green: #6F8262;
    --orange: #C66548;
    --black: #262626;

    --font-title: 'Metropolis-bold';
    --font-subtitle: 'Zen';
    --font-button: 'Zen';
    --main-font: 'Karu';
    --quote-font: 'Bodoni';

    --padding-main: 50px 100px 50px 100px;
    --padding-main-mobile: 30px;
    --radius: 10px;
}


*{
    font-family: var(--main-font);
}

body{
    overflow-x: hidden !important; 
}

h1{
    font-family: 'Moontime';
    font-size: 4em !important;
}

.logo{
    font-family: 'Moontime';
}

h2{
    text-transform: uppercase !important;
    font-size: 1em !important;
    font-family: var(--font-title);
}

h3{
    font-family: var(--font-subtitle);
    text-transform: uppercase;
}

.quote{
    font-family: var(--quote-font);
    font-size: 1.2em;
    width: 70%;
}

.padding-main{
    padding: var(--padding-main);
}



/* hiden arrow on input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}







@media screen and (max-width: 800px) {
    .block-body{
        padding-top: 10vh;
    }
    h1 {font-size: 3em !important;}
    h2{font-size: 1em !important;}
    p{font-size: .9em;}
    .padding-main{
        padding: var(--padding-main-mobile);
    }
}



/*apparition*/
.apparition{
    opacity: 0;
    transform: translateY(20px);
}

.anim-apparition{
    animation: animApparition .2s ease-in;
    opacity: 1;
    transform: translateY(0px);
}

    @keyframes animApparition{
        from{
            opacity: 0;
            transform: translateY(20px);
        }
        to{
            opacity: 1;
            transform: translateY(0px);
        }
    }