@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');
@import url("variables.css");
@import url("animations.css");
@import url("responsive.css");
@import url("navbar.css");
@import url("hero.css");
@import url("./about.css");
@import url("./skills.css");
@import url("experience.css");
@import url("projects.css");
@import url("contact.css");
@import url("loader.css");
@import url("transition.css");
@import url("contact-modal.css");
@import url("notification.css");
@import url("footer.css");


body.loading {

    overflow: hidden;

}

body.loading main,
body.loading header,
body.loading section {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.19,1,.22,1);

}

body.loaded main,
body.loaded header,
body.loaded section {

    opacity: 1;

    transform: translateY(0);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);
    color:var(--white);

    font-family:var(--body);

    overflow-x:hidden;

    min-height:100vh;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button{

    border:none;

    background:none;

    cursor: none;

    font-family:inherit;
}

.container{

    width:min(80%, var(--container));

    margin:0 auto;

}
body.menu-open{

    overflow:hidden;
}

/* ==========================
        CUSTOM CURSOR
========================== */

body{
    cursor:none;
}

.cursor-outline{

    position:fixed;

    width:34px;
    height:34px;

    border:2px solid white;

    border-radius:50%;

    pointer-events:none;

    left:0;
    top:0;

    transform:translate(-50%,-50%) scale(1);

    z-index:9999;

    mix-blend-mode:difference;

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        width .28s cubic-bezier(.22,1,.36,1),
        height .28s cubic-bezier(.22,1,.36,1),
        border-color .25s,
        background-color .25s;

    will-change:transform;

}
.cursor-outline.cursor-hover{

    transform:translate(-50%,-50%) scale(1.8);

}

.cursor-dot{

    position:fixed;

    width:8px;
    height:8px;

    background:white;

    border-radius:50%;

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:10000;

    mix-blend-mode:difference;

}

/*==================================
        APP INITIAL STATE
==================================*/

#app{

    opacity:0;

    transform:translateY(60px) scale(.98);

    filter:blur(12px);

    transition:

        opacity 1.2s ease,

        transform 1.2s cubic-bezier(.19,1,.22,1),

        filter 1.2s ease;

}

body.loaded #app{

    opacity:1;

    transform:translateY(0) scale(1);

    filter:blur(0);

}