/* This file defines CSS variables for different color themes on the site. There are currently two themes defined - 'main' and 'grey'. More themes can be added by defining new CSS rules. To use a theme, add the 'theme' attribute to the tag, e.g. */ @font-face { font-family: "bone"; src: url("/media/nasalization-rg.otf") format("opentype"); } :root { --font: Ubuntu, sans-serif; --background-filter: blur(3px) brightness(80%); --rounded: 15px; --rounded2: 40px; } body[theme="main"] { --background-filter: blur(3px) brightness(80%); /* --bg: #240063; */ --bg: #3b039c; --alt: rgb(69, 9, 174); --button: #36028f; --border: #330386; --textcolor: #fff; --font: Ubuntu, sans-serif; .st0 { fill: rgb(93, 0, 255) !important; } .st1 { fill: rgb(75, 0, 206) !important; } } :root { --background-filter: blur(3px) brightness(80%); /* --bg: #240063; */ --bg: #3b039c; --alt: rgb(69, 9, 174); --button: #36028f; --border: #330386; --textcolor: #fff; --font: Ubuntu, sans-serif; } .st0 { fill: var(--alt) !important; } .st1 { fill: var(--button) !important; } body[theme="greyblack"] { --background-filter: blur(3px) brightness(80%); background: rgb(106, 97, 97); background: linear-gradient( 156deg, rgba(106, 97, 97, 1) 0%, rgba(0, 0, 0, 1) 100% ); --bg: rgb(106, 97, 97); --alt: rgba(27, 27, 27, 0.5); --button: #707070; --textcolor: #fff; background-attachment: fixed; } body[theme="ghost"] { --background-filter: blur(3px) brightness(80%); background: rgb(0, 0, 0); background: linear-gradient( 153deg, rgba(0, 0, 0, 1) 0%, rgba(149, 43, 43, 1) 100% ); --bg: rgb(0, 0, 0); --textcolor: #fff; --button: rgb(90, 48, 48); --logo: #ffffff; --alt: #000000; background-attachment: fixed; } body[theme="yourthemename"] { --background-filter: blur(3px) brightness(80%); --bg: #00b6ad4b; --alt: rgba(27, 27, 27, 0.5); --button: #444444; --textcolor: #fff; } body[theme="bone"] { --background-filter: blur(3px) brightness(80%); /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); font-family: "bone" !important; --bg: #000; --textcolor: #fff; --button: #1b1b1b; --alt: rgb(56, 56, 56); --border: var(--button); } body[theme="gb"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #4a4e69; --textcolor: #f2e9e4; --button: #22223b; --alt: rgb(56, 56, 56); --border: var(--button); } body[theme="gg"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #2f3e46; --textcolor: #cad2c5; --button: #48606d; --alt: rgb(94, 153, 155); --border: var(--button); } body[theme="brown"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #463f3a; --textcolor: #f4f3ee; --button: #8a817c; --alt: rgb(56, 56, 56); --border: var(--button); } body[theme="dg"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #293241; --textcolor: #e0fbfc; --button: #ee6c4d; --alt: rgb(116, 116, 116); --border: var(--button); } body[theme="moon"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #22223b; --textcolor: #f2e9e4; --button: #4a4e69; --alt: #37375f; --border: var(--button); } body[theme="red"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #a4161a; --textcolor: #ffffff; --button: #660708; --alt: rgb(71, 0, 0); --border: var(--button); } body[theme="sblue"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #001f54; --textcolor: #fefcfb; --button: #034078; --alt: rgb(0, 72, 180); --border: var(--button); } body[theme="candy"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #bdb2ff; --textcolor: #fefcfb; --button: #ffc6ff; --alt: rgb(255, 255, 255); --border: var(--button); } body[theme="lgray"] { /* transition: all 0.6s; */ --background-filter: blur(3px) brightness(80%); --bg: #ced4da; --textcolor: #212529; --button: #6c757d; --alt: rgb(151, 151, 151); --border: var(--button); } body[theme="yellow"] { --bg: #fff248; --button: #8a8701; --alt: rgb(119, 111, 0); --textcolor: #000; --rounded: 0px !important; --rounded2: 0px !important; } body[theme="yellow"] .btn { border-radius: 0px; } body[theme="yellow"] #particles-js { filter: invert(100%); } body[theme="fancy"] { --bg: #09090b; --textcolor: #dca54c; --alt: #171618; --button: #331800; --rounded: 80px !important; --rounded2: 100px !important; } body[theme="fancy"] .btn { border-radius: 100px; color: var(--textcolor); } body[theme="light"] { --bg: #fff; --textcolor: #000; --alt: #000; --button: #000; } body[theme="light"] #particles-js { filter: invert(100%); } body[theme="light"] select { color: #fff; } body[theme="mocha"] { --bg: #1e1e2e; --button: #caa6f7; --alt: #a6adc9; --rounded: 50px !important; --rounded2: 50px !important; } body[theme="orange"] { --bg: #000; --button: rgb(255, 166, 0); --alt: var(--button); } body[theme="youtube"] { --bg: #ff; --button: red; --alt: var(--button); --textcolor: #000; } body[theme="youtube"] #particles-js { filter: invert(100%); } body[theme="youtube-dark"] { --bg: #000; --button: red; --alt: var(--button); --textcolor: #fff; } [theme="bone"] h1, [theme="bone"] a, [theme="bone"] select, [theme="bone"] input { font-family: "bone" !important; } #SvgjsG1596 { color: red; } /* background: rgb(108,28,217); background: linear-gradient(153deg, rgba(108,28,217,1) 0%, rgba(16,0,43,1) 93%, rgba(0,0,0,1) 99%); */