/* fonts */
@font-face {
    font-family: Cascadia Code;
    src: url(../fonts/CascadiaCode.ttf);

}

@font-face {
    font-family: Victor Mono;
    src: url(../fonts/VictorMono.ttf);
    src: url(../fonts/VictorMono-Bold.ttf);
}

/* ===== color palette  global =========== */
:root {
    --main-bg-color: hsl(0, 0%, 90%);
    --primary-color: #EF5350;
    --text-color: hsla(300, 4%, 5%, 0.802);
    --font-code: "Cascadia Code";
    --font-code-victor: "Victor Mono";
    --card-bg-color: hsl(0, 0%, 90%);
    --card-border-color: hsl(0, 12%, 80%);
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--font-code-victor);
    background-color: var(--main-bg-color);
    color: var(--text-color);
    transition: .3s ease all;
}

body.dark {
    --text-color: hsl(0, 0%, 83%);
    --main-bg-color: hsl(0, 0%, 15%);
    --card-bg-color: #373a3c;
}

body.dark nav {
    /* background-color: var(--main-bg-color); */
    backdrop-filter: blur(1.5rem) !important;
}

body.dark .toggle-theme__icon {
    filter: invert(100%) !important;
}


body.dark .nav-link {
    color: var(--text-color) !important;
}

/* HEADINGS */
h2 {
    font-family: "Poller One", serif;
}

body.dark div.card {
    border-bottom: 2px solid var(--primary-color);
    color: var(--text-color) !important;
    transition-property: transform, box-shadow;
    transition-duration: .3s, .5s;
    transition-timing-function: ease-in-out, ease-out;
}



body.dark .card-footer a:hover {
    border: 1px solid var(--text-color) !important;
    background: var(--primary-color) !important;
    color: var(--text-color) !important;
}


body.dark section .container,
body.dark section #about .row:nth-child(1) {
    color: var(--text-color) !important;
    background: var(--card-bg-color) !important;
}

body.dark .accordion-item button {
    background: var(--card-bg-color);
}

/* CARD */
.card-bg-pic {
    height: 280px;
    width: 100%;
    background: var(--pic-dark);
}


.card {
    background-color: var(--card-bg-color) !important;
    border: 1px solid var(--card-border-color) !important;
    transition-property: transform, box-shadow;
    transition-duration: .3s, .5s;
    transition-timing-function: ease-in-out, ease-out;
}

.card:hover {
    border: 1px solid rgba(16, 170, 11, 0.907) !important;
    box-shadow: 3px 5px 13px rgba(75, 242, 69, 0.907) !important;
    /* box-shadow: 3px 5px 13px var(--primary-color) !important; */

}


/* Nav */

nav.move {
    font-family: var(--font-code-victor);
    text-transform: uppercase;
    backdrop-filter: blur(1.5rem);
}

nav.move #toggle-icon {
    transform: scale(2) !important;
}


.nav-link {
    color: #fff;
}

.switches {
    margin-left: 8%;
}

.toggle-theme {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.toggle-theme__icon {
    margin-right: 0.5rem;
    width: 25px;
    transition: transform .2s ease-in;
}

.toggle-theme__text {
    margin: auto;
    font-size: 1rem;
}

.nav-item {
    transition: all .4s ease-in-out;
    font-size: var(--font-code-victor) !important;
    font-weight: bolder !important;
    color: var(--primary-color) !important;
    text-transform: uppercase;
}



.nav-item:hover {
    background: var(--primary-color);
}

.nav-link:hover {
    color: var(--text-color);
}



/* section hero */
#hero-section {
    width: 100%;
    height: auto;
}

.carousel {
    position: relative;
}

.btn-group-vertical {
    position: absolute;
    left: 4%;
    top: 15%;
    z-index: 2;
    filter: drop-shadow(2px 2px 6px #000);
    border-radius: 7px;
    padding: 0 !important;
    font-family: var(--font-code-victor);
    text-align: left;
    font-weight: bolder;
}

.btn-group-vertical button,
.btn-group-vertical a {
    background: var(--primary-color);
}


/* About */
#about {
    width: 100%;
}

.coding,
.coding-typed {
    font-family: "Cascadia code";
    font-style: normal !important;
}

/* Works */

#works .logo {
    filter: drop-shadow(2px 8px 6px #000);
}

#works .logo:hover {
    will-change: transform, filter;
    animation: movelogo 1s infinite alternate;
}

#works .accordion-item:hover>h2 button {
    background-color: var(--primary-color) !important;
    color: var(--main-bg-color);
}

@keyframes movelogo {
    0% {
        transform: translate(0);
    }

    100% {
        transform: scale(1.08);
    }
}

#works .card .card-body {
    font-family: var(--font-code);
    background-color: var(--main-bg-color);
    overflow: hidden;
}

#works h2 {
    font-family: var(--font-code);
    text-transform: uppercase;
}

.accordion-item {
    background-color: var(--main-bg-color);
    color: var(--text-color);
    font-family: var(--font-code);
}

.accordion-item button {
    border: 1px solid var(--text-color) !important;
    color: var(--text-color);

}

.accordion-item button:hover {
    border: 1px solid var(--text-color) !important;
    color: var(--text-color);
}

.accordion-header button i {
    float: right;
}

.card-footer {
    background-color: var(--main-bg-color);
    font-family: var(--font-code);
    border-top: 1px solid var(--text-color);
}

.card-footer a {
    border: 1px solid var(--text-color) !important;
    color: var(--text-color);
    transition: all .3s ease-in-out;
}

.card-footer a:hover {
    border: 1px solid var(--text-color) !important;
    background: #ccc;
    color: #373a3c;
}

.accordion-header button {
    background: #cca;
}

/* Skills and software */

#skill-software .logo {
    filter: drop-shadow(2px 8px 6px #000);
    transition: transform .5s;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;
    cursor: pointer;
}

#skill-software .logo:hover {
    will-change: transform, filter;
    filter: drop-shadow(4px 2px 10px var(--primary-color));
    transform: scale(1.4);
}


/* hover and transitions */
@media(hover:hover) {
    .hover-light:hover {
        color: #fff !important;
    }

    body.dark div.card:hover,
    body.dark article.card:hover {
        visibility: visible;
        border-bottom: 2px solid var(--primary-color);
        background: #373a3c !important;
        color: var(--primary-color) !important;
        border: 1.2px solid var(--primary-color) !important;
        box-shadow: 3px 5px 13px var(--primary-color) !important;
    }

}

/* media querie */
@media only screen and (max-width: 680px) {

    body {
        background-color: var(--main-bg-color);
    }

    .carousel {
        visibility: hidden;
    }

    .navbar-brand {
        display: none;
        visibility: hidden;
    }

    .navbar-toggler-icon {
        /* background-image: url(../img/logo_sin_bg.png) !important; */
    }

    #hero-section {
        --opacity-bg: 0.1;
        background-image: linear-gradient(rgba(0, 0, 0, var(--opacity-bg)), rgba(0, 0, 0, var(--opacity-bg))), url("../img/gif/02.gif");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
        max-width: 100vw;
        min-height: 100vh;
        background-position: center center;
        border-bottom: 2px solid #fa0;
    }

    /* About */
    .coding-typed {
        font-style: normal;
        font-size: 1.2rem;
    }

}