:root[data-theme="light"] {
--bordercolor:#fcb3c8;
--containercolor:#9aecf5;
--scrollboxcolor:#ffc7d6;
--textcolor:#2f6282;
--name:#f19eb5;
--textnamecolor: #2f6282;
--activebutton:#faa7be;
--hoverbutton:#ffd9e3;
--hover:#ffe3ea;
--shadow:#ccebff;
--acolor:#ff6eaa;
--background:#eb88af;
}

:root[data-theme="dark"] {
--bordercolor:#7ecff4;
--containercolor:#d67691;
--scrollboxcolor:#56acd1;
--textcolor:#f6d7fc;
--name:#4fc4ff;
--textnamecolor: #f6d7fc;
--activebutton:#5fb5d9;
--hoverbutton:#72ccf2;
--hover:#84d7fa;
--shadow:#b34973;
--acolor:#94e1ff;
--background:#66a2e3;
}

body {
background-color: var(--background);
}

#theme-toggle, #notifications-toggle, .site-header p, .paste-info {
color: var(--textcolor) !important;
}

.container {
border: solid 4px var(--bordercolor);
border-radius: 10px;
background-color: var(--containercolor);
}

audio {
width: 250px;
height: 50px;
border: solid white;
border-radius: 20px;
background-color: white;
}

.sylveon {
position:absolute;
margin-top: -350px;
margin-left: 900px;
}

a{
text-decoration: underline wavy; 
color: var(--acolor);
}

strong {
        text-shadow: 2px 0px 0px var(--shadow), -2px 0px 0px var(--shadow), 0px 2px 0px var(--shadow), 0px -2px 0px var(--shadow);
}

.audio {
  justify-content: flex-end;
width: 25%;
}

.name  {
font-family:"cutesunrise";
font-size: 6rem; 
  transform: rotate(-20deg);
position:absolute;
margin-left: -25px;
margin-top: -60px;
color: var(--textnamecolor);
}

.userboxes {
width: 75%;
margin-left: 10px;
}

.bottom {
padding: 20px;
}

.footer {
  display: flex;
}


.button:hover {
background-color: var(--hoverbutton);
border: 3px outset var(--hover);
}

.button:active {
border: 3px inset var(--bordercolor);
background-color: var(--activebutton);
}

.button {
border-radius: 10px;
color: var(--textcolor);
border: 3px outset var(--bordercolor);
background-color: var(--scrollboxcolor);
}

button:hover {
background-color: var(--hoverbutton);
border: 3px outset var(--hover);
}

.site-footer {
display:none;
}

button:active {
border: 3px inset var(--bordercolor);
background-color: var(--activebutton);
}

button {
border-radius: 10px;
color: var(--textcolor);
border: 3px outset var(--bordercolor);
background-color: var(--scrollboxcolor);
padding: 5px;
}

.buttons {
float:right;
width: 250px;
text-align:center;
padding: 14px;
}

.scrollbox p {
color: var(--textcolor);
margin:0;
 }

.scrollbox {
overflow: auto;
height: 350px;
width: 700px;
border: solid 4px var(--bordercolor);
border-radius: 10px;
padding: 15px;
background-color: var(--scrollboxcolor);
}

.middle-text {
text-align: center;
float:left;
width: 730px;
color: var(--textcolor);
}

.middle {
text-align: center;
float:left;
width: 100%;
}

.header {
display:flex;
  justify-content: flex-end;
border: 1px;
padding: 10px;
}

.header img {
width: 55px;
}

#color {
color: var(--name);
font-family:"cutesunrise";
font-size: 10rem;
}

.text-container {
background-color:transparent;
}

    @font-face {
        font-family: "cutesunrise";
        src: url(https://file.garden/aBi0tvXzESnPXzr_/Cute%20Sunrise.otf)
    }

.icecream-left {
  float: left
}

.icecream-right {
  float: right
}

.moodboard {
  display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
}

.moodboard-img {
  width: 200px;
   height: 200px;
    }
}

/*boring stuff that makes the pages work DONT DELETE IT!!!!*/

html {
    scroll-padding-top: 100px;
}

.page {
    display: none; 
}
    
.page:target {
    display: block;
}

body:not(:has(:target)) #page1 {
    display: block;
}