/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

element.style {
}
body {
    background-color: rgb(255, 246, 120);
    background-repeat: repeat-x;
}
body[Attributes Style] {
    background-image: url(website assets/website_background.jpg);
}
user agent stylesheet
body {
    display: block;
    margin: 8px;
}

#sitecontainer {
    margin: auto;
    margin-top: 35px;
    margin-bottom: 50px;
    height: 1030px;
    width: 820px;
    background-color: rgb(250, 214, 182);
    border: 7px solid rgb(211, 41, 89);
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgb(233, 116, 33);
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.bannerimage {
    background-color: rgb(229, 255, 0);
    height: 180px;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
}

.bannerimage {
    background-color: rgb(229, 255, 0);
    height: 180px;
}

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.navbar {
    width: 100%;
    background-color: rgb(211, 41, 89);
    overflow: auto;
}

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.navbar a {
    font-family: bahnschrift;
    float: left;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 21px;
    font-weight: bold;
    width: 16.6%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar a {
    font-family: bahnschrift;
    float: left;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 21px;
    font-weight: bold;
    width: 16.6%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar a {
    font-family: bahnschrift;
    float
Specifies how a box should be floated. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: left;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 21px;
    font-weight: bold;
    width: 16.6%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar a {
    font-family: bahnschrift;
    float: left;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 21px;
    font-weight: bold;
    width: 16.6%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar a
Specificity: (0,1,1)
 {
    font-family: bahnschrift;
    float: left;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 21px;
    font-weight: bold;
    width: 16.6%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar a {
    font-family: bahnschrift;
    float: left;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 21px;
    font-weight: bold;
    width: 16.6%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar {
    width: 100%;
    background-color: rgb(211, 41, 89);
    overflow: auto;
}

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.maincontainer {
    display: grid
;
    grid-template-rows: 160px 160px 160px 160px 160px;
    grid-template-columns: 205px 410px 205px;
    margin: 0px;
    height: 800px;
    z-index: 0;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.sonaanchor {
    position: absolute;
    z-index: 0;
}

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.creatortext {
    position: absolute;
    top: 158px;
    left: 10px;
    width: 154px;
    z-index: 5;
}

user agent stylesheet
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

a:-webkit-any-link
Specificity: (0,1,1)
 {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.sonapic {
    position: absolute;
    left: -53px;
    top: -41px;
    width: 270px;
    z-index: 4;
    filter: drop-shadow(1px 3px rgb(239, 154, 49));
}
user agent stylesheet
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration
Decorations applied to font used for an element's text.

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: underline;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.sonaanchor {
    position: absolute;
    z-index: 0;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.leftstuff {
    margin-top: 217px;
    height: 518px;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.onlinegifbox {
    text-align: center;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.onlinegif {
    width: 115px;
    filter: drop-shadow(0px 0px 1px rgb(235, 129, 140));
}

user agent stylesheet
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
.onlinegifbox {
    text-align: center;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.onlinegifbox {
    text-align: center;
}

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.leftbreaks {
    border: 1px dashed rgb(235, 129, 140);
}
user agent stylesheet
hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    color: gray;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.bigtitle {
    font-family: bahnschrift;
    font-size: 22px;
    text-align: center;
    margin: 10px 0px 10px 0;
    color: rgb(211, 41, 89);
}

p {
    color: rgb(64, 6, 41);
    font-family: 'playpen sans';
}
user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.chatbox {
    position: absolute;
    height: 405px;
    width: 164px;
    border: 1px solid rgb(235, 129, 140);
    border-radius: 7px;
    background-color: rgb(250, 237, 228);
}
iframe[Attributes Style] {
    width: 100%;
    height: 450px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
user agent stylesheet
iframe {
    overflow-clip-margin: content-box !important;
    overflow: clip !important;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.leftstuff {
    margin-top: 217px;
    height: 518px;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

.leftside {
    grid-row: 1 / 6;
    grid-column: 1 / 2;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 20px 10px;
    font-size: 18px;
    padding: 10px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
}

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.welcometext {
    grid-row: 1 / 4;
    grid-column
Shorthand for 'grid-column-start' and 'grid-column-end'.

Widely available across major browsers (Baseline since April 2020)
Learn more

Don't show
: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}

.welcometext h1 {
    font-family: bahnschrift;
    font-size: 36px;
    text-align: center;
    margin: 4px 2px 20px 2px;
    color: rgb(113, 201, 158);
}
user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

.starry {
    width: 40px;
    padding: 0px 10px 0px 10px;
}
user agent stylesheet
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
.welcometext h1 {
    font-family: bahnschrift;
    font-size: 36px;
    text-align: center;
    margin: 4px 2px 20px 2px;
    color: rgb(113, 201, 158);
}
user agent stylesheet
h1 {
    font-size: 2em;
    font-weight: bold;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

.starry {
    width: 40px;
    padding: 0px 10px 0px 10px;
}

user agent stylesheet
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
.welcometext h1 {
    font-family: bahnschrift;
    font-size: 36px;
    text-align: center;
    margin: 4px 2px 20px 2px;
    color: rgb(113, 201, 158);
}
user agent stylesheet
h1 {
    font-size: 2em;
    font-weight: bold;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

.welcometext h1 {
    font-family: bahnschrift;
    font-size: 36px;
    text-align: center;
    margin: 4px 2px 20px 2px;
    color: rgb(113, 201, 158);
}
user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

hr.dotted {
    border: 1px dashed rgb(235, 129, 140);
}
user agent stylesheet
hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    color: gray;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

p {
    color
Sets the color of an element's text

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: rgb(64, 6, 41);
    font-family: 'playpen sans';
}

user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

b {
    font-weight: bolder;
}
p {
    color: rgb(64, 6, 41);
    font-family: 'playpen sans';
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

b {
    font-weight: bolder;
}
p {
    color: rgb(64, 6, 41);
    font-family: 'playpen sans';
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

p {
    color: rgb(64, 6, 41);
    font-family: 'playpen sans';
}
user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

p {
    color: rgb(64, 6, 41);
    font-family: 'playpen sans';
}
user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

hr.dotted {
    border
Shorthand property for setting border width, style, and color.

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: 1px dashed rgb(235, 129, 140);
}
user agent stylesheet
hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    color: gray;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}

.welcomebuttons {
    width: 100%;
    height: 40px;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.welcometext {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    background-color: rgb(251, 255, 227);
    margin: 20px 5px 10px 5px;
    text-align: left;
    font-size: 16px;
    padding: 25px 35px 35px 35px;
    border: 3px solid rgb(235, 129, 140);
    border-radius: 10px;
    font-family: 'playpen sans';
}