body {
    background-image: url(https://i.ibb.co/HLtT12Lv/yellowstarbg.jpg);
    margin:auto;
      font-family: comicsans;
  cursor: url("https://i.ibb.co/m54xBrc8/princesscursor.png"), auto;
}

html {
      cursor: url("https://i.ibb.co/m54xBrc8/princesscursor.png"), auto;
}

a:hover {
      cursor: url("https://i.ibb.co/m54xBrc8/princesscursor.png"), auto;
}

.textlink {
    background-color: skyblue;
    border: solid #2682a8 1px;
    border-radius:10px;
        padding:5px;
        font-family: heycomic;
    text-decoration: none;
    color:white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.64);
}

.buttons {
    margin:10px;
}

@font-face {
  font-family:"comicsans";
  src: url(comicsans.ttf);
}

@font-face {
  font-family: "starborn";
  src: url(starborn.ttf);
}


@font-face {
  font-family:"heycomic";
  src: url(heycomic.ttf);
}

@font-face {
  font-family:"crystaluniverse";
  src: url(crystaluniverse.ttf);
}

main {
  display:flex;
  flex-direction: row;
  justify-content: center;
}

#hiddenContent {
    display: none;
}

#myImage {
    height: auto;
     transition: filter 0.3s ease-in-out;
}

#myImage:hover {
     filter: drop-shadow(0px 0px 15px #66d3ff);
}



#toybox {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.46);
    border-radius: 50px;
    padding:10px;
   margin:5%;
}



#toybox p {
    padding-left:20px;
        padding-right:20px;
}

.wrapper {
    background-image: url(https://i.ibb.co/6J4yf9GL/playmat.png);
    border-radius: 10px;
    border: solid 5px #9c7fb3;
    background-size: contain;
    width:80%;
    margin:auto;
    margin-top: 20px;
}

.toys img {
     max-width: 100%;
  height: auto;
    padding:5px;
         transition: filter 0.3s ease-in-out;
}

.toys img:hover {
        filter: drop-shadow(0px 0px 10px #66d3ff);
}

.toys {
    justify-content: center;
    display: flex; /* Creates the layout */
  flex-wrap: wrap; /* Allows items to drop to the next line */
  width: 100%;
    margin:20px;
}



.box {
    flex: 0 0 calc(20% - 10px); 
    background-color:#fff69e;
  display: flex;
  justify-content: center;
  align-items: center;
    border: solid 3px #9c7fb3;
        border-radius: 10px;
    width:50%;
    margin:5px;
}

@media (max-width: 900px) {
  .box {
    flex: 1 1 calc(50% - 20px); /* 2 columns (approx 50% each) */
  }
    .toys {
        width:95%;
    }
}

/* Small screens (e.g., Phones): 1 column */
@media (max-width: 600px) {
  .box {
    flex: 1 1 100%; /* 1 column (100% width) */
  }
    .toys {
        width:90%    
    }
    #toybox img {
        height:195px;
    }
    .links {
        overflow: scroll
    }
}

.desktop-view { display: block; }
.mobile-view  { display: none; }

@media (max-width: 710px) {
  .desktop-view { display: none; }
 .mobile-view  { display: block; } /* Show mobile version */
}

.links {
display: block;
    text-align: center;
    margin:20px;
    margin-left:auto;
    margin-right:auto;
    background-color:#fff69e;
    border: solid 3px #9c7fb3;
    border-radius: 10px;
    width:75%;
    padding:10px;
}

.title {
    background-color:rgb(255, 196, 220);
    padding:1px;
    border-top: solid 3px #9c7fb3;
        border-bottom: solid 3px #9c7fb3;

}

.subtitle {
      background-color: skyblue;
    border-bottom: solid 3px #9c7fb3;
        border-top: solid 3px #9c7fb3;
}

.subtitle2 {
      background-color: #e0b9ff;
    border-bottom: solid 3px #9c7fb3;
        border-top: solid 3px #9c7fb3;
}



h1, h2, h3, h4, h5 {
    text-align: center;
    font-family: heycomic;
    color:#511d82;
        filter: drop-shadow(0px 0px 5px #ffffff);
}

header {
    text-align: center;
    color:#ff56ab;
    margin-top:10px;
}

#home {
    position:fixed;
    top:0;
    margin:10px;
}

#home img {
    height:40px;
}

#topbutton {
        text-align: center;
    margin:1%;
}
#topbutton img {
    height:20px;
}