.confetti-holder.svelte-6bddsi {
    position: relative;
}
@keyframes svelte-6bddsi-rotate {
    0% {
        transform: rotate(var(--rotation-deg));
    }
    to {
        transform: rotate(calc(360 / var(--rotation-deg) + 960));
    }
}
@keyframes svelte-6bddsi-translate {
    0% {
        opacity: 1;
    }
    8% {
        transform: translateY(calc(var(--translate-y) * 0.95))
        translate(calc(var(--translate-x) * (var(--x-spread) * 0.9)));
        opacity: 1;
    }
    12% {
        transform: translateY(var(--translate-y))
        translate(calc(var(--translate-x) * (var(--x-spread) * 0.95)));
        opacity: 1;
    }
    16% {
        transform: translateY(var(--translate-y))
        translate(calc(var(--translate-x) * var(--x-spread)));
        opacity: 1;
    }
    to {
        transform: translateY(calc(var(--translate-y) + var(--fall-distance)))
        translate(var(--translate-x));
        opacity: 0;
    }
}
.confetti.svelte-6bddsi {
    --translate-y: calc(-200px * var(--translate-y-multiplier));
    --translate-x: calc(200px * var(--translate-x-multiplier));
    position: absolute;
    height: calc(var(--size) * var(--scale));
    width: calc(var(--size) * var(--scale));
    animation: svelte-6bddsi-translate var(--transition-duration)
    var(--transition-delay) var(--transition-iteration-count) linear;
    opacity: 0;
    pointer-events: none;
}
.confetti.svelte-6bddsi:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--image);
    background-size: contain;
    animation: svelte-6bddsi-rotate var(--transition-duration)
    var(--transition-delay) var(--transition-iteration-count) linear;
}
@media (prefers-reduced-motion) {
    .confetti.svelte-6bddsi,
    .confetti.svelte-6bddsi:before {
        animation: none;
    }
}
.paragraph.svelte-aryhif {
    display: flex;
    width: 22rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
.title.svelte-aryhif {
    font-size: 3.4rem; /* Large size for better visibility */
    font-weight: bold;
    font-family: Arial, sans-serif;
    background: url('/images/lava.avif'), linear-gradient(to top left, rgb(243, 172, 74), rgb(162, 8, 7));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Makes the text itself transparent */
    background-size: cover; /* Ensure the GIF covers the text area */
    background-position: center; /* Centers the background */
    /*background-size: 700px 450px;*/
}
.body.svelte-aryhif {
    color: var(--textBody);
    font-size: 1.17rem;
    line-height: 140%;
    white-space: pre-wrap;
}
@media (max-width: 500px) {
    .paragraph.svelte-aryhif {
        width: 100%;
    }
}
.project-card.svelte-bw5rkw.svelte-bw5rkw {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1.5rem;
    z-index: 1;
}
.project-header.svelte-bw5rkw.svelte-bw5rkw {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--accent);
    position: relative;
    
}
.project-header.svelte-bw5rkw.svelte-bw5rkw:hover:after,
.project-header.svelte-bw5rkw.svelte-bw5rkw:focus:after {
    content: "";
    position: absolute;
    cursor: pointer;
    top: -0.2rem;
    left: -0.4rem;
    width: 100%;
    height: 100%;
    background-color: var(--buttonHover);
    border-radius: 0.4rem;
    padding: 0.2rem 0.4rem;
    
}
.project-icon.svelte-bw5rkw.svelte-bw5rkw {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.2rem;
    
}
.project-header.svelte-bw5rkw.svelte-bw5rkw:hover:before {
    content: "";
    background: var(--buttonHover);
    position: absolute;
    
}
.project-title.svelte-bw5rkw.svelte-bw5rkw {
    font-size: 1.1rem;
    line-height: 120%;
    font-weight: 400;
    
}
.project-description.svelte-bw5rkw.svelte-bw5rkw {
    color: var(--textBody);
    font-size: 0.87rem;
    line-height: 140%;
    white-space: pre-wrap;
    
}
.project-link.svelte-bw5rkw.svelte-bw5rkw {
    color: var(--textBody);
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;

}
#project-card-area.svelte-bw5rkw.svelte-bw5rkw {
    display: flex;
    flex-direction: column;
    width: 22rem;
    
}
#jettth-outer.svelte-bw5rkw.svelte-bw5rkw {
    margin-bottom: -1.8rem;
    display: flex;
    justify-content: flex-end;
    
}
#jettth-holder.svelte-bw5rkw.svelte-bw5rkw {
    width: 8rem;
    cursor: pointer;
    pointer-events: all;
    
    
}
#jettth-plush.svelte-bw5rkw.svelte-bw5rkw {
    width: 8rem;
    height: 10.5rem;
    transform: rotate(10deg);
    transition: transform 0.15s ease-in-out;
    border-radius: 1rem;
    
    
}
#jettth-holder.svelte-bw5rkw:hover #jettth-plush.svelte-bw5rkw {
    transform: translateY(-0.5rem) rotate(10deg);
    
}
#jettth-holder.svelte-bw5rkw.svelte-bw5rkw:active {
    transform: scale(0.95);
    
}
@media (max-width: 500px) {
    #project-card-area.svelte-bw5rkw.svelte-bw5rkw {
        width: 100%;
    }
}
@media (hover: none) {
    #jettth-holder.svelte-bw5rkw:hover #jettth-plush.svelte-bw5rkw {
        transform: rotate(10deg);
    }
    #jettth-holder.svelte-bw5rkw.svelte-bw5rkw:active {
        transform: scale(0.95);
    }
}
.contact-button.svelte-1x06q3l {
    padding: 0.375rem;
}
#contacts.svelte-1gkdt9f {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
#scroll-container.svelte-bbth0j.svelte-bbth0j {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2.5rem;
}
#scroll-container.center.svelte-bbth0j.svelte-bbth0j {
    align-items: center;
    height: 100vh;
}
#body-content.svelte-bbth0j.svelte-bbth0j {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: fit-content;
    margin-top: 5.5rem;
    position: relative;
}
#scroll-container.center.svelte-bbth0j #body-content.svelte-bbth0j {
    margin-top: 0;
}
.section.svelte-bbth0j.svelte-bbth0j {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 1rem;
}
.section.row.svelte-bbth0j.svelte-bbth0j {
    flex-direction: row;
    justify-content: space-between;
}
#introduction-top.svelte-bbth0j.svelte-bbth0j {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
}
#jettfetti.svelte-bbth0j.svelte-bbth0j {
    position: fixed;
    top: -70px;
    left: 0;
    height: calc(100vh + 70px);
    width: 100vw;
    display: flex;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    z-index: -2;
}
#projects.svelte-bbth0j.svelte-bbth0j {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 1200px) {
    #body-content.svelte-bbth0j.svelte-bbth0j {
        width: 80%;
        
    }
}
@media (max-width: 940px) {
    #body-content.svelte-bbth0j.svelte-bbth0j {
        width: 90%;
    }
}
@media (max-width: 830px) {
    #introduction.svelte-bbth0j.svelte-bbth0j {
        padding-bottom: 1.7rem;
    }
    #body-content.svelte-bbth0j.svelte-bbth0j {
        width: 100%;
        padding: 0 1.7rem;
        justify-content: center;
        align-items: center;
    }
    .section.row.svelte-bbth0j.svelte-bbth0j {
        flex-direction: column;
        justify-content: normal;
    }
    #scroll-container.center.svelte-bbth0j.svelte-bbth0j {
        align-items: normal;
        height: initial;
    }
}
@media (max-width: 830px) {
    #scroll-container.center.svelte-bbth0j #body-content.svelte-bbth0j,
    #body-content.svelte-bbth0j.svelte-bbth0j {
        margin-top: 3rem;
    }
    #introduction.svelte-bbth0j.svelte-bbth0j {
        padding-top: 0;
    }
    .section.row.svelte-bbth0j.svelte-bbth0j {
        flex-direction: column;
        justify-content: normal;
    }
    #scroll-container.center.svelte-bbth0j.svelte-bbth0j {
        align-items: normal;
        height: initial;
    }
}
.wave {
    animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
    animation-duration: 2.5s;        /* Change to speed up or slow down */
    animation-iteration-count: infinite;  /* Never stop waving :) */
    transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
    display: inline-block;
    color: var(--accent);
    font-size: 2.75rem;
    line-height: 120%;
    font-weight: 400;

}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
    10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
    20% { transform: rotate(-8.0deg) }
    30% { transform: rotate(14.0deg) }
    40% { transform: rotate(-4.0deg) }
    50% { transform: rotate(10.0deg) }
    60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
    100% { transform: rotate( 0.0deg) }
}

/*LAST */



/* For demonstration purposes only: */
body { font-size: 3.5em }
h1 { font-size: 0.5em }