@font-face {
    font-family: "Amatic-Bold";
    src: url("../font/Amatic-Bold.ttf");
}

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

@font-face {
    font-family: "KozGoPr6N-Regular";
    src: url("../font/KozGoPr6N-Regular.otf");
}

@font-face {
    font-family: "Lato-Black";
    src: url("../font/Lato-Black.ttf");
}

@font-face {
    font-family: "Lato-Bold";
    src: url("../font//Lato-Bold.ttf");
}

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

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

@font-face {
    font-family: "Frastha-Light";
    src: url("../font/Frastha-Light.otf");
}

@font-face {
    font-family: "Sumptuous_Light";
    src: url("../font/Sumptuous-Light.otf");
}

.amatic-bold {
    font-family: "Amatic-Bold";
}

.homemadeApple-regular {
    font-family: "HomemadeApple-Regular";
}

.kozGoPr6N-regular {
    font-family: "KozGoPr6N-Regular";
}

.lato-black {
    font-family: "Lato-Black";
}

.lato-bold {
    font-family: "Lato-Bold";
}

.lato-regular {
    font-family: "Lato-Regular";
}

.poppins-regular {
    font-family: "Poppins-Regular";
}

.frastha-light {
    font-family: "Frastha-Light";
}

.sumptuous-light {
    font-family: "Sumptuous_Light";
}

.font-serif {
    font-family: serif;
}

.filter-white {
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(236deg) brightness(103%) contrast(101%);
}

.filter-brown {
    filter: invert(39%) sepia(38%) saturate(6185%) hue-rotate(343deg) brightness(101%) contrast(66%);
}

.custom-border {
    border-right-style: dotted !important;
    border-bottom-style: solid;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #d97369;
    margin: 0 auto;
}

.text-shadow {
    text-shadow: 
        2px   0  0   #000, 
        -2px   0  0   #000, 
        0    2px 0   #000, 
        0   -2px 0   #000, 
        1px  1px 0   #000, 
        -1px -1px 0   #000, 
        1px -1px 0   #000, 
        -1px  1px 0   #000,
        1px  1px 5px #000;
}

@media only screen and (max-width: 550px) {
    .justify-distribute {
        text-align: justify;
        text-justify: distribute;
    }
}