@import url(wind.css);
@import url(../../vendor/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css);
@import url(../../vendor/animate.min.css);

@font-face {
    font-family: RussoOne;
    src: url(../../vendor/RussoOne-Regular.ttf);
}
body{
    overflow: hidden auto;
    font-family: RussoOne;
    letter-spacing: 1;
    line-height: 1;
}
.btn-toggle{
    appearance: none;
    -webkit-appearance: none;
    scale: 1.5;
    cursor: pointer;
}
.btn-toggle:checked::before{
    content:"\f62a";
}
nav:has(>.btn-toggle:checked) .social-contact{
    height: 100vh;
    display: flex!important;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.95);
    width: 100vw;
    position: fixed;
    z-index: 9998;
    top: 0px;
    left: 0px;
    padding-block: 3rem;
}
.btn-toggle:checked{
    z-index: 9999;
}
a.action{
    width: calc(100vw - 4rem);
}
/*header{
    display: grid;
    grid-template-areas:
                        "heading img"
                        "description img"
                        "action img";
    align-items: center;
}
header h1{
    grid-area: heading;
}
header img{
    grid-area: img;
}
header .action{
    grid-area: action;
}
header .description{
    grid-area: description;
}*/

.parallax{
    view-timeline: --subjectParallax block;
    animation-timeline: --subjectParallax;
    animation-name: bgfadeup;
    animation-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
    animation-direction: reverse;
    view-timeline-inset: 0% 75%;
    animation-fill-mode: both;
    animation-duration: 100ms; /* Firefox requires this to apply the animation */
}
.reveal{
    view-timeline: --subjectReveal block;
    animation-timeline: --subjectReveal;
    animation-name: fadeInUp;
    view-timeline-inset: 70% 10%;/* <noidea> <starting-y-position-from-bottom> */
    animation-fill-mode: both;
    animation-duration: 100ms; /* Firefox requires this to apply the animation */
}
.text-express{
    border-radius: .375rem;
    display: inline-block; /* Adjust as necessary */
    background-image: linear-gradient(to right, rgb(var(--secondary-rgb) / 50%) 50%, transparent 50% 100%);
    animation: text-express-anime 2.5s ease 1;
    padding: .008rem .5rem;
    background-size: 200% 100%;
    color: rgb(var(--highlight-rgb));
    view-timeline: --text-express-reveal block;
    animation-timeline: --text-express-reveal;
    view-timeline-inset: 50% 20%;/* <noidea> <starting-y-position-from-bottom> */
    animation-fill-mode: both;
    animation-duration: 100ms; /* Firefox requires this to apply the animation */
}
@keyframes text-express-anime {
    0%{
        background-position: 100% 0%;
        transform: rotateX(0deg);
        color: rgba(128, 128, 128, 0.508);
    }
    25%{
        background-position: 100% 0px;
        transform: rotateX(90deg);
        color: rgb(var(--highlight-rgb));
    }
    100%{
        background-position: 0% 0%;
        transform: rotateX(0deg);
        color: rgb(var(--highlight-rgb));
    }
}
@keyframes bgfadeup {
    0%{
        background-position-y: 100vh;

    }
}


#steps ul li{
    border-image: linear-gradient(to bottom, black 100%, transparent 0% 100%) 10;
    animation: border-steps-anime 2.5s ease 1;
    view-timeline: --border-steps-reveal block;
    animation-timeline: --border-steps-reveal;
    view-timeline-inset: 50% 20%;/* <noidea> <starting-y-position-from-bottom> */
    animation-fill-mode: both;
    animation-duration: 100ms; /* Firefox requires this to apply the animation */
}
@keyframes border-steps-anime{
    from{
        border-image: linear-gradient(black 0% 0%, transparent 0% 100%) 10;
    }
    to{
        border-image: linear-gradient(black 0% 100%, transparent 100% 100%) 10;
    }
}
/*https://youtu.be/uotfXZDLAEA?si=2ffTrlYUw5eY_00e*/