html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* My actual code and styles  */


@-moz-document url-prefix() {
  :root {
    scrollbar-width: thin;
    scrollbar-color: #43FF36 #071031;
    cursor: url("../assets/Arrow\ texture.png"), auto;
}
  dialog {
    scrollbar-width: thin;
  }

}

@font-face {
    font-family: 'New font';
    src: url('../fonts/851h-kktt-fixed.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Mood';
  src: url('../subpages/sub_fonts/CozetteVector.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Cubular Title';
  src: url('../fonts/cubular-title-pixelated.ttf');
  font-weight: normal;
  font-style: normal;
}

html {
cursor: url("../assets/pixels/Arrow texture.png"), auto;  
}
      
body {
image-rendering: pixelated;
background: url("../assets/textures/About\ metal_2.png"), url("../assets/textures/About\ metal_3.png"), url("../assets/textures/About\ metal.png"), rgb(70, 6, 153);
background-position: center top, center bottom, center;
background-repeat: repeat-x, repeat-x, repeat;
width: 100%;
min-width: fit-content;
min-height: 100%;
color: rgb(243, 218, 107);
font-family: 'New font';
overflow-x: hidden;
cursor: url("../assets/pixels/Arrow texture.png"), auto;
text-rendering: optimizeLegibility;
}
      
      
a:link {
color: rgb(187, 236, 255);
text-shadow: 0 1px 0 rgb(0, 3, 177);
text-decoration: none;
cursor: url("../assets/Arrow pointer texture.png"), url("../assets/Arrow texture.png"), none;
}
a:hover {
color: rgb(243, 255, 135);
}
a:active {
color: deepskyblue;
}

*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #071031;
}

*::-webkit-scrollbar-track:hover {
  background-color: #022157;
}

*::-webkit-scrollbar-track:active {
  background-color: #3D0997;
}

*::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #43FF36;
  border: 1px dashed #B5FF7C;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #25E859;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #21CEC3;
}

.structure {
display: grid;
grid-template-columns: 240px 170px 172px 200px 206px 100px;
grid-template-rows: 220px 144px 125px 102px 100px 150px 200px 80px 35px;
column-gap: 3px;
row-gap: 3px;
justify-content: center;
margin-top: 120px;
margin-bottom: 2%;
}
      
header {
grid-column: 1/2;
grid-row: 1/2;
width: 460px;
height: 69px;
padding: 5px;
margin-top: -100px;
pointer-events: none;
user-select: none;
}
      
nav {
grid-column: 1/2;
grid-row: 1/2;
background-image: url("../assets/squares/Nav\ square_2.png");
padding-right: 5px;
padding-left: 3px;
margin-top: 18px;
}

nav ul {
margin-top: 21px;
margin-left: 3px;  
}

.navheader {
grid-column: 1/2;
grid-row: 1/2;
z-index: 2;
margin-left: 20px;
margin-top: -5px;
pointer-events: none;
user-select: none;
}

h3 {
color: rgb(0, 0, 0);
font-family: 'Cubular Title';
font-weight: normal;
font-size: 26px;
text-shadow: 0 1px 0 rgb(235, 123, 18);
word-spacing: 3px;

}

p {
font-size: 17px;
margin-top: 0;
margin-bottom: 14px;
line-height: 22px;
}

ul, ol, dl {
font-size: 16px;
list-style-type: none;
margin-top: 5px;
word-spacing: -3px;
}
    
.menu {
line-height: 1.8;
z-index: 2;
position: relative;
}

.stamps_1 {
grid-column: 1/2;
grid-row: 2/3;
margin-left: 3px;
margin-top: 10px;
z-index: 3;
user-select: none;
}

.stamps_2 {
grid-column: 5/6;
grid-row: 4/5;  
width: 250px;
margin-left: 53px;
margin-top: 10px;
text-align: right;
z-index: 3;
user-select: none;        
}

.who {
grid-column: 4/5;
grid-row: 1/2;
margin-top: -95px;
margin-left: 18px;
z-index: 2;
}

.paper {
position: relative;    
grid-column: 2/4;
grid-row: 1/3;
background-image: url("../assets/textures/Paper\ texture_4.png");
background-repeat: no-repeat;
padding: 5px;
height: 180px;
margin-top: 50px;
margin-left: 47px;
color: rgb(43, 13, 6);
text-align: justify;
}

.sticker_4 {
grid-column: 3/4;
grid-row: 1/3;
margin-top: 30px;
margin-left: 65px;
z-index: 3;
pointer-events: none;
}

.paper h2 {
color: rgb(116, 0, 29);
text-shadow: none; 
}

.paper p {
margin-top: 9px;    
font-size: 17px;    
padding: 0 5px 0 5px;
line-height: 17px;
text-shadow: 0 1px 0 rgb(255, 107, 164);
z-index: 3;
}

.paper p span {
color: rgb(238, 75, 0);
text-shadow: 1px 1px 1px rgb(112, 0, 15);     
}

.paper_2 {
grid-column: 4/5;
grid-row: 2/3;
height: 190px;
width: 290px;
padding: 0 5px 0 5px;
margin-top: -48px;
margin-left: -100px;
background-image: url("../assets/textures/Paper\ texture_5.png");
border-bottom: 1px dashed rgb(58, 240, 97);
border-top: 1px solid rgb(58, 240, 97);
color: rgb(43, 13, 6);
z-index: 4;
}

.paper_2 p {
margin-top: 14px;
padding: 0 5px 0 5px;
line-height: 17px;
text-shadow: 0 1px 0 rgb(58, 240, 97);    
}

.mini_star {
grid-column: 4/5;
grid-row: 2/3;
z-index: 5;  
scale: 0.5;
margin-top: 115px;
margin-left: -30px;
pointer-events: none;
}

.paper_3 {
grid-column: 2/4;
grid-row: 2/3;    
background-image: url("../assets/textures/Paper\ texture_2.png");
width: 300px;
height: 304px;
margin-top: 130px;
margin-left: -80px;
color: rgb(43, 13, 6); 
z-index: 3;
}

.paper_3 p {
margin-top: 30px;
padding: 0 6px 0 6px;
line-height: 17px;
text-shadow: 0 1px 0 rgb(62, 182, 252);
}

.paper_3 p:last-child {
margin-top: 0;
}

.sticker_2 {
grid-column: 2/4;
grid-row: 2/3;
margin-top: 80px;
margin-left: -50px;
z-index: 4;
pointer-events: none;
}

.paper_4 {
grid-column: 1/3;
grid-row: 4/7;
background-image: url("../assets/textures/Paper\ texture_6.png");
transform: rotate(5deg);
transform-style: flat;
color: rgb(43, 13, 6);
width: 360px;
height: 405px;
margin-top: 100px;
z-index: 1;  
}

.sticker_5 {
grid-column: 1/2;
grid-row: 4/5;
z-index: 2;
margin-top: 72px;
margin-left: 40px;
}

.mini_star_2 {
grid-column: 2/3;
grid-row: 4/5;
margin-left: 100px;
margin-top: 153px;
z-index: 2;  
scale: 0.5;
pointer-events: none;
user-select: none;
}

.penny, .sonas, .web, .supplies {
z-index: 3;
}

.penny {
grid-column: 1/2;
grid-row: 5/6;
margin-top: 5px;
margin-left: 25px;
}

.sonas {
grid-column: 1/2;
grid-row: 5/6;
margin-top: 80px;
margin-left: 170px;
}

.web {
grid-column: 1/2;
grid-row: 5/6; 
margin-left: 40px;
margin-top: 170px;  
}

.supplies {
grid-column: 1/2;
grid-row: 6/7;
margin-left: 210px;
margin-top: 145px;
}

.bumper_2 {
grid-column: 1/2;
grid-row: 7/8;
z-index: 2;
margin-top: 75px;
margin-left: -5px;
transform: rotate(10deg);
}

.extra {
grid-column: 4/7;
grid-row: 1/4;
background-image: url("../assets/textures/Dark\ purple\ metal_2.png");
margin-left: 47px;
padding: 5px;
border: 1px dashed rgb(223, 18, 137);
color: orange;
}

.sona {
float: right;
margin-top: 40px;
margin-right: -20px;
margin-bottom: 10px;   
}

.badges {
width: 200px;
text-align: right;
margin-left: 250px;
position: relative;
z-index: 3;  
}

.age {
position: absolute;
margin-top: 260px;
margin-left: 180px;    
}

.mood {
float: right;
width: 108px;
clear: right;
background-color: rgb(97, 10, 114);
color: rgb(255, 222, 75);
height: 12px;
padding: 3px;
margin-right: 7px;
margin-top: 5px;
margin-bottom: 18px;
border: 1px dashed rgb(44, 174, 206);
}

.mood p { 
display: block;    
float: right;
margin-right: -3px; 
margin-top: -8px;  
}

.mood a img, .mood p img {
vertical-align: middle;
}

.flag {    
position: absolute;   
margin-top: 396px;
margin-left: 20px;
width: 75px;
border: 1px dotted rgb(193, 255, 47);
border-top: 1px solid rgb(193, 255, 47);
filter: hue-rotate(20deg);
transform: rotate(-10deg);
}

.dove {
position: absolute;
margin-top: 382px;
margin-left: 120px;
}

.splat {
grid-column: 1/2;
grid-row: 1/2;
z-index: 1;
margin-top: 163px;
pointer-events: none;
}

.splat_2 {
grid-column: 5/6;
grid-row: 2/3;
z-index: 2;
pointer-events: none;
margin-top: 234px;
margin-left: 16px;
}

.splat_3 {
  transform: rotate(0);
float: right;
position: absolute;
mix-blend-mode: overlay;
filter: hue-rotate(-80deg) drop-shadow(0 1px 0 rgb(38, 76, 201));
}

.bumper {
float: left;
clear: left;    
transform: rotate(-5deg);
margin-top: 130px;
margin-left: 5px;  
}

.particle {
grid-column: 2/3;
grid-row: 5/6;
margin-left: 90px;
margin-top: -50px;
filter: hue-rotate(-40deg);
}

.polka {
grid-column: 5/6;
grid-row: 6/7;
z-index: -1;
}

.checker {
grid-column: 1/2;
grid-row: 7/8;
margin-top: 30px;
}

.speech {
grid-column: 4/5;
grid-row: 6/7;
z-index: 4;
margin-left: 50px;
margin-top: -45px;
}

.puppets {
grid-column: 4/6;
grid-row: 6/7;
margin-top: -64px;
margin-left: -163px;
z-index: 3;
}

.board_2 {
grid-column: 4/6;
grid-row: 6/7;
height: 250px;
width: 350px;
background-image: url("../assets/textures/Paper\ texture_7.png");
margin-left: -50px;
margin-top: 130px;
transform: rotate(-5deg);
}

.bumper_3 {
grid-column: 4/6;
grid-row: 6/7;  
margin-left: -25px;
margin-top: 170px;
transform: rotate(-10deg);
z-index: 2;
}

.sticker_1 {
grid-column: 4/6;
grid-row: 6/7;
margin-top: 98px;
margin-left: 190px;
z-index: 3; 
}


footer {
grid-column: 1/3;
grid-row: 9/10;
width: 440px;
background-color: rgb(182, 0, 112);
color: rgb(255, 222, 75);
border: 1px dashed rgb(79, 107, 230);
text-align: center;
align-content: center;
}

.quizzes {
grid-column: 3/4;
grid-row: 7/8;
margin-top: 100px;
margin-left: 90px;
z-index: 3;
}

.interests {
grid-column: 4/5;
grid-row: 7/8;
margin-top: 110px;
margin-left: 106px;
z-index: 3; 
}


/* Dialog styles */


select:focus {
outline: none;
}

dialog {
background: transparent;
padding: 1px;
overflow-x: hidden;
border: 0;
inset: auto;
top: 30px;
left: 0;
right: 0;
bottom: 30px;
margin: auto;
}

dialog::backdrop {
  background: url("../assets/textures/Star\ texture.png");
  opacity: 0.6;
}

dialog:focus {
outline: none;
}

dialog a:focus {
outline: none;
}

.dialog-content {
  background-color: transparent;
  text-align: center;
  position: relative;
}  

.dialog-content:focus {
outline: none;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: url("../assets/pixels/Arrow\ pointer\ texture.png"), pointer;
}

/* Dialog styles! */

.neocities .dialog-content, .ladies .dialog-content, .design .dialog-content, .art .dialog-content { 
height: 570px;
width: 1050px;
overflow-y: hidden;
}

.neocities .dialog-content::-webkit-scrollbar, .ladies .dialog-content::-webkit-scrollbar, 
.design .dialog-content::-webkit-scrollbar, .art .dialog-content::-webkit-scrollbar {
width: 0;
height: 0;
}


.neo_grid, .design_grid, .art_grid {
display: grid;  
grid-template-columns: 390px;
grid-template-rows: 50px 490px 50px;
justify-content: center;
margin-top: 30px;
}

.ladies_grid {
display: grid;  
grid-template-columns: 450px;
grid-template-rows: 50px 490px 50px;
justify-content: center;
margin-top: 30px;
}


.logo {
grid-column: 1/2;
grid-row: 1/2;
z-index: 2;
margin-top: -20px;
margin-left: -100px;
}

.neo_box, .ladies_box, .design_box, .art_box {
grid-column: 1/2;
grid-row: 2/3;  
background-color: rgb(226, 222, 0);
margin: 5px 5px 0 5px;
padding: 5px;
border: 1px dashed rgb(223, 126, 0);
text-align: justify;
text-shadow: 0 1px 0 rgb(162, 255, 75);
line-height: 23px;
font-size: 16px;
}

.neo_text {
overflow-y: scroll;
height: 475px;
outline: none;
}

.neo_text::-webkit-scrollbar {
width: 0;
height: 0;
}

.neo_text img {
text-align: center;
}

/*Design*/

.design .design_box {
background-color: rgb(87, 240, 49);
border: 1px dashed rgb(79, 107, 230);
text-shadow: 0 1px 0 rgb(0, 199, 156);
}


.design_text {
overflow-y: scroll;
height: 475px;
outline: none;
}

.design_text::-webkit-scrollbar {
width: 0;
height: 0;
}

/*Sonas*/

.ladies .ladies_box {
background: rgb(223, 126, 0);
border: 1px dashed rgb(175, 55, 0);
text-shadow: 0 1px 0 rgb(255, 104, 35);
text-align: center;
}

.ladies_text {
overflow-y: scroll;
height: 460px;
outline: none; 
}

.ladies_text p {
font-size: 16px;
text-align: justify;
text-shadow: 0 1px 0 rgb(255, 84, 118);
background-color: rgb(255, 147, 115);
padding: 5px;
width: 90%;
margin-left: auto;
margin-right: auto;
}

.ladies_text::-webkit-scrollbar {
width: 0;
height: 0;
}

/* Supplies */
.art .art_box {
background-color: rgb(110, 64, 194);
border: 1px dashed rgb(94, 0, 117);
text-shadow: 0 1px 0 rgb(197, 5, 197);
}

.art_text {
text-align: center;
overflow-y: scroll;
height: 460px;
outline: none; 
}

.art_text h3 {
text-shadow: none;
}

.art_text::-webkit-scrollbar {
width: 0;
height: 0;
}

.align {
display: flex;  
justify-content: space-around;
align-items: flex-end;
}

figure { 
width: 200px;  
display: flex;
flex-direction: column;
align-items: center;
vertical-align: middle;
text-align: center;
}

figure img {
display: block;

}

figcaption {
text-align: center;  
height: auto;
width: 140px;
padding: 3px;
margin-top: 5px;
background-color: rgb(132, 115, 207);
border: 1px dashed rgb(191, 184, 255);
text-shadow: 0 1px 0 rgb(82, 85, 243);
}
/* Quiz results */



.quiz .dialog-content {
height: 570px;
width: 1050px;
}

.quiz .dialog-content a:link {
color: rgb(0, 136, 106);
text-shadow: none;
text-align: left;
}

.quiz_grid {
display: grid;
grid-template-columns: 400px 380px 218px;
grid-template-rows: 250px 250px 250px;
column-gap: 3px;
row-gap: 3px;
}

.hotpink {
border: 3px solid deeppink;
}

.hotpink td {
padding: 5px;
}

.clown {
grid-column: 2/3;
grid-row: 1/2;
margin-top: 111px;
height: 160px;
width: 250px;
}

.donut {
grid-column: 2/3;
grid-row: 2/3;
margin-top: 21px;
margin-left: 20px;
}

.cheese {
grid-column: 3/4;
grid-row: 1/2;
}

.box {
display: block;
grid-column: 2/3;
grid-row: 1/2;
margin-left: 256px;
margin-top: 113px;
height: 70px;
width: 123px;
}

.color {
grid-column: 1/2;
grid-row: 2/3;
margin-top: 102px;
align-self: left;
}

.isopod {
grid-column: 2/3;
grid-row: 2/3;
margin-top: 154px;
margin-left: -79px;
}

.bear {
grid-column: 2/3;
grid-row: 3/4;
width: 255px;
margin-left: -39px;
margin-top: 5px;
}


.fairy {
grid-column: 2/3;
grid-row: 2/3;
margin-left: 180px;
margin-top: 150px;
}

.caramilk {
grid-column: 1/2;
grid-row: 2/3;
margin-top: 107px;
margin-left: 325px;
width: 88px;
height: 57px;
}

.aol {
grid-column: 2/3;
grid-row: 1/2;
margin-top: 220px;
margin-left: 257px;
}

.tomato {
grid-column: 2/3;
grid-row: 1/2;
background-color: rgb(141, 255, 146);
border: 1px solid;
font-size: 13px;
width: 380px;
height: 80px;
padding: 2px;
}

.tomato img {
margin-right: 5px;
}

.tomato td {
padding: 3px;
}

.results {
grid-column: 3/4;
grid-row: 1/2;
margin-top: 76px !important;

text-align: center; 
}

.results p {
font-family: Courier;
font-size: 14px;
}

.lipstick {
grid-column: 3/4;
grid-row: 2/3;
background-color: white;
width: 208px;
font-size: 13px;
font-family: MS Gothic, "Courier New";
border: 1px solid black;
margin-top: 103px;
margin-left: 2px;
}

.lipstick td {
padding: 5px;
}

.lipstick img {
border: 1px solid black;
}

.poem {
grid-column: 1/2;
grid-row: 3/4;
margin-top: 15px;
}

.clan {
grid-column: 1/2;
grid-row: 3/4;
margin-left: 268px;
margin-top: 16px;
}

.rice {
grid-column: 2/3;
grid-row: 3/4;  
margin-top: 3px;
margin-left: 180px;
}

.icecream {
grid-column: 1/2;
grid-row: 3/4;
margin-top: 175px;
}

.pooh {
grid-column: 2/3;
grid-row: 3/4;
margin-top: 186px;
margin-left: 165px; 
}

.spongebob {
grid-column: 3/4;
grid-row: 3/4;
margin-top: 176px;
margin-left: -30px;
}

.ppg {
grid-column: 2/3;
grid-row: 3/4;
margin-top: 177px;
margin-left: -108px;
}


/* My interests */


.likes .dialog-content {
height: 570px;
width: 1050px;
overflow-y: visible;
}

.likes_grid {
display: grid;
grid-template-columns: 250px 250px 250px 250px;
grid-template-rows: 250px 250px 450px 180px 250px 250px;
column-gap: 3px;
row-gap: 3px;
}

.info {
grid-column: 3/5;
grid-row: 1/2;
background: url("../assets/textures/Paper\ texture_6.png");
padding: 5px;
}

.info_flex {
display: flex;
justify-content: space-around;
margin-top: 50px;
}

.yes, .no {
background-image: url("../assets/textures/Paper\ texture.png");
background-position: top;
filter: hue-rotate(150deg);
border: 1px solid rgb(0, 94, 0);
border-bottom-color: black;
width: 245px;
height: max-content;
z-index: 2;
}

.yes::selection, .no::selection {
color: white;
background: rgb(158, 194, 0);
}

.no {
margin-left: 5px;
}

.yes ul, .no ul {
list-style-type: square;
margin-left: 20px;
line-height: 23px;
}

.yes li, .no li {
text-align: left;
}

.happy {
grid-column: 3/4;
grid-row: 1/2;
z-index: 2;
}

.frown {
grid-column: 4/5;
grid-row: 1/2;
z-index: 2;
}

.happy, .frown {
margin-left: 110px;
margin-top: 10px;
}

/*Blorbos*/

.flowers {
grid-column: 2/3;
grid-row: 1/2;
margin-left: -202px;
margin-top: 17px;
z-index: -1;
}

.blorbos {
grid-column: 2/3;
grid-row: 1/3;
background-image: url("../assets/textures/Paper\ texture_7.png");
padding: 5px;
border: 1px dashed rgb(246, 255, 113);
width: 331px;
height: 316px;
margin-left: -94px;
}

.blorbo_box {
overflow-y: scroll;
height: 316px;
outline: none;  
}

.blorbo_flex {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 5px;
}

.blorbo_flex img {
border: 1px solid black;
}

/*Games corner*/

.game_header {
grid-column: 1/2;
grid-row: 3/4;
margin-top: -50px;
margin-left: 8px;
z-index: 2;
}

.games {
grid-column: 1/3;
grid-row: 3/4;
background: url("../assets/textures/Paper\ texture_4.png");
background-repeat: repeat;
height: 237px;
padding: 5px;
border-bottom: rgb(0, 255, 0);
text-align: center;
margin-top: -17px;
z-index: 1;
}

.game_box {
display: flex;  
justify-content: flex-start;
flex-wrap: wrap;
gap: 5px;
}

.game_box img {
filter: drop-shadow(0 2px 3px rgb(158, 194, 0));
}

/*Shows*/

.shows_header {
grid-column: 4/5;
grid-row: 4/5;
margin-top: 115px;
margin-left: -5px;
}

.shows {
grid-column: 4/5;
grid-row: 5/6;
width: 239px;
margin-left: 5px;
}

.shows_box {
overflow-y: scroll;
direction: rtl;
height: 240px;
outline: none;  
}

.shows_flex {
display: flex;
justify-content: right;
flex-wrap: wrap;
gap: 5px;
}

/*Userboxes*/

.userboxes {
grid-column: 4/5;
grid-row: 6/7;
}

/*Movies*/

.movies_header {
grid-column: 1/3;
grid-row: 4/5;
margin-top: 115px;
}

.movies {
grid-column: 1/3;
grid-row: 5/6;
height: 402px;
}

.movies_box {
overflow-y: scroll;
height: 402px;
outline: none; 
}

.movies_flex {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 5px;
}

.movies_flex img {
border: 1px solid black;
}

/*Little badges*/
.mini_badges {
grid-column: 1/3;
grid-row: 6/7;
margin-top: 170px;
}

.badges_flex {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 4px;
}

/*Songs*/

.songs {
grid-column: 3/5;
grid-row: 2/4;
margin-top: 80px;
background: url("../assets/textures/Paper\ texture_6.png");
z-index: 1;
padding: 5px;
border: 1px dashed rgb(0, 255, 0);
}

.intro_sticker {
position: relative;
margin-top: -35px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0;
}

.song_intro {
float: left;  
height: 175px;
width: 198px;
margin-top: 40px;
margin-left: 1px;
text-align: left;

background-color: rgb(180, 88, 255);
border-image-slice: 20 20 20 20;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 9px 10px 9px 10px;
border-image-repeat: stretch stretch;
border-image-source: url("../assets/borders/Wobbly\ border_2.gif");
border-style: solid;
}

.song_intro p {  
padding: 6px;
font-size: 16px;
text-shadow: 0 1px 0 rgb(208, 109, 212);
}

.song_box {
background-image: url("../assets/textures/Water\ texture.png");
border: 1px dashed rgb(0, 224, 176);
height: 348px;
background-position: center;
width: auto;
padding: 5px;
text-align: right;
margin: 28px auto 10px auto;
}

.song_flex {
text-align: left;
}

.song_flex img {
position: relative;
margin-left: 5px;  
z-index: 2;
}

.composers, .genres {
background-image: url("../assets/textures/Paper\ texture_2.png");
background-position: top;
filter: hue-rotate(80deg);
padding: 14px 5px 5px 5px;
width: auto;
text-align: justify;
line-height: 17px;
margin-top: -15px;
}

.composers {
margin-bottom: 5px;
}

#winampPlayer {
width: 275px;
height: 350px;
overflow-y: hidden;
}

/*Dropdown styles*/

.collapsible {
cursor: url("../assets/pixels/Arrow pointer texture.png"), pointer;   
height: 96px;
width: 266px;
float: right;
margin-top: -130px;
margin-right: -1px;
padding: 3px;
border: 3px double rgb(175, 55, 0);
background-color: rgb(210, 255, 10);
box-shadow: 0 3px 3px rgb(175, 55, 0);
}
.collapsible:hover{
background-color: rgb(255, 146, 197);
}
.content {
display: flex;  
justify-content: flex-start;
flex-wrap: wrap;
margin-top: -34px;
gap: 5px;
padding: 0;
width: 254px;
max-height: 0;
overflow: hidden;
float: right;
background-image: url("../assets/textures/Paper\ texture_5.png");
transition: max-height 0.3s ease-in-out;
}

.content.open {
max-height: fit-content;
padding: 34px 4px 4px 4px;
border: 1px dashed rgb(175, 55, 0);
box-shadow: inset 0 3px 0 rgb(175, 55, 0);
border-top: none;
}