@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Nova+Mono&display=swap');

@import 'skills_info.css';
@import 'skills_info-barchart.css';
@import 'skills_info-header.css';
@import 'skills_info-skills.css';



#skills {
    --bgColor: rgb(9, 52, 75);

    --barUnfilledBG: rgba(0, 0, 0, 0.164);
    /* Holo */
    --holoGlow: rgba(0, 255, 255, 0.623);
    --holoBar-light: rgb(0, 255, 255);
    --holoBar-dark: rgba(0, 255, 221, 0.616);
    --fontColor-holo: rgb(0, 255, 242);
    --fontColor-holo-dark: rgba(0, 255, 234, 0.404);
    --holoDark: rgba(0, 124, 128, 0.171);


    --holoStripe-light: rgba(0, 196, 137, 0.247);
    --holoStripe-dark: rgba(0, 196, 137, 0.171);

    --holoStripes: repeating-linear-gradient(
        45deg,
        var(--holoStripe-light),
        var(--holoStripe-light) 1rem,
        var(--holoStripe-dark) 1rem,
        var(--holoStripe-dark) 2rem

      );

    /* Real */
    --bg: rgba(255, 255, 255, 0.048);
    --bg-card: rgba(255, 255, 255, 0.89);
    --bg-card-dark: rgb(0, 21, 41);
    --bg-card-dark-hover: rgb(0, 28, 54);

    --fontColor-light: rgb(245, 245, 245);
    --fontColor-dark: rgb(32, 32, 32);
    --shadow: rgba(0, 0, 0, 0.233);
    --shadow-dark: rgba(0, 0, 0, 0.541);
    --shadow-light: rgba(0, 255, 221, 0.356);

    --delay: 200ms;
    --delay2x: calc(var(--delay) * 2);

    --delayBar: calc(var(--delay) * 4);


}

.blueGreen {
    --barColor1: rgb(32, 118, 255);
    --barColor2: rgb(0, 255, 179);
    --barGradient: linear-gradient(90deg, var(--barColor1), var(--barColor2));
}

.yellowPink {
    --barColor1: rgb(255, 65, 138);
    --barColor2: rgb(67, 139, 255);
    --barGradient: linear-gradient(90deg, var(--barColor1), var(--barColor2));
}

.purpleBlue {
    /* --barColor1: rgb(146, 51, 255); */
    /* --barColor2: rgb(45, 195, 255); */

    --barColor1: rgb(255, 196, 0);
    --barColor2: rgb(255, 61, 103);

    --barGradient: linear-gradient(90deg, var(--barColor1), var(--barColor2));
}

.skill-wrapper {
    gap: 0;
    height: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
    'interface';

}


.skillDisplay_interface {
    height: 100%;
    grid-area: interface;

    display: flex;
    flex-flow: row nowrap;
    overflow: hidden;

}



.interface-intro {
    flex: 0 0 30%;
    display: grid;

    grid-template-rows: 5rem 25% auto;
    grid-template-areas:
    "back"
    "title"
    "list";
    will-change: transform;

    height: 100%;
    transition: transform 1000ms ease;


}



.intro_title,
.intro_list,
.interface-info {
    padding: 1vw;
    display: grid;
}

.intro_title {
    grid-area: title;
    grid-template-rows: 1fr 1fr;
    align-items: center;
}

.intro_title-title-wrapper {
    display: grid;
    gap: 1vw;
}

.intro_title-title-wrapper h2 {
    font-size: 3rem;
    font-weight: 600;
}

.intro_title-title-wrapper h1  {
    font-size: 1.4rem;
    font-weight: 400;
}


.intro_list {
    width: 100%;
    /* max-width: 500px; */
    height: 100%;
    grid-area: list;
    transition: transform 2000ms linear;
}

.interface-info {
    flex: 1 1 100%;
    height: 100%;
    width: 100%;

    transition: transform 1000ms ease;

    display: grid;
    /* overflow-y: scroll; */

}


.skillDisplay_back {
    grid-area: back;
    height: 100%;
    width: 100%;
    display: grid;
}

.skillDisplay_back button {
    height: 5rem;
    width: 5rem;
    opacity: 0.7;
    cursor: pointer;
}

.skillDisplay_back button:hover {
    opacity: 1;
}

.skillDisplay_back button:active {
    transform: scale(0.9);
}

.skillDisplay_back svg {
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 800px) {
    .skill-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .skillDisplay_interface {
        max-height: 85vh;

        flex-flow: row nowrap;
    }

    .interface-intro {
        flex: 0 0 100%;
        height: 100%;
        width: 100%;
    }

    .interface-info {
        flex: 0 0 100%;
        overflow-y: scroll;

    }

}

.skills-list {
    height: 100%;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    gap: 2rem;


}

.sl-item-wrapper {

    position: relative;
    background: var(--bg-card-dark);
    border-radius: 0.2rem 1.5rem;
    transition:
        transform var(--delay) ease-out,
        background var(--delay) ease-out,
        color var(--delay) ease-out;
}

.sl-item-wrapper:hover {
    background: var(--bg-card-dark-hover);
    transform: translate3d(0.6rem, -0.6rem, 0);
}


.sl-item {
    /* flex: 0 1 5rem; */

    width: 100%;
    height: 100%;
    max-height: 8rem;
    color: var(--fontColor-light);
    background: transparent;
    background: var(--bg-card-dark);

    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "title"
        "xp";
    padding: 1.2rem;
    gap: 1rem;
    border-radius: 0.2rem 1.5rem;

    cursor: pointer;
    user-select: none;

    transition:
    transform var(--delay) ease-out,
    background var(--delay) ease-out,
    color var(--delay) ease-out;
}


.sl-item-wrapper-active,
.sl-item-wrapper-active .sl-item,
.sl-item-wrapper-active:hover { 
    background: var(--bg-card);
}


.sl-item-wrapper-active .sl-item_title h1 {
    color: var(--fontColor-dark);
    text-shadow: -0.7rem 0.7rem 0.5rem var(--shadow);

}

.sl-item-wrapper:hover .xp-bar_fill,
.sl-item-wrapper .sl-item:focus .xp-bar_fill,
.sl-item-wrapper-active .xp-bar_outline {
    background: var(--barUnfilledBG);
    box-shadow: -0.6rem 0.6rem 0.8rem var(--shadow);

}

.sl-item-wrapper-mobile .xp-bar_fill,
.sl-item-wrapper:hover .xp-bar_fill,
.sl-item-wrapper .sl-item:focus .xp-bar_fill,
.sl-item-wrapper-active .xp-bar_fill {
    background-image: var(--barGradient);
    box-shadow: -0.6rem 0.6rem 0.8rem var(--shadow-dark);

}


.sl-item-wrapper .sl-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.2rem 1.5rem;
    background-image: var(--barGradient);

    opacity: 0.6;
    z-index: -4;
    transition: 
        transform var(--delay) ease;
}

 
.sl-item-wrapper:hover .sl-item-bg,
.sl-item-wrapper .sl-item:focus + .sl-item-bg {
    transform: translate3d(-0.6rem, 0.6rem, 0);


}

.sl-item-wrapper-active .sl-item-bg {
    transform: translate3d(-0.6rem, 0.6rem, 0);

}

.sl-item-wrapper-mobile:hover,
.sl-item-wrapper-mobile .sl-item:focus + .sl-item-bg {
    transform: translate3d(0,0,0);
}


.sl-item_title {
    width: 100%;
    height: 100%;

    grid-area: title;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* padding: 0.5rem; */
}

.sl-item_title h1 {
    place-self: start;
    font-size: 1.8rem;
    font-weight:600;
}


.sl-item_xp {
    width: 100%;
    height: 100%;
    grid-area: xp;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
    "xp-bar";

}

.xp-bar {
    width: 100%;
    height: 100%;
    grid-area: xp-bar;
    display: flex;
    align-items: center;
}

.xp-bar_outline {
    height: 0.6rem;
    width: 100%;
    /* border: 1px solid rgba(255, 255, 255, 0.212); */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.xp-bar_fill {

    --width: 0;
    height: 100%;
    width: 0;
    background-image: linear-gradient(90deg, var(--holoStripe-dark), var(--holoBar-dark));
    background-position: left;
    background-repeat: no-repeat;
    background-size: 0;

    border-radius: 10px;

    animation: fadeIn var(--delayBar) ease forwards;

}

.xp_percent {
    display: grid;
    place-items: center;
}





.solid-bg {
    background: var(--bg-card);
    border-radius: 0.2rem 1.5rem;

}

.solid-bg::before  {
    position: absolute;

    content: '';
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.2rem 1.5rem;
    background-image: var(--barGradient);
    opacity: 0.6;
    z-index: -4;
    transition: 
        transform var(--delayBar) ease,
        border-radius var(--delayBar) ease,
        opacity var(--delayBar) ease;
    transition-delay: 0;
    transform: translate(-0.6rem, 0.6rem);
    /* filter: brightness(1.2); */
}

.solid-bg-light {
    background: rgb(255, 255, 255);
    border-radius: 20px;
}


.list-left {
    transform: translate3d(-100%, 0,0);
}

.list-left-2x {
    transform: translate3d(-120%, 0,0);
}

.no-fx *,
.no-fx .holo * {
    transition: none !important;
    filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.no-fx .skill-bg,
.no-fx .bar-chart_chart-bg {
    transform: translate3d(0,0,0);

}

.transition-fx .skill-bg,
.transition-fx .bar-chart_chart-bg {
    transition: 
        transform var(--delay2x) ease,
        border-radius var(--delay2x) ease,
        opacity var(--delay2x) ease !important;
}



.test .skills-hint {
    background: blue !important;
}

.test .skills-list {
    background: plum !important;
}

.test .sl-item {
    background: green !important;
}

.test .sl-item_icon {
    background: purple !important;
}

.test .sl-item_title {
    background: burlywood !important;
}

.test .sl-item_xp {
    background: palevioletred !important;
}

.test .skills-wrapper {
    background: greenyellow !important;
}

.test .skillDisplay_title {
    background: red;
}

.test .skillDisplay_list {
    background: blue;
}

.test .skillDisplay_info {
    background: green;
}

.test .skillDisplay_back {
    background: purple;
}