a trutorial for CSS XD

all the freaking codes i know: just edit the "#" into hex codes, in which u can do from this site by just putting ur pfp's image!: https://coolors.co/image-picker IN SHORT: U CAN USE THESE SITES TOO: https://rentry.co/oishiiscssvisualguide https://cssforjai.ju.mp/ (MENTIONED IN COMMENTS BY L0VEMXSH<333)

img{ filter: grayscale(80%); -webkit-filter: grayscale(80%); -webkit-transition: all 0.2s ease; } img:hover{ filter: grayscale (0%); filter: gray; -webkit-filter: grayscale(0%); filter: none; transition: 0.2s ease; } .css-1uodvt1 { padding-top: 0px; flex-direction: column; justify-items: center; text-align: center; } .css-1ej4ex { font-family: var(--chakra-fonts-heading); font-weight: var(--chakra-fontWeights-bold); font-size: var(--chakra-fontSizes-2xl); line-height: 1.33; color: #44413C; margin-bottom: 0px; } .css-bda9ez { font-size: var(--chakra-fontSizes-md); color: #544D48; font-weight: 700; font-family: Jura; margin-left: var(--chakra-space-1); } .glow-logo:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: rgb(0 0 0); left: 0; top: 0; border-radius: 8px; } .glow-logo:before { content: ""; background: linear-gradient(10deg, #5E5951, #5E5951,#5E5951, #5E5951,#5E5951,#5E5951, #5E5951, #5E5951, #5E5951,#5E5951); position: absolute; top: -2px; left: -2px; background-size: 250%; z-index: -1; width: calc(100% + 4px); height: calc(100% + 4px); opacity: 1; border-radius: 8px; } .css-p641ht { display: flex; -webkit-box-pack: justify; justify-content: space-between; position: fixed; padding-top: var(--chakra-space-1); padding-bottom: var(--chakra-space-1); background: rgb(0 0 0); box-shadow: var(--chakra-shadows-md); z-index: 2; backdrop-filter: blur(10px); padding-inline-start: var(--chakra-space-12); padding-inline-end: var(--chakra-space-12); width: var(--chakra-sizes-full); -webkit-box-align: center; align-items: center; height: var(--chakra-sizes-16); } .glow-on-hover:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: rgb(0 0 0); left: 0; top: 0; border-radius: 10px; } .css-1yhasuw { display: flex; padding: var(--chakra-space-1); padding-inline-start: var(--chakra-space-2); padding-inline-end: var(--chakra-space-2); -webkit-box-align: center; align-items: center; gap: var(--chakra-space-3); color: eerie black; } .css-fss3o9 { display: inline-flex; appearance: none; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; user-select: none; position: relative; white-space: nowrap; vertical-align: middle; outline: #A19F91 solid 2px; outline-offset: 2px; line-height: 1.2; border-radius: var(--chakra-radii-md); font-weight: var(--chakra-fontWeights-semibold); transition-property: var(--chakra-transition-property-common); transition-duration: var(--chakra-transition-duration-normal); height: var(--chakra-sizes-10); font-size: var(--chakra-fontSizes-md); color: var(--chakra-colors-whiteAlpha-900); padding-inline-start: var(--chakra-space-2); padding-inline-end: var(--chakra-space-2); min-width: var(--chakra-sizes-10); } button { background: #201B1A; padding: 0px; } .react-select-container .react-select\_\_placeholder, .react-select-container .react-select\_\_single-value { color: wenge; } .css-1s5evre { background-color: #9F9397; } .css-0 { background: outer space !important;} .Btn:before { position: absolute; content: "FOLLOW"; color: #77756A; display: flex; align-items: center; justify-content: center; width: 97%; height: 90%; border-radius: 8px; transition-duration: 1s; background-color: #544D48; background-size: 200%; /\* follow button content \*/} Follow button container .Btn { width: 140px; height: 40px; border: none; border-radius: 10px; background: #3B2120 /\* follow button border \*/} .css-1ifv49 { font-size: 13px; display: flex; -webkit-box-align: center; align-items: center; font-family: "Lilita One", sans-serif; font-weight: var(--chakra-fontWeights-bold); color: rgb(245, 52, 8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .css-wexxj8 {background: #B6A6A1 !important;} .css-YOURCLASS { transition-property: var(--chakra-transition-property-common); transition-duration: var(--chakra-transition-duration-fast); transition-timing-function: var(--chakra-transition-easing-ease-out); cursor: pointer; text-decoration: none; outline: transparent solid 2px; outline-offset: 2px; color: rgb(245, 52, 8); font-size: var(--chakra-fontSizes-xs); font-weight: var(--chakra-fontWeights-bold); display: inline-flex; -webkit-box-align: center; align-items: center; }