@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Borel&family=Parisienne&display=swap";@keyframes glowing {
   
   
    0% {
        transform: translateY(0);
        box-shadow: 0 0 100px 17px #ffb6a6
    }

    25% {
        transform: translateY(-5px);
        box-shadow: 0 0 200px 17px #ffb6a6
    }

    50% {
        transform: translateY(0);
        box-shadow: 0 0 300px 17px #ffb6a6
    }

    75% {
        box-shadow: 0 0 200px 17px #ffb6a6
    }

    to {
        transform: translateY(0);
        box-shadow: 0 0 100px 17px #ffb6a6
    }
}
:root {
    --border-width-default: 1px;
    --border-width-button: 2px;
    --border-width-checkbox: 2px;
    --border-width-drop-zone: 2px;
    --border-width-input: 2px;
    --border-width-input-small: 1px;
    --border-width-input-none: 0px;
    --border-width-input-overlay-unfocused: 1px;
    --border-width-marked: 3px;
    --border-width-selectable: 2px;
    --border-width-spinner: 2px;
    --border-width-tag: 2px;
    --border-radius-none: 0;
    --border-radius-small: 0.2rem;
    --border-radius-medium: 0.4rem;
    --border-radius-large: 0.6rem;
    --border-radius-extra-large: 1rem;
    --border-radius-extra-extra-large: 1.6rem;
    --border-radius-rounded: 9000px;
    --break-xs: 480px;
    --break-sm: 768px;
    --break-md: 1024px;
    --break-lg: 1200px;
    --break-xl: 1440px;
    --break-xxl: 1600px;
    --color-brand-muted-ice: #d6e4ff;
    --color-brand-muted-cupcake: #ffa3ee;
    --color-brand-muted-mint: #5cffbe;
    --color-brand-muted-sky: #7aa7ff;
    --color-brand-muted-blush: #ffcdcc;
    --color-brand-muted-canary: #ebeb00;
    --color-brand-muted-smoke: #d3d3d9;
    --color-brand-muted-lavender: #d1b3ff;
    --color-brand-muted-mustard: #ffd37a;
    --color-brand-muted-emerald: #00f593;
    --color-brand-muted-coral: #ff8280;
    --color-brand-muted-ocean: #1345aa;
    --color-brand-accent-grape: #5c16c5;
    --color-brand-accent-dragonfruit: #ff38db;
    --color-brand-accent-carrot: #e69900;
    --color-brand-accent-sun: #ebeb00;
    --color-brand-accent-lime: #00f593;
    --color-brand-accent-turquoise: #00f0f0;
    --color-brand-accent-eggplant: #451093;
    --color-brand-accent-wine: #ae1392;
    --color-brand-accent-slime: #00f593;
    --color-brand-accent-seafoam: #5cffbe;
    --color-brand-accent-cherry: #eb0400;
    --color-brand-accent-marine: #1f69ff;
    --color-brand-accent-seaweed: #00a3a3;
    --color-brand-accent-pebble: #848494;
    --color-brand-accent-moon: #efeff1;
    --color-brand-accent-fiji: #5cffbe;
    --color-brand-accent-blueberry: #1f69ff;
    --color-brand-accent-arctic: #00f0f0;
    --color-brand-accent-highlighter: #f5f500;
    --color-brand-accent-flamingo: #ff38db;
    --color-brand-accent-ruby: #eb0400;
    --color-brand-accent-punch: #ffcdcc;
    --color-brand-accent-creamsicle: #ffd37a;
    --color-white: #fff;
    --color-black: #000;
    --color-red: #e91916;
    --color-red-darker: #bb1411;
    --color-orange: #ffd37a;
    --color-yellow: #ffd37a;
    --color-green: #00f593;
    --color-green-darker: #00ad96;
    --color-blue: #1f69ff;
    --color-prime-blue: #0e9bd8;
    --color-magenta: #c53dff;
    --color-error: #eb0400;
    --color-warn: #ffd37a;
    --color-success: #00f593;
    --color-info: #1f69ff;
    --color-accent: #9147ff;
    --color-twitch-purple: #9147ff;
    --color-twitch-purple-1: #040109;
    --color-twitch-purple-2: #0d031c;
    --color-twitch-purple-3: #15052e;
    --color-twitch-purple-4: #24094e;
    --color-twitch-purple-5: #330c6e;
    --color-twitch-purple-6: #451093;
    --color-twitch-purple-7: #5c16c5;
    --color-twitch-purple-8: #772ce8;
    --color-twitch-purple-9: #9147ff;
    --color-twitch-purple-10: #a970ff;
    --color-twitch-purple-11: #bf94ff;
    --color-twitch-purple-12: #d1b3ff;
    --color-twitch-purple-13: #e3d1ff;
    --color-twitch-purple-14: #ede0ff;
    --color-twitch-purple-15: #f3ebff;
    --color-hinted-grey-1: #0e0e10;
    --color-hinted-grey-2: #18181b;
    --color-hinted-grey-3: #1f1f23;
    --color-hinted-grey-4: #26262c;
    --color-hinted-grey-5: #323239;
    --color-hinted-grey-6: #3b3b44;
    --color-hinted-grey-7: #53535f;
    --color-hinted-grey-8: #848494;
    --color-hinted-grey-9: #adadb8;
    --color-hinted-grey-10: #c8c8d0;
    --color-hinted-grey-11: #d3d3d9;
    --color-hinted-grey-12: #dedee3;
    --color-hinted-grey-13: #e6e6ea;
    --color-hinted-grey-14: #efeff1;
    --color-hinted-grey-15: #f7f7f8;
    --color-transparent: transparent;
    --color-opac-b-1: rgba(0,0,0,.05);
    --color-opac-b-2: rgba(0,0,0,.08);
    --color-opac-b-3: rgba(0,0,0,.13);
    --color-opac-b-4: rgba(0,0,0,.16);
    --color-opac-b-5: rgba(0,0,0,.22);
    --color-opac-b-6: rgba(0,0,0,.28);
    --color-opac-b-7: rgba(0,0,0,.4);
    --color-opac-b-8: rgba(0,0,0,.5);
    --color-opac-b-9: rgba(0,0,0,.6);
    --color-opac-b-10: rgba(0,0,0,.7);
    --color-opac-b-11: rgba(0,0,0,.75);
    --color-opac-b-12: rgba(0,0,0,.8);
    --color-opac-b-13: rgba(0,0,0,.85);
    --color-opac-b-14: rgba(0,0,0,.9);
    --color-opac-b-15: rgba(0,0,0,.95);
    --color-opac-gd-1: rgba(83,83,95,.38);
    --color-opac-gd-2: rgba(83,83,95,.48);
    --color-opac-gd-3: rgba(83,83,95,.55);
    --color-opac-gd-4: rgba(50,50,57,.62);
    --color-opac-gd-5: rgba(50,50,57,.95);
    --color-opac-gl-1: hsla(240,7%,70%,.22);
    --color-opac-gl-2: hsla(240,7%,70%,.35);
    --color-opac-gl-3: hsla(240,7%,70%,.43);
    --color-opac-gl-4: hsla(240,8%,88%,.4);
    --color-opac-gl-5: hsla(240,8%,88%,.95);
    --color-opac-w-1: hsla(0,0%,100%,.05);
    --color-opac-w-2: hsla(0,0%,100%,.08);
    --color-opac-w-3: hsla(0,0%,100%,.13);
    --color-opac-w-4: hsla(0,0%,100%,.16);
    --color-opac-w-5: hsla(0,0%,100%,.22);
    --color-opac-w-6: hsla(0,0%,100%,.28);
    --color-opac-w-7: hsla(0,0%,100%,.4);
    --color-opac-w-8: hsla(0,0%,100%,.5);
    --color-opac-w-9: hsla(0,0%,100%,.6);
    --color-opac-w-10: hsla(0,0%,100%,.7);
    --color-opac-w-11: hsla(0,0%,100%,.75);
    --color-opac-w-12: hsla(0,0%,100%,.8);
    --color-opac-w-13: hsla(0,0%,100%,.85);
    --color-opac-w-14: hsla(0,0%,100%,.9);
    --color-opac-w-15: hsla(0,0%,100%,.95);
    --color-opac-p-1: rgba(92,22,197,.05);
    --color-opac-p-2: rgba(92,22,197,.1);
    --color-opac-p-3: rgba(92,22,197,.15);
    --color-opac-p-4: rgba(92,22,197,.2);
    --color-opac-p-5: rgba(92,22,197,.25);
    --color-opac-p-6: rgba(92,22,197,.3);
    --color-opac-p-7: rgba(92,22,197,.4);
    --color-opac-p-8: rgba(92,22,197,.5);
    --color-opac-p-9: rgba(92,22,197,.6);
    --color-opac-p-10: rgba(92,22,197,.7);
    --color-opac-p-11: rgba(92,22,197,.75);
    --color-opac-p-12: rgba(92,22,197,.8);
    --color-opac-p-13: rgba(92,22,197,.85);
    --color-opac-p-14: rgba(92,22,197,.9);
    --color-opac-p-15: rgba(92,22,197,.95);
    --color-orange-1: #050301;
    --color-orange-2: #090601;
    --color-orange-3: #120d02;
    --color-orange-4: #251a04;
    --color-orange-5: #372706;
    --color-orange-6: #453008;
    --color-orange-7: #65470b;
    --color-orange-8: #7c570e;
    --color-orange-9: #9e6900;
    --color-orange-10: #c28100;
    --color-orange-11: #e69900;
    --color-orange-12: #ffb31a;
    --color-orange-13: #ffd37a;
    --color-orange-14: #ffdf9e;
    --color-orange-15: #ffebc2;
    --color-yellow-1: #050501;
    --color-yellow-2: #090901;
    --color-yellow-3: #0e0e02;
    --color-yellow-4: #1c1c03;
    --color-yellow-5: #292905;
    --color-yellow-6: #373706;
    --color-yellow-7: #4e4e09;
    --color-yellow-8: #60600b;
    --color-yellow-9: #7a7a00;
    --color-yellow-10: #949400;
    --color-yellow-11: #adad00;
    --color-yellow-12: #c7c700;
    --color-yellow-13: #e0e000;
    --color-yellow-14: #ebeb00;
    --color-yellow-15: #f5f500;
    --color-green-1: #010503;
    --color-green-2: #010906;
    --color-green-3: #02120c;
    --color-green-4: #042015;
    --color-green-5: #063221;
    --color-green-6: #074029;
    --color-green-7: #0a5738;
    --color-green-8: #016b40;
    --color-green-9: #018852;
    --color-green-10: #00a865;
    --color-green-11: #00c274;
    --color-green-12: #00db84;
    --color-green-13: #00f593;
    --color-green-14: #5cffbe;
    --color-green-15: #a8ffdc;
    --color-cyan-1: #010505;
    --color-cyan-2: #010909;
    --color-cyan-3: #021212;
    --color-cyan-4: #042020;
    --color-cyan-5: #052e2e;
    --color-cyan-6: #073c3c;
    --color-cyan-7: #095353;
    --color-cyan-8: #0c6a6a;
    --color-cyan-9: #018383;
    --color-cyan-10: #00a3a3;
    --color-cyan-11: #00b8b8;
    --color-cyan-12: #00d6d6;
    --color-cyan-13: #00f0f0;
    --color-cyan-14: #2effff;
    --color-cyan-15: #94ffff;
    --color-blue-1: #010205;
    --color-blue-2: #020712;
    --color-blue-3: #040d20;
    --color-blue-4: #071a40;
    --color-blue-5: #0a255c;
    --color-blue-6: #0d3177;
    --color-blue-7: #1345aa;
    --color-blue-8: #1756d3;
    --color-blue-9: #1f69ff;
    --color-blue-10: #528bff;
    --color-blue-11: #7aa7ff;
    --color-blue-12: #a3c2ff;
    --color-blue-13: #c7daff;
    --color-blue-14: #d6e4ff;
    --color-blue-15: #e5eeff;
    --color-magenta-1: #050104;
    --color-magenta-2: #12020f;
    --color-magenta-3: #20041b;
    --color-magenta-4: #37062e;
    --color-magenta-5: #4e0941;
    --color-magenta-6: #650b55;
    --color-magenta-7: #8a0f73;
    --color-magenta-8: #ae1392;
    --color-magenta-9: #c516a5;
    --color-magenta-10: #ff38db;
    --color-magenta-11: #ff75e6;
    --color-magenta-12: #ffa3ee;
    --color-magenta-13: #ffc7f5;
    --color-magenta-14: #ffd6f8;
    --color-magenta-15: #ffe5fa;
    --color-red-1: #050101;
    --color-red-2: #120202;
    --color-red-3: #200404;
    --color-red-4: #3c0807;
    --color-red-5: #530a09;
    --color-red-6: #6e0e0c;
    --color-red-7: #971311;
    --color-red-8: #bb1411;
    --color-red-9: #eb0400;
    --color-red-10: #ff4f4d;
    --color-red-11: #ff8280;
    --color-red-12: #ffaaa8;
    --color-red-13: #ffcdcc;
    --color-red-14: #ffdcdb;
    --color-red-15: #ffe6e5;
    --color-twitter: #1da1f2;
    --color-facebook: #3b5998;
    --color-reddit: #ff4500;
    --color-snapchat: #fffc00;
    --color-instagram: #405de6;
    --color-youtube: #cd201f;
    --color-paypal: #009cde;
    --color-paypal-blue: #009cde;
    --color-paypal-yellow: #fcc439;
    --color-venmo: #008cff;
    --color-vk: #45668e;
    --color-amazon: #fad677;
    --font-base: "Inter","Roobert","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-display: "Roobert","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-mono: monospace;
    --font-size-1: 5.4rem;
    --font-size-2: 3.6rem;
    --font-size-3: 2.4rem;
    --font-size-4: 1.8rem;
    --font-size-5: 1.4rem;
    --font-size-6: 1.3rem;
    --font-size-7: 1.2rem;
    --font-size-8: 1.2rem;
    --font-size-base: 1.3rem;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-hdr: 400;
    --line-height-body: 1.5;
    --line-height-heading: 1.2;
    --base-rem-unit: 10;
    --grid-columns: 12;
    --grid-gutter-width: 1.5rem;
    --grid-gutter-width-lg: 2rem;
    --grid-gutter-width-sm: 1rem;
    --grid-gutter-width-xs: 0.5rem;
    --opac-1: 0.05;
    --opac-2: 0.1;
    --opac-3: 0.15;
    --opac-4: 0.2;
    --opac-5: 0.25;
    --opac-6: 0.3;
    --opac-7: 0.4;
    --opac-8: 0.5;
    --opac-9: 0.6;
    --opac-10: 0.7;
    --opac-11: 0.75;
    --opac-12: 0.8;
    --opac-13: 0.85;
    --opac-14: 0.9;
    --opac-15: 0.95;
    --space-0: 0;
    --space-1: 1rem;
    --space-2: 2rem;
    --space-3: 3rem;
    --space-4: 4rem;
    --space-5: 5rem;
    --space-6: 6rem;
    --space-7: 7rem;
    --space-8: 8rem;
    --space-9: 9rem;
    --space-10: 10rem;
    --space-auto: auto;
    --space-05: 0.5rem;
    --timing-short: 100ms;
    --timing-medium: 150ms;
    --timing-long: 200ms;
    --z-index-modal: 5000;
    --z-index-notification: 4000;
    --z-index-overlay: 3000;
    --z-index-balloon: 2000;
    --z-index-sticky: 1000;
    --z-index-above: 10;
    --z-index-default: 1;
    --z-index-below: -1;
    --button-size-small: 2.4rem;
    --button-size-default: 3rem;
    --button-size-large: 3.6rem;
    --button-text-small: 1.2rem;
    --button-text-default: 1.3rem;
    --button-text-large: 1.4rem;
    --button-padding-x: 1rem;
    --button-padding-y: 0.5rem;
    --input-text-small: 1.2rem;
    --input-text-default: 1.3rem;
    --input-text-large: 1.4rem;
    --input-size-small: 2.4rem;
    --input-size-default: 3rem;
    --input-size-large: 3.6rem
}
@font-face {
    font-family: ABC Ginto Nord;
    font-style: normal;
    font-weight: 800;
    src: url(assets/3d07f5abf272fbb5670d02ed687453d0.woff2) format("woff2")
}

@font-face {
    font-family: ABC Ginto Nord;
    font-style: italic;
    font-weight: 800;
    src: url(assets/3c0aa7f9d47d6a96b14ecada461ccf0e.woff2) format("woff2")
}


@font-face {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: 400;
    src: url(assets/980082c4328266be3342a03dcb37c432.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: italic;
    font-weight: 400;
    src: url(assets/db985aaa3c64f10506d96d876e350d47.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: 500;
    src: url(assets/05422eb499ddf5616e44a52c4f1063ae.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: italic;
    font-weight: 500;
    src: url(assets/412f5d9534ce2a2e1a1ae9b746bca5b5.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: 600;
    src: url(assets/e55012627a8f6e7203b72a8de730c483.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: italic;
    font-weight: 600;
    src: url(assets/d9b0aabb79e7d8b3b14789ebd534f158.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: 700;
    src: url(assets/7cf1be7696bf689b97230262eade8ad8.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: italic;
    font-weight: 700;
    src: url(assets/f9bf0f65660d23c6f359d22720fc55ae.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: 800;
    src: url(assets/d6db7b5639c7ed70f8b582984dda6c62.woff2) format("woff2")
}

@font-face {
    font-family: Noto Sans;
    font-style: italic;
    font-weight: 800;
    src: url(assets/a2a248f78d12dd5b842930bda7036302.woff2) format("woff2")
}

.ct {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
.badge,.button,.content__container,.content__container__section,.flex,.flex--align-center,.flex--centralize-items,.flex--column,.flex--items-on-top,.flex--justify-center,.hero__banner__container .inner__container+.inner__container,.icon {
    display: flex
}

.content__container,.content__container__section,.flex--column {
    flex-direction: column
}

.badge,.button,.flex--align-center,.flex--centralize-items,.icon {
    align-items: center
}

.badge,.button,.flex--centralize-items,.flex--justify-center,.hero__banner__container .inner__container+.inner__container,.icon {
    justify-content: center
}

.flex--items-on-top {
    align-items: flex-start
}

.content__container__section,.gap-x-small {
    gap: 4px
}

.gap-small {
    gap: 8px
}

.gap-medium {
    gap: 16px
}

.gap-large {
    gap: 32px
}

.content__container,.gap-x-large {
    margin: 19px 0;
    gap: 64px
}

.fill-width {
    width: 100%
}

.fill-height {
    height: 100%
}

.text--capitalize {
    text-transform: capitalize
}

.text--underline {
    text-decoration: underline;
    -webkit-text-decoration-color: #fec8ad;
    text-decoration-color: #fec8ad
}

.text--bold {
    font-weight: 700
}

.text--borel-familly {
    font-size: clamp(24px,5vw,44px);
    text-rendering: geometricPrecision;
    font-family: "ABC Ginto Nord","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.text--helper {
    color: hsla(0,0%,4%,.67)
}

.text--medium {
    color: hsla(0,0%,4%,.77)
}

.text--emphasis {
    color: #913b8c;
    font-weight: 700
}

.text--white {
    color: hsla(0,0%,94%,.87)
}


.btn {
    margin: 7px 0;
    font-size: 1.2rem;
    padding: 1rem 2.5rem;
    border: none;
    outline: none;
    border-radius: 0.4rem;
    cursor: pointer;
    text-transform: uppercase;
    background: linear-gradient(270deg, #fec8ad 0%, #9383bb 60%);
    color: rgb(255, 255, 255);
    font-weight: 700;
    transition: 0.6s;
    box-shadow: 0px 0px 60px #9383bb;
    -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
  }
  
  .btn:active {
    scale: 0.92;
  }
  
  .btn:hover {
    background: red;
    color: rgb(255, 255, 255);
  }

* {
    box-sizing: border-box;
    padding: 0;
}
.twitch {
    padding: 0 129px;
}
  @media screen and (min-width: 850px) {
    .twitch {
      position: relative;
    }
  
    .twitch .twitch-video {
      width: 75%;
      padding-top: 42.1875%;
    }
  
    .twitch .twitch-chat {
      width: 25%;
      height: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }
body,html {
    max-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
    font-family: Poppins,sans-serif
}

body {
    background-color: #ebebd2
}

main {
    padding-top: 10vh
}

footer {
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6rem;
    padding: 0 8%;
    width: 100vw;
    min-height: 15vh;
    color: hsla(0,0%,4%,.87);
    border-top: 1px dashed #ffc4eb;
    background: #ebebd2
}

section {
    padding: 0 10%
}

ul {
    list-style: inside
}
a {
    color: #561b8b;
}
a:hover {
    color:blue;
}
.hero__banner__container {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.15);
    border-radius: 8px;
    display: flex;
    padding: 10%;
    width: 97vw;
    height: 60vh;
    color: hsla(0,0%,4%,.87);
    font-size: .9rem;
    background-color: #beb4d6;
    background-image: linear-gradient(315deg,#cc97c1,#beb4d6 80%);
}

.avatar,.avatar--glowing {
    border-radius: 50%;
    border: 8px double #ffc4eb;
    transition: .3s linear
}

.avatar--glowing {
    animation: glowing 8s linear infinite
}

.badge,.button,.icon {
    width: -moz-fit-content;
    width: fit-content;
    padding: 4px 8px;
    font-size: small;
    text-decoration: none;
    transition: .3s linear;
    color: #fff;
    border-radius: 14px;
    background-color: #9383bb
}

.badge:hover,.button:hover,.icon:hover {
    background-color: #8572b2
}

.icon {
    padding: 8px;
    border-radius: 12px
}

.icon,.icon:hover {
    background-color: #f8b3ca
}

.button {
    font-size: medium;
    padding: 8px 24px
}

.projects__cards__grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 20px;
    gap: 20px
}


::-webkit-scrollbar {
    height: 28px;
  }
  
  ::-webkit-scrollbar-track {
    border-radius: 2em;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 9em;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #fec8ad;
  }


 ::-webkit-scrollbar-thumb {
    background-color: #9383bb;
    border: 3px solid var(--scrollbarBG);
  }
  

#about-me {
    padding-top: 4rem
}
.ctw {
    width: 451px;
}

.twitch-embed{
    display: flex;
    padding-top: 4rem;
    justify-content: center;
}
@media screen and (max-width: 958px) {
    .twitch{
        padding: 0 4px;
    }
    .ct {
        gap: 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .ctw {
        width: 280px;
    }
    .hero__banner__container .inner__container+.inner__container {
        display:none
    }

    .hero__banner__container:first-child {
        width: 100%
    }
}

@media screen and (max-width: 768px) {
    .projects__cards__grid {
        grid-template-columns:100%
    }
}