html {
  background: url(https://i.pinimg.com/564x/bc/80/22/bc80221c13bcb37194cc914cc8eb6d25.jpg), linear-gradient(rgb(255 255 255/60%), rgb(255 255 255/0%));
  background-blend-mode: lighten;
  background-size: cover;
}

*{
  scrollbar-width: none;
  -webkit-scrollbar-width: none;
  box-sizing: border-box;
  cursor: url(/cursor/apple_normal.png), auto !important;
}

::selection,
-webkit-::selection {
  background: white;
  color: black;
  filter: none;
  box-shadow: none;
  text-shadow: none;
}

h1,
h2,
h3 {
  margin: 0;
}
 
p {
  font-size: 14px;
}

a {
  color: blue;
  text-decoration: none;
  cursor: url(/cursor/apple_hover.png), auto !important;
}

#info {
  position: absolute;
  transform: translate(23em, 3em);
  background: url(/bg/tropical_drink.jpg);
  
  width: 500px;
  height: 385px;
  overflow-y: scroll;
  border-radius: 10px;
  box-shadow: inset 1.5px 1.5px 5px white, inset 0 -10px 10px rgb(0 0 0/50%), inset -2px -2px 3px rgb(0 0 255/20%), 2px 2px 4px rgb(0 0 0/50%);
  
}

#info h2 {
  background: linear-gradient(90deg, blue 30%, transparent);

  border-radius: 0 100px 100px 0;
  border-left: none;
  
  margin: 0;
  margin-top: 10px;
  margin-right: 20px;
  padding-left: 60px;
  
  font-family: genos, sans-serif;
  font-size: 40px;
  text-align: left;
  color: white;
}
  
#info .talk {
  mix-blend-mode: hard-light;
  -webkit-mix-blend-mode: hard-light;
  background: linear-gradient(rgba(255, 255, 255, 0.5) 30%, #deefff);
  height: 290px;
  overflow-y: scroll;
  margin: 20px;
  margin-bottom: 0;
  padding: 30px;
  border-radius: 10px;
  box-shadow: inset -2px -2px 3px rgb(0 0 255/20%), -2px -2px 5px rgb(0 0 33/50%), inset 2px 2px 2px white, inset -2px -2px 2px #c4d1ff;
  font-family: Didact Gothic, sans-serif;
  letter-spacing: 1px;
  
}
  
#info .talk h2 {
  margin-left: -30px;
}

#info .talk sub {
  color: blue;
  font-weight: bold;
}
  
#info .talk p {
  font-size: 14px;
}

#info .talk p:hover {
  background: white;
  border-radius: 10px;
  border: 1px solid;
  padding: 3px;
}
  
#info .talk b {
  color: blue;
}

.flag {
  position: absolute;
  transform: translate(52em, 3em);
  width: 100px;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
}

.flag img {
  width: 70px;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
  margin-bottom: 5px;
  transition: all .5s;
}

.flag img:hover {
  width: 100%;
  transition: all 1s;
}


#likes {
  position: absolute;
  transform: translate(8em, 5em) rotate(-2deg);
  z-index: 2;
  width: 300px;
  height: 250px;
  padding: 10px;
  text-align: left;
  background: linear-gradient(tomato 50%, pink), url(https://foollovers.com/mat/dotbl/f23-bg-black-dot.gif);
  background-blend-mode: lighten;
  border: 20px solid transparent;
  border-image: url(https://faegardens333.neocities.org/etc/ruffle_border.png) 73 fill round;
  background-clip: padding-box;
  filter: drop-shadow(3px 3px 3px rgb(0 0 0 /40%));
}
  
#likes #title {
  margin-bottom: 8px;
  background: url(/bg/pink_dot.gif);
  box-shadow: inset 6px 6px 3px #fff, inset -3px -3px 3px rgb(0 0 0/50%);
  border-radius: 50%;
  padding: 10px;
}
  
#likes h2 {
  font-family: chalk, cursive;
  font-weight: normal;
  text-align: center;
  font-size: 24px;
  color: white;
  text-shadow: 2px 2px 4px red, -2px 2px 4px red, 2px -2px 4px red, -2px -2px 4px red;
  padding: 10px;
  border: 1px dashed #694226;
  border-radius: 50%;
}
  
#likes #content {
  height: 110px;
  overflow-y: scroll;
  border-radius: 300px 30px 200px 15px/30px 200px 2em 200px;
  box-shadow: inset 6px 6px 3px #fff, inset -3px -3px 3px rgb(0 0 0/50%);
  background: url(/bg/light_cherryblossom.gif);
  background-size: auto;
  margin: 5px;
  margin-top: 0px;
  padding: 10px;
  font-size: 14px;
  font-family: chalk;
  color: #694226;
}
  
#likes #content b {
  color: #44a128;
  text-shadow: 1px 1px 3px rgb(68 161 40/50%);
  font-family: chalk;
}
  
#likes #content a {
  color: #ff85b6;
  text-decoration: dashed underline;
}
  
#likes #content a:hover,
#likes strong {
  color: red;
}

#orb {
  position: absolute;
  z-index: 3;
  transform: translate(2em, 19em) rotate(2deg);
  width: 290px;
  height: 290px;
  background: url(https://i.pinimg.com/564x/59/ee/37/59ee37cc735c0b9917d8136abef3a031.jpg), url(/etc/orange_orb.png);
  background-size: cover, cover;
  background-position: top-left;
  background-blend-mode: overlay;
  border-radius: 100%;
  box-shadow: inset 16px -14px 15px rgb(255 120 0/50%);
  padding: 20px;
  filter: drop-shadow(0 0 10px orange) drop-shadow(0 0 5px white) drop-shadow(0 0 2px white);
  font-family: handwriting, sans-serif;
  color: #694226;
}

#orb h2 {
  font-family: future;
  font-size: 40px;
  color: red;
}

#fact {
  position: absolute;
  z-index: 4;
  transform: translate(11em, 32em) rotate(-3deg);
  width: 240px;
  height: 240px;
  background: url(https://i.pinimg.com/564x/1c/af/e2/1cafe24660e0977d20570833e6c03f90.jpg), url(https://preview.redd.it/my-first-frutiger-aero-orb-v0-hn15b4zk6h5a1.png?auto=webp&s=f04b2841ab3ad1bcba8d3a54c0e0b2ebb6993f4e);
  background-size: contain, cover;
  background-blend-mode: screen;
  border-radius: 100%;
  box-shadow: inset 16px -14px 15px rgb(0 60 255/50%);
  padding: 20px;
  filter: drop-shadow(0 0 10px #42c5f5) drop-shadow(0 0 5px white) drop-shadow(0 0 2px white);
  font-family: handwriting, sans-serif;
  color: #694226;
  font-family: genos, sans-serif;
}
  
#fact h2 {
  text-align: center;
  font-family: genos;
  font-size: 40px;
  color: white;
  text-shadow: 2px 2px 6px hotpink, -2px -2px 6px hotpink, -2px 2px 6px hotpink, -2px -2px 6px hotpink, 2px 2px 3px hotpink, -2px -2px 3px hotpink, -2px 2px 3px hotpink, -2px -2px 3px hotpink;
}

#fact ul {
  text-align: left;
  height: 170px;
  overflow-y: scroll;
  padding: 20px;
  padding-left: 50px;
  padding-bottom: 50px;
  border-radius: 40px 40px 300px 300px;
  margin: -1em;
  margin-top: auto;
  text-shadow: 1px 1px 2px #42c5f5, -1px -1px 2px #42c5f5;
  color: black;
  list-style: url(https://pixelsafari.neocities.org/favicon/nature/plant/flower/pink30.gif);
}

#video {
  display: flex;
  position: absolute;
  transform: translate(24em, 27.8em);
  width: 545px;
  padding: 10px;
  box-sizing: border-box;
  
  background: url(https://i.pinimg.com/564x/f9/7c/5e/f97c5e5d1d255195bcbd95d6abcd31f9.jpg), rgba(255, 255, 255, 0.3);
  background-size: contain, auto;
  background-blend-mode: overlay;
  font-family: noto sans, sans-serif;
  
  border-radius: 10px;
  box-shadow: inset 1.5px 1.5px 5px white, inset 0 -10px 10px rgb(0 0 0/50%), inset -2px -2px 3px rgb(0 0 0/40%), 2px 2px 4px rgb(0 0 0/50%);
}
  
#video iframe {
  border: none;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4), inset 0 0 5px black;
  margin-right: 10px;  
  flex: 60%;
  height: 189px;
  border-radius: 10px;
  /* width="336" height="189"*/
}
  
#video .vidlist {
  flex: 30%;
  height: 186px;
  padding: 10px;
  overflow: hidden;  
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(17,176,0,0.6) 26%, rgba(139,217,75,0.4) 70%, rgba(212,255,155,0.6) 84%, rgba(255,255,255,0.8) 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgb(0 0 0/40%);
  border-radius: 10px;
  text-align: left;
  font-size: 14px;
}
  
#video .vidlist h2 {
  text-align: center;
  font-size: 25px;
  font-family: 'merriweather sans', sans-serif;
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);  
}
  
#video .vidlist ul {
  mix-blend-mode: hard-light;
  height: 117px;
  overflow: scroll;
  background: linear-gradient(180deg, rgb(255 255 255/30%) 0%, rgb(10 105 0 /70%) 26%, rgba(139,217,75,0.3) 70%, rgba(212,255,155,0.6) 84%, rgba(255,255,255,0.8) 100%);
  box-shadow: 0 0 2px rgb(0 0 0 /80%), inset 2px 0 4px rgb(0 0 0/30%), inset -2px 0 4px rgb(0 0 0/30%);
  padding: 5px;
  border-radius: 5% 5% 20px 5%;
  list-style: inside url(https://www.fancyparts.com/fancyparts/cg/icon/ball01/ball_s_04.gif);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
  
#video .vidlist li {
  margin: 5px;
  font-size: 15px;
}
  
#video .vidlist a {
  text-decoration: none;
  color: black;
  transition: all .5s;
}
  
#video .vidlist a:hover { text-decoration: underline;}

#video hr {
  border: none;
  border-top: 1px solid rgb(0 0 0/30%);
  width: 90%;
}
  
#quiz {
  z-index: -1;
  position: absolute;
  transform: translate(860px, -15px) rotate(2deg);
  width: 300px;
  height: 100vh;
  overflow-y: scroll;
  padding-bottom: 60px;
  filter: saturate(140%);
}

#quiz:hover {
  z-index: 99;
}
  
#quiz img,
#quiz div {
  filter: drop-shadow(2px 2px 3px rgb(0 0 0/50%));
  width: 80%;
  image-rendering: auto;
  transition: all 1s;
  color: rgb(255 0 0/50%);
  box-shadow: inset 2px 2px 3px rgb(0 0 0/40%);
}

#quiz div {width: 100%;}

#quiz img:hover,
#quiz div:hover {
  filter: drop-shadow(2px 2px 3px rgb(0 0 0/50%)) blur(0px);
  width: 100%;
  mix-blend-mode: normal;
  border-radius: 0px;
}


#musicplayer {
  z-index: 30;
  position: absolute;
  transform: translate(70em, 10em);
  width: 250px;
  font-family: genos, serif;
  border-radius: 11px;
  background: linear-gradient(rgb(255 255 255/40%), #def3ff);
  box-shadow: inset 0 2px 3px rgb(0 0 0/40%), 2px 2px 4px rgb(0 0 0/30%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
 
#musicplayer .songtitle,
#musicplayer .seeking {
  height: 30px;
  background: linear-gradient(180deg, rgba(201,252,255,0.7) 0%, rgba(23,116,210,0.7) 50%, rgba(0,100,180,0.8) 51%, rgba(106,183,255,0.8) 100%);
  padding: 5px; /* padding around song title */
  border-radius: 10px 10px 0 0;
  border: 1px solid rgb(10 83 145/60%);
  border-top: 1px solid rgb(218 231 242/60%);
  display: block;
  color: white;
  text-shadow: 0px -1px rgb(0 76 162/70%);
}

#musicplayer p {
  color: #111c30;
  text-shadow: 0px -1px rgb(0 76 162/30%);
  font-size: small;
  padding-left: 10px;
  padding-right: 10px;
}

#musicplayer a {color: rgb(0,100,180)}
 
#musicplayer .controls {
  font-size: 18px !important; /* size of controls */
  text-align: center;
  width: 100%;
  display: flex;
  margin: 5px;
  margin-top: -15px;
}
 
#musicplayer .controls div {
  flex: 33.33%;
  display: block;
  padding:8px 5px 0px 5px; /* padding around controls */
}
 
#musicplayer .seeking {
  border-radius: 0 0 10px 10px;
  display:flex;
  justify-content: space-evenly;
}
 
#musicplayer .current-time {
  padding-right:5px;
}
 
#musicplayer .total-duration {
  padding-left:5px;
}
 
.fa-pause,
.fa-play,
.fa-forward,
.fa-backward {
  color: rgb(28 37 54 /80%); /* color of controls */
  text-shadow: 1px 1px rgba(0 100 180/80%);
}
  
#musicplayer input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
    
#musicplayer input[type=range]:focus {
  outline: none;
}
    
/* settings for chrome browsers */
#musicplayer input[type=range]::-webkit-slider-runnable-track,
#musicplayer input[type=range]::-moz-range-track {
  width: 100%;
  height: 7px; /* thickness of seeking track */
  background: linear-gradient(180deg, #9ce9ff, skyblue); /* color of seeking track */
  box-shadow: inset 0 -1px 3px rgb(0 0 0/70%), 0 0 1px rgb(0 0 0/70%);
  border-radius: 5px;
}
  
#musicplayer input[type=range]::-webkit-slider-thumb,
#musicplayer input[type=range]::-moz-range-thumb {
  height: 20px; /* height of seeking square */
  width: 20px; /* width of seeking square */
  border: 1px solid rgb(1 34 66/70%);
  border-radius: 100%; /* change to 5px if you want a circle seeker */
  background: linear-gradient(180deg, white, #c2d9f0); /* color of seeker square */
  box-shadow: inset 0 -1px 1px rgb(0 0 0/30%), 0 0 1px rgb(0 0 0/70%);
  -webkit-appearance: none;
  margin-top: -4.5px; 
  border:none;
}