/*-----------------*/
/*     general     */
/*-----------------*/
.zindex {
    position: relative;
    z-index: 2;
}


body {
    margin: 0;
    cursor: url('/assets/icons/cursor.png'), auto;


}
.cursor {
    cursor: url('/assets/icons/cursor.png'), auto !important;
}
a {
    cursor: url('/assets/icons/cursor.png'), auto !important;
}
a:hover {
    cursor: url('/assets/icons/cursor.png'), auto !important;
}
 html body {
     max-height: 100vh;


 }
.container {
    padding-right: 9rem;

}

.w100 {
    width: 100%;
}
.MuiButtonBase-root{
    cursor: url('/assets/icons/cursor.png'), auto !important;
}

.containerheight {
    max-height: 80vh;
}


/*-----------------*/
/*     fonts     */
/*-----------------*/
@font-face {
    font-family: 'bodyfont';
    src: url("/assets/fonts/body.ttf");
}
@font-face {
    font-family: 'title';
    src: url("/assets/fonts/titles.ttf");
}

@font-face {
    font-family: 'typewriter';
    src: url("/assets/fonts/typewriter.ttf");
}

@font-face {
    font-family: 'signature';
    src: url("/assets/fonts/signature.otf");
}

.bodyfont {
    font-family: bodyfont !important;
}

.typewriter {
    font-family: typewriter !important;
}

.title {
    font-family: title !important;
}

.signature {
    font-family: signature !important;
    font-size: 4rem !important;
}


.titleFS {
    font-size: 3rem !important;
}
.subtitleFS {
    font-size: 1.9rem !important;
}
.menuitemFS {
    font-size: 1.3rem !important;
}

.bodyFS {
    font-size: 1.1rem !important;
}

.bodyFS--lineheight {
    line-height:1.9rem !important;
}


.bodyfont--bold {
    font-weight: bold;
}





/*-----------------*/
/*     colors     */
/*-----------------*/

.clrone {
    background-color: #252525;
}

.clrtwo {
    background-color: rgb(15 23 42);
}


.clrthreetext {
    color: #ffff !important;
}


.clrfourtext {
    color: #cecbcb !important;
}
.clrfivetext {
    color: #bababa !important;
}

.clrsix {
    background-color: rgb(94 234 212) !important;
}


.clrsixtext {
  color: rgb(94 234 212);
}

.clrseven {
    background-color: rgb(45 212 191 / 10%) !important;
}





/*-----------------*/
/*     animations  */
/*-----------------*/

@keyframes increasefs {
    0% {
        font-size: 1rem;
    }
    50% {
        font-size:1.2rem;
    }
    100% {
        font-size: 1rem;
    }
}
.hearteffect {

    animation: increasefs infinite 1.1s;
}


.menuindicator>.indicator {
    border-bottom: 0.1rem solid white;
    width: 1rem;
    transition: width 0.3s ease-in-out;

}



.menuindicator:hover {
    .indicator {
        width:5rem;



    }

}

.iconhover:hover {
    color: rgb(94 234 212) !important ;
    transition: 0.3s;
    cursor: url('/assets/icons/cursor.png'), auto !important;
}



/*-----------------*/
/*     some borders */
/*-----------------*/


.borderbotwhite {
    border-bottom: 0.1rem dotted #717070;
}

.card {
    border-radius: 1rem;
}
.card:hover {
    background-color:rgb(45 212 191 / 10%) ;

    transition:  0.2s ease-in;
}


/*-----------------*/
/*     scrolls  */
/*-----------------*/

/* Define the scrollbar for all elements */
::-webkit-scrollbar {
    width: 0.3rem; /* Width of the scrollbar track */
    height: 0.1rem; /* Height of the scrollbar thumb */
    z-index: 20 !important;

}
/* Define the scrollbar track */
::-webkit-scrollbar-track {
    background-color: rgba(245, 245, 245, 0); /* Background color of the scrollbar track */
    border-radius: 0.3rem; /* Border radius of the scrollbar track */
    z-index: 20 !important;

}

/* Define the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: rgb(94 234 212); /* Background color of the scrollbar thumb */
    border-radius: 0.3rem; /* Border radius of the scrollbar thumb */
    z-index: 20 !important;
}
/*----------------------------------------------------------*/
/*                        Images                        */
/*----------------------------------------------------------*/

.cardimage {
    max-width: 9rem;
}




/*----------------------------------------------------------*/
/*                        Responsive                        */
/*----------------------------------------------------------*/


/*mobiles*/
@media screen and (max-width: 500px) {
    .container {
        padding-right: 0;

    }

    .card {
        background-color:rgb(45 212 191 / 10%) ;
        margin-bottom: 2rem !important;

    }

    .subtitleFS {
        font-size: 1.3rem !important;
    }

    .containerheight {
        max-height: 65vh;
    }

    .hide-mobile {
        display: none;
    }

}