The web site of cyberbeak

custom tamanotchi profile

tamanotchi is a really fun little virtual pet to add to your site!

I was playing with the custom css and decided to make a little guide!

the following is the default styling for pages where the custom css shows. found via dev tools

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    background-color: #f9fcff;
    background-image: linear-gradient(to bottom, #59c1ec, rgba(135, 206, 235, 0) 100%, #f9fcff);
    font-family: "Trebuchet MS", "Arial", sans-serif;
    min-height: 100% !important;
}

body {
    margin: 0px;
    overflow-x: hidden;
}

a,
a:visited {
    color: #0078a8;
}

a:active,
a:hover {
    color: #ff40ac;
}

img {
    image-rendering: pixelated;
}

.colname {
    background-color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
    text-align: center;
}

.coloreditor {
    display: flex;
    flex-flow: row nowrap;
}

.colorslider {
    display: inline-block;
    margin: 8px;
    max-width: 100%;
    min-width: 200px;
    width: 95%;
}

.colorslider[class*="blue"] .ui-slider-handle {
    background: #4af;
    border: 1px solid #00c;
    color: #2779aa;
    font-weight: 700;
}

.colorslider[class*="green"] .ui-slider-handle {
    background: #3a3;
    border: 1px solid #060;
    color: #2779aa;
    font-weight: 700;
}

.colorslider[class*="red"] .ui-slider-handle {
    background: #faa;
    border: 1px solid #c00;
    color: #2779aa;
    font-weight: 700;
}

.colorsliders {
    display: inline-block;
    margin-right: 8px;
    width: 60%;
}

.colorsliders * {
    box-sizing: border-box;
    vertical-align: middle;
}

.colorswatches {
    display: inline-flex;
    flex-flow: row wrap;
    height: 100%;
}

.colorvalue {
    display: inline-block;
    margin: 4px;
    max-width: 20%;
}

.contestimg1 {
    height: auto;
    max-width: 540px;
    width: 90vw;
}

.contestimg2 {
    height: auto;
    max-width: 175px;
    width: 90vw;
}

.editequip {
    text-align: left;
}

.editequip .odd,
.editequip .even {
    margin-bottom: 2px;
}

.editequip input[type="button"] {
    float: right;
    margin: 0.5em auto auto 10px;
}

.editequip table td {
    text-align: center;
    width: 50%;
}

.even {
    background-color: rgba(255, 255, 255, 0.6);
}

.evenhidden,
.oddhidden {
    display: none;
    position: absolute;
}

.familyeven {
    background-color: rgba(255, 255, 255, 0.6);
    margin: 2px;
    min-height: 40px;
}

.familymember {
    display: inline-block;
    margin: 10px;
}

.familyodd {
    background-color: rgba(255, 255, 255, 0.35);
    margin: 2px;
    min-height: 40px;
}

.hamburger,
.hamburgerlinks,
#headermobilehack,
.editequip table,
#mobilead {
    display: none;
}

.homepage {
    margin: auto;
    max-width: 100%;
    padding-top: 20px;
    text-align: center;
}

.homepage img {
    height: auto;
    max-width: 430px;
    width: 100%;
}

.inline {
    display: inline;
}

.itemdescription {
    font-style: italic;
}

.leaderboardpagelinkcurrent {
    background-color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.leaderboardpagelinks,
.leaderboardpagelinkcurrent {
    display: initial;
    margin: auto 5px 10px;
    padding: 5px;
}

.leaderboardpagelinks,
.odd {
    background-color: rgba(255, 255, 255, 0.35);
}

.leadertext {
    padding-bottom: 50px;
    text-align: center;
}

.loginleft {
    float: left;
    text-align: left;
    width: auto;
}

.loginright {
    float: right;
    text-align: right;
}

.modname {
    color: #4682b4;
    font-weight: 700;
}

.petlistimgholder {
    height: 60px;
    width: 10%;
}

.specialusernotamas {
    font-weight: 700;
    margin: auto;
    padding: 20px 0;
    text-align: center;
    width: 100%;
}

.swatch {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    height: 24px;
    margin: 4px;
    transition: box-shadow 0.1s ease;
    width: 24px;
}

.swatch:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.tabletitle,
.bold {
    font-weight: 700;
}

.username {
    color: #ff59b7;
    font-weight: 700;
}

.username a {
    text-decoration: none;
    color: inherit;
}

.username a:hover {
    text-decoration: underline;
}

.center {
    text-align: center;
}

#accountsettings {
    text-align: center;
    width: 60%;
}

#accountsettings input[type="text"],
#accountsettings input[type="password"],
#adminpanel input[type="text"] {
    width: 90%;
}

#custom_css {
    width: 100%;
    min-height: 300px;
}

#ad {
    font-size: small;
    margin: 20px auto auto;
    max-height: 112px;
    max-width: 728px;
    text-align: center;
}

#adminpanel select {
    width: 97%;
}

.admin-search-confirm {
    color: #0078a8;
    font-size: 0.85em;
    margin-left: 6px;
}

#adminpanel,
#adminpanelbiglist {
    text-align: center;
    width: 100%;
}

#adoptpagepw {
    margin: auto;
    text-align: center;
    width: 50%;
}

#announcements {
    background-color: #c8efff;
    border-radius: 18px;
    font-weight: 700;
    margin: 15px auto -8.5%;
    max-width: 1100px;
    min-width: 728px;
    padding: 10px;
    position: relative;
    text-align: center;
}

#announcements #announcementsholder {
    padding: 0 30px;
}

#announcements-empty {
    margin: 0px auto -8%;
    position: relative;
}

#content {
    min-height: 250px;
    padding: 10px 48px 0;
}

#credits,
.contest {
    text-align: center;
}

#embedmain {
    margin: 20px auto;
}

#embedtable {
    margin: auto;
    text-align: center;
    width: 100%;
}

#embedtable input {
    width: 95%;
}

#familymain {
    margin: auto auto 5%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

#footer {
    color: #a6adb4;
    font-size: 80%;
    margin: 0 auto;
    max-width: 70%;
    min-width: 728px;
    text-align: center;
    clear: both;
    padding-top: 25px;
}

#footerbadges {
    margin-top: 15px;
}

#header {
    background-color: rgba(245, 250, 255, 0.95);
    color: #000;
    left: 0;
    line-height: 150%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    padding: 4px;
    height: 65px;
}

#headercontainer {
    float: left;
    height: 100%;
    width: 100%;
}

#headerlinks {
    float: right;
    max-width: 80%;
    text-align: right;
    padding-right: 8px;
    margin-top: 5px;
}

#headerlogo {
    height: 100%;
    position: absolute;
}

#headerlogo a,
#headerlogo a:active,
#headerlogo a:hover,
#headerlogo a:visited,
.leaderboardpagelinks a,
.leaderboardpagelinkcurrent a {
    text-decoration: none;
}

#itemeditor {
    float: left;
    text-align: center;
    width: 100%;
}

#lead-mini {
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

#leaderboard,
#mypetstable {
    text-align: center;
    width: 100%;
}

#leaderboardlinksholder {
    margin: 1em auto -5%;
    text-align: center;
}

#logoimg {
    bottom: -5px;
    height: 100%;
    left: 5px;
    max-height: 36px;
    position: relative;
    width: auto;
}

#logoimg:hover {
    animation: wobble 0.2s ease-in-out infinite;
}

#logotext {
    bottom: -5px;
    height: auto;
    max-height: 40px;
    min-height: 10px;
    position: relative;
    right: -10px;
    width: auto;
}

#main {
    background-image: linear-gradient(to bottom, #f3fbff, rgba(240, 248, 255, 0) 70%);
    border-radius: 18px;
    color: #000;
    margin: 10% auto 4%;
    max-width: 1100px;
    min-width: 728px;
    position: relative;
}

#parade {
    height: 50px;
    width: 100%;
    overflow: hidden;
    margin: 5px 0px;
}

#paradeField {
    display: flex;
    width: 200%;
    animation: scrolling-pets 50s linear infinite;
}
#paradeField:hover {
    animation-play-state: paused;
}

#paradeField img {
    margin: 0px 10px;
}

#petholder {
    background-color: rgba(255, 255, 255, 0.7);
    float: right;
    height: 100%;
    text-align: center;
    width: 48%;
    border-radius: 50%;
}

#petholder img {
    position: relative;
    top: 55px;
}

.alignme {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#petholder span {
    position: relative;
    top: 35%;
}

#petmakermain {
    display: flex;
    margin: auto;
    width: 100%;
}

#petmodifier {
    float: left;
    text-align: center;
    width: 100%;
}

#petpreview {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    margin: 10px auto;
    min-height: 150px;
    text-align: center;
    border-radius: 50%;
    max-width: 50%;
}

#petpreview .alignme {
    position: static;
    top: auto;
    transform: none;
}

#petprofileadopt {
    height: 125px;
    width: 100%;
}

#petprofilemain {
    height: 200px;
    width: 100%;
}

#petprofileoptions {
    height: 100%;
}

#petprofilesignup {
    background-color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    margin: 10px auto;
    max-width: 80%;
    padding: 5px;
    position: relative;
}

#petprofiletext,
#petprofiletextadopt {
    float: left;
    height: 100%;
    text-align: center;
    width: 48%;
}

#profileflavortext {
    background-color: rgba(240, 248, 255, 0.5);
    margin: 50px auto;
    padding: 10px 20px;
    width: 100%;
}

#shade1 {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url("/includes/img/dots.png") repeat 0 0;
    animation: bg-scrolling-reverse 7s linear infinite;
}

#stats {
    height: 200px;
    margin: auto;
    text-align: center;
    width: 100%;
}

#statsleft {
    float: left;
    text-align: center;
    width: 48%;
}

#statsright {
    float: right;
    text-align: center;
    width: 48%;
}

#title {
    color: #82c3dd;
    font-size: 150%;
    font-weight: 400;
    padding: 20px 20px 0;
}

#twittercontainer {
    background-color: rgba(255, 255, 255, 0.5);
}

#wrapper {
    padding: 70px 10px 40px 10px;
    /*margin: 10px;*/
    overflow: hidden;
}

/* Junk */
#decorations {
    background-color: red;
    max-width: 1100px;
    min-width: 728px;
    position: relative;
    margin: 10% auto 5%;
    pointer-events: none;
}

#sunburst {
    position: absolute;
    width: 1300px;
    top: -630px;
    right: -630px;
    z-index: -1;
    filter: brightness(200%);
    animation-name: spin;
    animation-duration: 200000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

I'll break down the basics of what some of this code is doing. As those of you familiar with coding will know, any code that you choose not to alter from the default doesn't need to be included in the custom css section.
(I'm going to move sections around so similar sections are together, just in case you notice the following is a bit different from what was shown above)

If you have a basic understanding of CSS then the following should be pretty self explanatory and you can leave it or change it if you know what you're doing.
For those who don't, check out the following links:
explaination of css | html tag and styling | body tag and styling
the CSS universal (*) selector selects all elements of any type.

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    background-color: #f9fcff;
    background-image: linear-gradient(to bottom, #59c1ec, rgba(135, 206, 235, 0) 100%, #f9fcff);
    font-family: "Trebuchet MS", "Arial", sans-serif;
    min-height: 100% !important;
}

body {
    margin: 0px;
    overflow-x: hidden;
}

The only changes I made was some text styling. I added a custom font and added it in the body styling so it will be the default font on the pages the custom css works. I didn't change the html tags styling and I dont think I changed the universal selector either.

@font-face {
font-family: 'rainyhearts';
src: url('https://beak-tama.art/fonts/rainyhearts.woff') format("woff");
src: url('https://beak-tama.art/fonts/rainyhearts.ttf') format('truetype');
} 

body {
font-family:rainyhearts;
color: black;
}

The following styles links.
For those who don't, check out the following links:
explaination of css | html tag and styling | body tag and styling
the CSS universal (*) selector selects all elements of any type.

a, a:visited {
    color: #0078a8;
}

a:active, a:hover {
    color: #ff40ac;
}

The following were changes that I made. you can read about the psudo-classes I've used here and see the options for customising.

a:link { 
color:white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding:2px;    
transform: rotate(-10deg) scale(120%);
transition: all 0.3s ease-in-out 0s;
}

a:visited {
text-decoration: none;
color:black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
padding:2px;   
}

a:hover {
text-decoration: underline;
font-style:italic;
color:black;  color:black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
padding:2px;  
}

a:active {
border: 1.5px black;
border-top-style: none;
border-right-style: none;
border-bottom-style: groove;
border-left-style: none;
background-color:white;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
padding:2px;
}

Because the site has a lot of pixel graphics they are choosing to make sure any images rendered are pixelated. Read about the image-rendering property here. You likely dont want to change this.

img {
    image-rendering: pixelated;
}

I added some other styling that related to images, however they were more relevant to include in other classes/elements which you will see later.

I added a @media rule

I am getting tired I will keep working on this later!


.colname {
    background-color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
    text-align: center;
}


.coloreditor {
    display: flex;
    flex-flow: row nowrap;
}

.colorslider {
    display: inline-block;
    margin: 8px;
    max-width: 100%;
    min-width: 200px;
    width: 95%;
}

.colorslider[class*="blue"] .ui-slider-handle {
    background: #4af;
    border: 1px solid #00c;
    color: #2779aa;
    font-weight: 700;
}

.colorslider[class*="green"] .ui-slider-handle {
    background: #3a3;
    border: 1px solid #060;
    color: #2779aa;
    font-weight: 700;
}

.colorslider[class*="red"] .ui-slider-handle {
    background: #faa;
    border: 1px solid #c00;
    color: #2779aa;
    font-weight: 700;
}

.colorsliders {
    display: inline-block;
    margin-right: 8px;
    width: 60%;
}

.colorsliders * {
    box-sizing: border-box;
    vertical-align: middle;
}

.colorswatches {
    display: inline-flex;
    flex-flow: row wrap;
    height: 100%;
}

.colorvalue {
    display: inline-block;
    margin: 4px;
    max-width: 20%;
}


.contestimg1 {
    height: auto;
    max-width: 540px;
    width: 90vw;
}

.contestimg2 {
    height: auto;
    max-width: 175px;
    width: 90vw;
}


.editequip {
    text-align: left;
}

.editequip .odd,
.editequip .even {
    margin-bottom: 2px;
}

.editequip input[type="button"] {
    float: right;
    margin: 0.5em auto auto 10px;
}

.editequip table td {
    text-align: center;
    width: 50%;
}


.even {
    background-color: rgba(255, 255, 255, 0.6);
}

.evenhidden,
.oddhidden {
    display: none;
    position: absolute;
}

.familyeven {
    background-color: rgba(255, 255, 255, 0.6);
    margin: 2px;
    min-height: 40px;
}

.familymember {
    display: inline-block;
    margin: 10px;
}

.familyodd {
    background-color: rgba(255, 255, 255, 0.35);
    margin: 2px;
    min-height: 40px;
}


.hamburger,
.hamburgerlinks,
#headermobilehack,
.editequip table,
#mobilead {
    display: none;
}


.homepage {
    margin: auto;
    max-width: 100%;
    padding-top: 20px;
    text-align: center;
}

.homepage img {
    height: auto;
    max-width: 430px;
    width: 100%;
}


.inline {
    display: inline;
}


.itemdescription {
    font-style: italic;
}


.leaderboardpagelinkcurrent {
    background-color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.leaderboardpagelinks,
.leaderboardpagelinkcurrent {
    display: initial;
    margin: auto 5px 10px;
    padding: 5px;
}

.leaderboardpagelinks,
.odd {
    background-color: rgba(255, 255, 255, 0.35);
}

.leadertext {
    padding-bottom: 50px;
    text-align: center;
}


.loginleft {
    float: left;
    text-align: left;
    width: auto;
}

.loginright {
    float: right;
    text-align: right;
}


.modname {
    color: #4682b4;
    font-weight: 700;
}


.petlistimgholder {
    height: 60px;
    width: 10%;
}


.specialusernotamas {
    font-weight: 700;
    margin: auto;
    padding: 20px 0;
    text-align: center;
    width: 100%;
}


.swatch {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    height: 24px;
    margin: 4px;
    transition: box-shadow 0.1s ease;
    width: 24px;
}

.swatch:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}


.tabletitle, .bold {
    font-weight: 700;
}


.username {
    color: #ff59b7;
    font-weight: 700;
}

.username a {
    text-decoration: none;
    color: inherit;
}

.username a:hover {
    text-decoration: underline;
}


.center {
    text-align: center;
}


#accountsettings {
    text-align: center;
    width: 60%;
}

#accountsettings input[type="text"],
#accountsettings input[type="password"],
#adminpanel input[type="text"] {
    width: 90%;
}


#custom_css {
    width: 100%;
    min-height: 300px;
}


#ad {
    font-size: small;
    margin: 20px auto auto;
    max-height: 112px;
    max-width: 728px;
    text-align: center;
}


#adminpanel select {
    width: 97%;
}

.admin-search-confirm {
    color: #0078a8;
    font-size: 0.85em;
    margin-left: 6px;
}

#adminpanel,
#adminpanelbiglist {
    text-align: center;
    width: 100%;
}


#adoptpagepw {
    margin: auto;
    text-align: center;
    width: 50%;
}


#announcements {
    background-color: #c8efff;
    border-radius: 18px;
    font-weight: 700;
    margin: 15px auto -8.5%;
    max-width: 1100px;
    min-width: 728px;
    padding: 10px;
    position: relative;
    text-align: center;
}

#announcements #announcementsholder {
    padding: 0 30px;
}

#announcements-empty {
    margin: 0px auto -8%;
    position: relative;
}


#content {
    min-height: 250px;
    padding: 10px 48px 0;
}


#credits,
.contest {
    text-align: center;
}


#embedmain {
    margin: 20px auto;
}

#embedtable {
    margin: auto;
    text-align: center;
    width: 100%;
}

#embedtable input {
    width: 95%;
}


#familymain {
    margin: auto auto 5%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}


#footer {
    color: #a6adb4;
    font-size: 80%;
    margin: 0 auto;
    max-width: 70%;
    min-width: 728px;
    text-align: center;
    clear: both;
    padding-top: 25px;
}

#footerbadges {
    margin-top: 15px;
}


#header {
    background-color: rgba(245, 250, 255, 0.95);
    color: #000;
    left: 0;
    line-height: 150%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    padding: 4px;
    height: 65px;
}

#headercontainer {
    float: left;
    height: 100%;
    width: 100%;
}

#headerlinks {
    float: right;
    max-width: 80%;
    text-align: right;
    padding-right: 8px;
    margin-top: 5px;
}

#headerlogo {
    height: 100%;
    position: absolute;
}

#headerlogo a,
#headerlogo a:active,
#headerlogo a:hover,
#headerlogo a:visited,
.leaderboardpagelinks a,
.leaderboardpagelinkcurrent a {
    text-decoration: none;
}


#itemeditor {
    float: left;
    text-align: center;
    width: 100%;
}


#lead-mini {
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

#leaderboard,
#mypetstable {
    text-align: center;
    width: 100%;
}

#leaderboardlinksholder {
    margin: 1em auto -5%;
    text-align: center;
}


#logoimg {
    bottom: -5px;
    height: 100%;
    left: 5px;
    max-height: 36px;
    position: relative;
    width: auto;
}

#logoimg:hover {
    animation: wobble 0.2s ease-in-out infinite;
}

#logotext {
    bottom: -5px;
    height: auto;
    max-height: 40px;
    min-height: 10px;
    position: relative;
    right: -10px;
    width: auto;
}


#main {
    background-image: linear-gradient(to bottom, #f3fbff, rgba(240, 248, 255, 0) 70%);
    border-radius: 18px;
    color: #000;
    margin: 10% auto 4%;
    max-width: 1100px;
    min-width: 728px;
    position: relative;
}


#parade {
    height: 50px;
    width: 100%;
    overflow: hidden;
    margin: 5px 0px;
}

#paradeField {
    display: flex;
    width: 200%;
    animation: scrolling-pets 50s linear infinite;
}
#paradeField:hover {
    animation-play-state: paused;
}

#paradeField img {
    margin: 0px 10px;
}


#petholder {
    background-color: rgba(255, 255, 255, 0.7);
    float: right;
    height: 100%;
    text-align: center;
    width: 48%;
    border-radius: 50%;
}

#petholder img {
    position: relative;
    top: 55px;
}

.alignme {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#petholder span {
    position: relative;
    top: 35%;
}

#petmakermain {
    display: flex;
    margin: auto;
    width: 100%;
}

#petmodifier {
    float: left;
    text-align: center;
    width: 100%;
}

#petpreview {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    margin: 10px auto;
    min-height: 150px;
    text-align: center;
    border-radius: 50%;
    max-width: 50%;
}

#petpreview .alignme {
    position: static;
    top: auto;
    transform: none;
}

#petprofileadopt {
    height: 125px;
    width: 100%;
}

#petprofilemain {
    height: 200px;
    width: 100%;
}

#petprofileoptions {
    height: 100%;
}

#petprofilesignup {
    background-color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    margin: 10px auto;
    max-width: 80%;
    padding: 5px;
    position: relative;
}

#petprofiletext,
#petprofiletextadopt {
    float: left;
    height: 100%;
    text-align: center;
    width: 48%;
}


#profileflavortext {
    background-color: rgba(240, 248, 255, 0.5);
    margin: 50px auto;
    padding: 10px 20px;
    width: 100%;
}


#shade1 {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url("/includes/img/dots.png") repeat 0 0;
    animation: bg-scrolling-reverse 7s linear infinite;
}


#stats {
    height: 200px;
    margin: auto;
    text-align: center;
    width: 100%;
}

#statsleft {
    float: left;
    text-align: center;
    width: 48%;
}

#statsright {
    float: right;
    text-align: center;
    width: 48%;
}


#title {
    color: #82c3dd;
    font-size: 150%;
    font-weight: 400;
    padding: 20px 20px 0;
}


#twittercontainer {
    background-color: rgba(255, 255, 255, 0.5);
}

#wrapper {
    padding: 70px 10px 40px 10px;
    /*margin: 10px;*/
    overflow: hidden;
}


/* Junk */
#decorations {
    background-color: red;
    max-width: 1100px;
    min-width: 728px;
    position: relative;
    margin: 10% auto 5%;
    pointer-events: none;
}

#sunburst {
    position: absolute;
    width: 1300px;
    top: -630px;
    right: -630px;
    z-index: -1;
    filter: brightness(200%);
    animation-name: spin;
    animation-duration: 200000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

some draft edits on my profile

@font-face {
	font-family: 'rainyhearts'; /* 13px font size looks good */
	src: url('https://beak-tama.art/fonts/rainyhearts.woff') format("woff");
	src: url('https://beak-tama.art/fonts/rainyhearts.ttf') format('truetype');
}

body {
font-family:rainyhearts;
color: black;
}

#shade1 {
background: #fff url("https://cyberbeak.neocities.org/img/bg/blue.png") !important;
animation: none !important;
}

#sunburst {-webkit-mask-image: url("https://beak-tama.art/theme/mori-kei/Sc.gif") !important;
mask-image:url("https://beak-tama.art/theme/mori-kei/Sc.gif") !important;
mask-composite: exclude;}

#header { background-image:url("https://cyberbeak.neocities.org/img/bg/stars.gif");
    background-color: black;
    border-radius:3px 3px 0px 0px;
    box-shadow: 5px 5px 5px black;
}

#announcements {
display:none;

}
#footer{
 background-image:url("https://cyberbeak.neocities.org/img/bg/stars.gif");
    border: 2px black;
      border-top-style: groove;
      border-right-style: groove;
      border-bottom-style: none;
      border-left-style: groove;
    background-color: black;
    border-radius:3px 3px 0px 0px;
    box-shadow: 5px 5px 5px black;
    font-family:rainyhearts;
max-width:1096px;

}

#main {
padding: 0 0 10px 0;
margin: 10% auto 10px auto !important;
background-image: none !important;
}

#title{ 
color:black;
font-family:rainyhearts;

}
h1{ background-image:url("https://cyberbeak.neocities.org/img/bg/stars.gif");
    border: 2px black;
      border-top-style: groove;
      border-right-style: groove;
      border-bottom-style: none;
      border-left-style: groove;
    background-color: black;
    border-radius:3px 3px 0px 0px;
    box-shadow: 5px 5px 5px black;
  padding: 4px;
  padding-left: 0;
  margin-top:-10px;
font-color:black;
font-family:rainyhearts;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  padding:2px;
}

h1::before{
content:url('https://beak-tama.art/theme/ufopix.png');
padding:0 5px 0 10px;
}

h1::after{
content:' ⋆౨ৎ˚⟡˖ ࣪';
}

#mypetstable img:hover {
animation: wobble 0.2s ease-in-out infinite;
}

#content{background-image:url("https://cyberbeak.neocities.org/img/bg/stars.gif");
    border: 2px black;
      border-top-style: groove;
      border-right-style: groove;
      border-bottom-style: none;
      border-left-style: groove;
    background-color: black;
    border-radius:3px 3px 0px 0px;
    box-shadow: 5px 5px 5px black;
    font-family:rainyhearts;
font-color:black;
font-family:rainyhearts;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  padding:2px;content:' This looks crazy rn cuz im editing the css lol. Find me at beak-tama.art  ';
}
#content::before{padding:2px;content:' This looks crazy rn cuz im editing the css lol. Find me at beak-tama.art  ';
}

.cols {
    display: grid;
    border: 2px groove grey;
    border-radius:0px 0px 3px 3px;
    padding:20px;
    background: #fff url("https://cyberbeak.neocities.org/img/bg/sky.png");
    box-shadow: 5px 5px 5px grey;
    width:800px;
    margin: auto;
}

a:link { color:white;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  padding:2px;    
transform: rotate(-10deg) scale(120%);
transition: all 0.3s ease-in-out 0s;
}

a:visited {
  text-decoration: none;
  color:black;   text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  padding:2px;   
}

a:hover {
  text-decoration: underline;
  font-style:italic;
  color:black;  color:black;   text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  padding:2px;  
}

a:active {
    border: 1.5px black;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: groove;
      border-left-style: none;
    background-color:white;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  padding:2px;
}

@media (min-width: 650px) {
    .cols {
        grid-template-columns: 1fr 2fr;
        grid-gap: 2em;
    }
}

#leaderboard, #lead-mini {
display:none;
}

::selection {
  color: white;
  background: lightgrey;
    text-shadow:0 0 1.5px var(--black);
}
::-moz-selection {
  color: white;
  background: lightgrey;
    text-shadow:0 0 1.5px #000000;
}
::-webkit-scrollbar {
width: 16px;
height: 16px;
}

::-webkit-scrollbar-track {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
image-rendering: pixelated;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

::-webkit-scrollbar-track:active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

::-webkit-scrollbar-thumb {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background-color: #cccccc;
z-index: 1;
}

::-webkit-scrollbar-corner {
background-color: #cccccc;
}

::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
}

::-webkit-scrollbar-button, ::-webkit-scrollbar-button {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
display: block;
width: 16px;
height: 16px;
background-color: #cccccc;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center center;
}

::-webkit-scrollbar-button:active, .scroll::-webkit-scrollbar-button:active {
background-position: 2px 2px;
}

::-webkit-scrollbar-button:horizontal:decrement, .scroll::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

::-webkit-scrollbar-button:horizontal:increment, ::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:decrement, ::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:increment, ::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:horizontal:increment:start, .scroll::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

::-webkit-scrollbar-button:horizontal:decrement:end, .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

::-webkit-scrollbar-button:vertical:increment:start, ::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

::-webkit-scrollbar-button:vertical:decrement:end, ::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}

inspo from and shoutout to https://tamanotchi.world/u/20202 https://larvapuppy.neocities.org/