@import url('https://fonts.googleapis.com/css2?family=Moo+Lah+Lah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bonbon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bonbon&family=Yomogi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fascinate&display=swap');

@keyframes twitch {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(1px, -2px) rotate(-2deg); }
50% { transform: translate(-1px, 1px) rotate(2deg); }
75% { transform: translate(2px, 1px) rotate(1deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}

*
{
  box-sizing: border-box;
}


body {
  margin: 0;
  padding-right: 6rem;
  padding-left: 6rem;
  color: black;
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  background-color: #80CC23;
  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='39' height='47' viewport='0 0 100 100' style='fill:black;font-size:23px;'><text y='50%'>🌈</text></svg>") 16 0,auto; /*!emojicursor.app*/
}

/* THEME OVERRIDES */
.theme-bday {
background: url("https://blob.gifcities.org/gifcities/QSDQZXYNJHDNPUMZO7O732533I4S7R7E.gif") repeat !important;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='32' width='32'><text y='50%' x='50%' font-size='26' text-anchor='middle' dominant-baseline='central'>🪩</text></svg>") 16 16, auto;
}

.theme-default {
/* fallback: keep your current look */
background-color: #88CC23 !important;
background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png") !important;
background-repeat: repeat !important;

}


a, button {
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='32' width='32'><text y='50%' x='50%' font-size='26' text-anchor='middle' dominant-baseline='central'>🪩</text></svg>") 16 16, auto;
}

#bio {
  display:grid;
}


#collages, #film, #movies, #corememz, #music, #bday {
  display: none;
}



 .morgans-space h1 {
   font-size: 350%;
  /*font-family: "Moo Lah Lah", sans-serif;
  font-weight: 400;
  font-style: normal;*/
  font-family: "Bonbon", cursive;
  font-weight: 400;
  font-style: normal;
  text-align: center;
   margin: 40px auto;
   box-sizing: border-box;
  max-width:45%;
   width:420px;
  background-color:#FC6FCB;
   border: 2.1px solid aqua;
  background-image: url("https://www.transparenttextures.com/patterns/tiny-grid.png");
}

nav {
  background-color: #FC6FCB;
  border:2px dotted #E01A4F;
  box-shadow: 1px 2px 12px rgba(0,100,0);
  background-image: url("https://www.transparenttextures.com/patterns/starring.png");
  
}

.nav-container {
  margin:0;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 0 30px;
}

.nav-tag {
  font-size:160%;
  font-optical-sizing: auto;
  font-weight: 600;
  background-color: #FC6FCB;
}

.nav-links a {
  text-decoration: none;
  color: black;
  font-size: 110%;
  transition: color 0.3 ease;
  font-weight: 400;
  background-color: #FC6FCB;
}

.nav-links a:hover {
  color:whitesmoke;
  
}

nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  background-color: #FC6FCB;
}



.dropbtn {
background-color: #FC6FCB;
font-family: inherit;
border: none;
    font-size: 110%;
  transition: color 0.3 ease;
  font-weight: 400;
}

.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 120px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 8px 12px;
text-decoration: none;
display: block;
}

.dropdown:hover .dropdown-content {
display: block;
}









.grid, .grid2{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

.sidebar {
  background-color:#FC6FCB;
  width: 15%;
  margin-right: 10px;
  gap:50px;
  height: 500px;
  display: flex;
  flex-direction:column;
  align-items: center;
  box-shadow: 1px 2px 12px rgba(0,100,0);
  border:2px dotted #E01A4F;
  background-image: url("https://www.transparenttextures.com/patterns/starring.png");
}

.sidebar h2 {
  background-color:#7fff00;
  padding: 5px;
  font-size: 140%;
  border-radius: 5%;
  width: 80%;
  text-align: center;
}

.sidebar p {
  background-color:#7fff00;
  padding: 2px;
  font-size: 100%;
  border-radius: 5%;
  display: flex;

  margin-bottom:-20px;
  margin-top: -25px;
  gap:1px !important;
  width: 80%;
}


.profile-pic {
width: 80%;
margin-top: -53px;
border-radius: 3%;
border: 3px solid #80CC23;
box-shadow: 1px 2px 3px rgba(0,0,0.08);
}

.main-align {
  display: flex;
  flex-direction: column;
  gap: 15px;
    width: 55%;
}



#bio {
  height:450px;
  border: 2px solid #000;
  box-shadow:3px 3px 0 #000;
  background-color: white;
  padding-right:65px;
  padding-left:65px;
  overflow-y: auto;
  background-image: url("https://www.transparenttextures.com/patterns/worn-dots.png");
}

#music {
  height:450px;
  border: 2px solid #000;
  box-shadow:3px 3px 0 #000;
  background-color: #57e6e6;
background-image: url("https://www.transparenttextures.com/patterns/batthern.png");
  padding-right:65px;
  padding-left:65px;
  overflow-y: auto;
}

.music-scroll {
  text-align: center;
}

.music-scroll h2{
  margin-bottom: 30px;
}



#corememz {
  height:450px;
  background-color:#57e6e6;
  border: 6px dotted #FC6FCB;
background-image: url("https://www.transparenttextures.com/patterns/graphy.png");
  padding-right:65px;
  padding-left:65px;
  text-align: center;
  overflow-y: auto;
}

#corememz h2 {
  margin-bottom: -10px;

}

.cuties {
  font-size: 160%;
  margin-bottom: -15px;
}

.collage-scroll::-webkit-scrollbar, #bio::-webkit-scrollbar, #corememz::-webkit-scrollbar, #music::-webkit-scrollbar {
  width: 12px;}

.collage-scroll::-webkit-scrollbar-track, #bio::-webkit-scrollbar-track, #corememz::-webkit-scrollbar-track, #music::-webkit-scrollbar-track {
  background: black;}

.collage-scroll::-webkit-scrollbar-thumb, #bio::-webkit-scrollbar-thumb, #corememz::-webkit-scrollbar-thumb, #music::-webkit-scrollbar-thumb {
  background: #FC6FCB;
  border-radius: 6px;
  border: 3px solid yellowgreen;
  cursor: pointer;
}

#bio h2{
text-align: center;
  font-size: 160%;
}

.music-player {
  width:90%;
  margin-top: 30px;
  margin-bottom: 5px;
}

.collage-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  gap: 70px;
  scroll-behavior: smooth;
  align-items:center;
}

.collage-scroll img {
  width:300px;
  flex-shrink: 0;
  border-radius: 6px;
}

#bday img {
  width: 600px !important;
}

.mommy {
  width: 300px;
  height:430px;
}

.summer {
  width: 400px !important;
}

.matisse {
  width: 600px !important;
}

#film img {
  width: 600px !important;
}




.end-bar {
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-between;
}

.skull-panda {
  width:200px;
}

.cry-baby{
  width:210px;
}

.skull-panda-teak {
  width:216px;
}


.animal-crossing {
  width:80px;
}

.side-images {
  display:flex;
  flex-direction:column;
  align-items: center;
  gap: 40px;
  margin-top: 25px;
  margin-right: 16px;
  width:13%;
  
}


.sonny-angel {
  width:220px;
  height: 220px;
}

.twitch {
 animation: twitch 0.4s infinite; 
}

.button-center {
  display:flex;
  justify-content:center;
}

.dance-button{
  margin-top: -17px;
  background-color: #00E7EC;
  padding: 5px;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 150%;
  border: solid #fcf75e;
  box-shadow: 1px 2px 5px;
  text-decoration: none;
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
}


.dance-button:hover
{
transition: transform 0.3s ease; /* Smooth transition */
transform: scale(1.1);
}

.ending{
  display:flex;
  justify-content:center;
  margin-top: 100px;
  flex-direction:column;
  align-items: center;
}

.fa {
  padding: 14px;
  font-size: 80px;
  width: 40px;

  border-radius: 50%;
  background-color: white;
}

/* Add a hover effect if you want */
.fa:hover {
  background-color: #FC6FCB;
}

.social-links a{
  text-decoration: none;
  color:black;
}