:root {
    --pink1: #f3d3d3 ; 
    --pink2: #ffbdbd ;
    --pink3: #e47e7e ;
  }

#flex-container {
    padding: 0 200px 0 200px !important ;
   position: relative ;
}

.maya-box-style {
    background-color: var(--pink1) ;
    border: 5px dashed var(--pink3) ;
    border-radius: 9px ;
    color: var(--pink3) ;
    padding: 20px ;
}

body {
    background-image: url("/assets/pinkpaws.jpg") !important ;
    background-size: 200px !important ;
    font-family: "winkle" !important ;
    font-size: 1.5em !important ; 
    cursor: url("/maya/assets/cursor.ico"), default !important ;
}

a:hover, button:hover {
      cursor: url("/maya/assets/pointer.ico"), pointer !important ;
}

b {
  color: var(--deepred) ;
}

.hiddenIcon {
  display: none ;
}

#homelink {
  position: fixed ;
  top: 5px ;
  left: 10px ;
  z-index: 100 ;
}

#homelink img {
  width: 4em ;
  height: auto ;
}

#cake {
  position: relative ;
  right: -850px ;
  top: 70px ;
  width: 200px ;
  animation: jiggy 2s linear infinite alternate ;
}

#ladybug {
  position: relative ;
  right: -700px ;
  top: 240px ;
  width: 150px ;
  animation: jiggy 2.1s linear infinite alternate ;
}

.link-button {
  color: red ;
  text-decoration: underline ;
  border: 0 ;
  background: 0 ;
  font-family: "winkle" ;
  font-size: 1em ;
}
.split-elements {
  display: flex ;
  flex-flow: nowrap ;
}

.split-elements div {
  flex: 50% ;
  padding: 0 ;
}

.maya-box-style .emoji, .maya-box-style .safeemoji {
  vertical-align: text-bottom;
  height: .8em ;
  width: auto;
  padding: 0 0.1em 0.2em 0.1em;
}

#maya-intro p:first-of-type {
  margin: 10px 0 0 5px ;
  padding: 7px ;
  background-color: white ;
  border-radius: 9px ;
}

#maya-intro li {
  list-style-image: url("/maya/assets/knife.gif") ;
  background-color: white ;
  border-radius: 9px ;
  padding: 5px 5px 5px 10px ;
  margin-bottom: 10px ;
}

#boundaries {
  background-image: url("/maya/assets/animalcrossingstationary1.png") ;
  background-size: 100% 100%;
  background-repeat: no-repeat ;
  background-position: center center ;
  width: 430px ;
  height: 280px ;
  position: relative ;
}

#boundaries div {
  position: relative ;
  top: 15% ;
  left: 10% ;
  height: 70% ;
  width: 80% ;
  overflow-x: hidden ;
  overflow-y: scroll ;
  color: var(--deepred) ;
}

#boundaries p {
   padding: 0 ;
  margin: 0 ;
}

.maya-box-style h1, .maya-box-style h2 {
    text-align: center ;
    color: white !important ;
    font-family: "fipps" !important ;
    font-size: 20px !important ;
    margin: 0 ;
    padding: 5px auto ;
    width: 100% ;
    background-image: none !important ;
    background-clip: initial !important ;
    /*----*/
    background-color: var(--pink3) ;
    border-radius: 15px ;
}

.maya-box-style h1 img {
  height: 43px ;
  display: inline ;
  vertical-align: text-bottom ;
  margin-bottom: 5px ;
}

.maya-box-style h2 {
  margin-top: 15px !important ;
}

.maya-box-style h2 img {
  height: 25px ;
}

.split-page {
    display: flex ;
    flex-flow: wrap ;
}

.flex-left, .flex-right {
    padding: 0 10px 0 5px ;
    margin: 0 ;
    flex: 48% ;
}

.second-split {
  padding: 0 10px 0 5px ;
  margin: 0 ;
  height: auto ;
}

/* --------------- ART GALLERY ------------------ */

.second-split:nth-of-type(2) {
  height: auto ;
}
#gallery {
  max-width: 100% ;
  border: 3px solid var(--darkred) ;
  padding: 20px ;
  margin-top: 15px ;
  height: 600px ;
  background-image: url("/assets/meattexture2.jpg") ;
  background-size: contain ;
  overflow-y: scroll ;
  overflow-x: hidden ;
}

.galleryImage {
  /*width: 45% ;*/
  border: 8px solid transparent ;
  border-image: url(/maya/assets/animalcrossingstationary1.png) 15 round ;
  margin: 5px ;
  flex: 45% ;
  max-width: 200px ;
}

/* ---- collection ---- */

.maya-box-style .multiselect button {
    border: 0 ;
    font-family: "winkle" ;
    font-size: 1em ;
    text-align: left ;
    color: white ;
    padding: 7px ;
    width: 100% ;
}

.maya-box-style .multiselect {
  background-color: var(--pink3) ;
  border-radius: 15px ;
  margin-top: 10px ;
  color: white ;
}

.maya-box-style .multiselect-content {
    max-width: 100% ;
  padding: 10px ;
  background-color: var(--pink1) ;
  border: 3px solid var(--pink3) ;
  border-radius: 0 0 15px 15px ;
}

.maya-box-style .multiselect button img {
    width: .8em ;
    margin-right: 15px !important ;
}

#stampsDiv, #blinkiesDiv, #faviconDiv, #miscDiv, #pixelsDiv {
  display: flex ;
  flex-wrap: wrap ;
  align-items: center ;
  justify-content: center ;
}
#stampsDiv img {
  width: 33% ;
}

#blinkiesDiv img {
  width: 50% ;
}

#faviconDiv img {
  height: 30px ;
}

#pixelsDiv img {
  width: 20% ;
}

#miscDiv img {
  max-width: 50% ;
  min-width: 100px ;
  max-height: 400px ;
}
/* --------------- MUSICPLAYER ------------------ */
    
#musicplayer {
    font-family: "winkle" ;
    color: white ;
    height: auto ;
    width: 100% ;
    margin: 0 0 5px 0 ;
    display: flex ;
    align-items: center;
    flex-direction: row ;
    justify-content: center ;
    min-width: 0 ;
    padding: 5px ;
    background-image: url("/assets/meattexture2.jpg") ; 
    background-size: cover ;
    flex: 100% ;
    border: 3px solid black ;
}

#duration {
    width: 100% ;
    font-size: .6em ;
}

#volume {
    padding: 0 ;
    margin: 0 ;
}

#song-details {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    
}

#now-playing {
  font-size: .8em;
}

#track-name, #track-artist {
  font-size: .8em;
}

/* Using flex with the row direction to
   align items in a horizontal direction */
#musicplayer-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.8em ;
    padding: 0 ;
}

#playpause-track,
#prev-track,
#next-track {
  padding: 0 5px 0 10px ;
  opacity: 0.8;
}

/* Change the opacity when mouse is hovered */
#playpause-track:hover,
#prev-track:hover,
#next-track:hover {
  opacity: 1.0;
}

/* Define the slider width so that it scales properly */
.slider_container {
  max-width: 100% ;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modify the appearance of the slider */
#seek_slider, #volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: black;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
#seek_slider::-webkit-slider-thumb,
#volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: white ;
  cursor: pointer;
  border-radius: 50%;
}

/* Change the opacity when mouse is hovered */
#seek_slider:hover,
#volume_slider:hover {
  opacity: 1.0;
}

#seek_slider {
  width: 60%;
}

#volume_slider {
  width: 30%;
}

#current-time,
#total-duration {
  padding: 10px;
}

i.fa-volume-down,
i.fa-volume-up {
  padding: 10px;
}

/* Change the mouse cursor to a pointer
   when hovered over */
i.fa-play,
i.fa-pause,
i.fa-step-forward,
i.fa-step-backward {
  cursor: url("/pointer") ;
    color: white ;
}
  
#musicplayer .marquee-container {
  padding: 0 ;
  margin: 0 ;
  width: 40% ;
    background-color: black ;
     color: red ;
}

/* ------------------ MOBILE -----------------------*/

@media (max-width: 600px) {
  .second-split:nth-of-type(1){
    order: 2
  }
  #musicplayer {
    display: none ;
  }
  #boundaries {
    width: 100% ;
  }
  #gallery {
    padding: 0 ;
  }
  .galleryImage {
    max-width: 95% ;
    border: 0 ;
  }
  #hamburger-btn {
    display: none ;
  }
  #homelink {
    bottom: 0 ;
    top: initial ;
  }
}