/* starting line */ body {background-color: #f5f2d0; font-size:13px; font-family: arial; color: #717171;overflow-x: hidden;}

/* all links */ a {background-color:#f3e8b0; color: #717171;text-decoration:none;}

/* all links hover */ a:hover {color:#94735B;background-color:#D5E6AF;}

/* tiny text */ p.small {font-variant: small-caps;font-size: small;font-size:12px;text-transform: lowercase;}

/* title bar */ .title-bar {background:#C3AD9D;color: white;font-weight: bold;padding: 5px;padding-top: 3px;padding-bottom: 3px;font-variant: small-caps;text-transform: lowercase;}

/* scrollbar */
::-webkit-scrollbar {width: 10px;z-index:99;}
::-webkit-scrollbar-track {background: #DBC9BDA6;}
::-webkit-scrollbar-thumb {background: #C3AD9D;}
::-webkit-scrollbar-thumb:hover {background: #A19081;}

/* quote text formatting */ .quote h1 {font-style: italic;font-family: 'Shrikhand';font-size: 18px;color:#94735B;text-shadow: 2px 10px #D5E6AF;}

/* citations */ p.cite {font-variant: small-caps; font-size: small;font-size:11px;text-transform: lowercase;}

/* star bullets */ ul {padding: 5px; list-style:none;} ul li::before {content: '\2606'; margin: 0 .5em;}

/* reading list spacing */ li.desc  {margin-bottom:10px;}

/* lemon lime button */ #lemonlime {color:#908F8E;background: #ffffff;font-weight: bold;font-variant: small-caps;text-transform: lowercase;height: 3em;margin-top:-3%;width:13em;border-radius: 15px;font-size: 13px;border: 6px double #DBC9BDA6;position: relative;overflow: hidden;z-index: 1;box-shadow: 3px 3px 4px #C3AD9D,-6px -6px 12px #ffffff;} #lemonlime a{text-decoration: none !important;background-color: transparent !important;color:#908F8E;} #lemonlime::before {content: ''; width: 0;height: 3em;border-radius: 15px;top: 0;left: 0;position: absolute;background-image: linear-gradient(to right, #fffbd8 0%, #dff7d5 100%);color:#000000;transition: .5s ease;display: block;z-index: -1;} #lemonlime:hover::before {width:13em;color:#000000;}

/* shooting star borders */ .shooting {margin-top:0%;margin-left:1%;height:500px;position:relative;width:320px;z-index:1;box-shadow: 2px 4px 6px #C3AD9D;justify-content: center;align-items: center;padding: -0px;border: 10px solid #0000;border-radius: 6px; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(var(--angle), #fffbd8,#dff7d5) border-box;animation: 1s rotate linear infinite;}.shooting img {height:100%;border-radius:6px;}@keyframes rotate {to {--angle: 360deg;}}@property --angle {syntax: "<angle>";initial-value: 0deg;inherits: false;}

.shooting {
  -ms-overflow-style: none; /* Internet Explorer and Edge */
  scrollbar-width: none; /* Firefox */
}

.shooting::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

/* IMPROVED MAIN ELEMENTS */

.holdplease {
  width:1100px;
  height:auto;
  margin-right:auto;
  margin-left:auto;
  z-index:-1;
}


/* large yellow container */ .milkyway { margin-left:auto;margin-right:auto;width: 1090px; margin-top: 6%;margin-bottom: 6%;position:relative; z-index:1;overflow: visable;border: 10px solid #0000;border-radius: 6px;background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient( var(--angle),#ffffff, #f7f7da,#edecbe) border-box;animation: 7s rotate linear infinite;box-shadow: 3px 3px 4px #C3AD9D;}

/* large transparent container */ .invisiblegirl {margin-top:6%;margin-left: auto;margin-right:auto; width: 1110px;position:relative;margin-bottom: 3%;padding:0px;display:flex;}

/* half size left container */ .orbit {border: 10px solid #0000;border-radius: 6px;background-color: white;border-box;animation: 7s rotate linear infinite;box-shadow: 3px 3px 4px #C3AD9D;width: 590px;margin-bottom: 5%;position:relative;align:left; min-height:400px;}

/* half size transparent container */ .shiningstar {margin-top: 0%; position:relative; margin-left:0%; margin-bottom: 0%; float:right; width:50%;min-width:500px;}

/* vertical mini sidebar stack */ .thinlime {display:inline-block;vertical-align: top;width:145px;margin:30px 0px 0px 30px;} .thinlime img {width:100%;display: block;height:auto;}

/* vertical large sidebar stack */ .thicklime {display:inline-block;vertical-align: top;max-width:500px;margin:30px 0px 0px 30px;}.thicklime img {width:100%;display: block;height:auto;} .thicklime h1{font-family: 'Shrikhand';font-size: 20px; color:#94735B;text-shadow: 2px 10px #D5E6AF;}

/* horizontal element stack */ .hotdog {display:flex;width:100%; height:auto;margin-top:0%;}

/* green boxes styling */ .microverse, .middleman, .goliath, .friendlist {background-color:#D5E6AF;border-radius: 5px;border: 1px solid #94735B;box-shadow: 2px 2px #C3AD9D;}

/* tiny green boxes */ .microverse {display: inline-block;vertical-align: top;width:130px;height:auto;margin-bottom:20px;padding: 5px;}.microverse img{width:100%;opacity:100%;display: block;margin-left: auto;margin-right: auto;align-items: center;}

/* medium green boxes */ .middleman {display:inline-block;vertical-align:top; width:340px; margin-bottom:10px;overflow:auto; padding:10px;}

/* large green boxes */  .goliath {display:inline-block;vertical-align:top; width:500px; margin-bottom:10px;overflow:auto; padding:10px;}

/* friendlist */ .friendlist {margin-bottom:20px;width:160px;height:300px;overflow:auto;padding:5px;} .friends {display: grid;margin-top:5px;align-items: left; grid-template-columns: 1fr 1fr;column-gap: 5px;}.friends img {border:#C3AD9D solid 2px;border-radius: 50%;margin-bottom:10px;width:60%;opacity:100%;background-color:#DBC9BDA6;}.friends p {padding-left: 0px;margin-top: 7px;float: left;}

/* photocard book-- only make minor edits */ .photobook {width: 510px;height: 330px;float:left;z-index:5;border-radius:3px;margin-left:-90%;margin-bottom:30px;}.photobook img{border-radius:0px;}.photobook .hard {font-weight: bold;border: none;}.photobook .hard img {object-fit: fill;height:auto;}.plastic {position: absolute;top: 0px; right: 20px;width: 100%;height: auto;z-index: 10;opacity:50%;width:100%;}.photobook .page {color:black;display: flex;z-index:10;padding:0px;flex-direction: column;justify-content: center;align-items: center;gap: 10px;border: 1px solid rgba(0, 0, 0, 0.11);overflow:hidden;background-color:#f4f4f4;}.photobook .page img {width: 90%;object-fit: contain;margin: auto;}.photobook .page small{font-size: 14px;margin-bottom: 10px;}.photoshadow{box-shadow:1px 1px 0px black,2px 2px 0px #000,3px 3px 0px #000,4px 4px 0px #000,5px 5px 0px #000,6px 6px 0px #000;border-radius:2px;}

/* art palette grid */ .palette {display: grid;margin-top:5px; margin-left: auto; margin-right: auto; grid-template-columns: 1fr 1fr 1fr;column-gap: 5px;padding:5px;} .palette img{ border:#C3AD9D solid 2px; border-radius: 50%; margin-bottom:10px; width:60%; opacity:100%; background-color:#DBC9BDA6;} .dot {height: 25px;width: 25px;margin-bottom:10px;border-radius: 50%;display: inline-block;margin-left: auto;margin-right: auto;}

/* art slideshow-- must stay absolute */ .mySlides {display: none} .artslides {width: 450px;height:450px;border-radius: 5px;border:10px dashed #f3e8b0;position: relative;}.artslides img{object-fit: cover;width: 450px;height: 450px;} .prev, .next {cursor: pointer; top: 50%;width: auto;padding: 16px;margin-top: -22px;color: white;font-weight: bold;font-size: 23px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none; background-color:#f3e8b0;position: absolute;} .next {right: 0;border-radius: 3px 0 0 3px;}.prev:hover, .next:hover {background-color: #D5E6AF;}
.caption {color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 1px;width: 94%;text-align: center;background-color:#C3AD9D;} .numbertext {color: #C3AD9D;font-size: 13px;padding: 8px 12px;top: 0;position: absolute;} .fade {animation-name: fade;animation-duration: 1.5s;} @keyframes fade {from {opacity: .4} to {opacity: 1}}

/* harmonica music player holder-- must stay absolute */ .harmonic {width:290px;position:absolute;margin-top:-2%;margin-left:0%;background-color:#C3AD9D; padding:5px;opacity:100%;border-radius: 0px 0px 5px 5px;}

/* sidekick book-- only make minor edits */.herobiz {width: 900px;height: 600px;float:left;z-index:3;border-radius:3px;}.herobiz .hard {font-weight: bold;border: none; margin-top:0%;margin-left:0%;width:100%; text-align:left;height:100%;}.herobiz .hard img {object-fit: fill;overflow:hidden;width:85%;}.herobiz .page {color:black;display: flex;padding:0px;flex-direction: column;justify-content: center;align-items: center;gap: 10px;border: 1px solid rgba(0, 0, 0, 0.11);overflow:hidden;background-color:#f4f4f4;}.page img{width: 70%;object-fit: cover;margin: auto;}.herobiz .page small{font-size: 14px;margin-bottom: 10px;}.shadow {box-shadow:1px 1px 0px #999,2px 2px 0px #000000,3px 3px 0px #000000,4px 4px 0px #000000,5px 5px 0px #000000,6px 6px 0px #000000;border-radius:2px;}

/* sidekick book text formatting */ .kickintro {width: 590px;margin-left:40%;margin-top:0%;margin-top:8%;opacity:100%;position:relative;} .kickintro h1 {font-family: verdana;font-size: 110%;} li.black {margin-bottom:5px;} li.black::before {content: '\2605';} .kicktable{margin-top:10%;margin-left:0%;height:100%;width:80%;text-align:left;font-size:13px;font-family: "swansea";line-height:170%;}.kicktable h1{color:black;font-weight:bold;font-style:italic;font-family: "elastic";font-size: 35px;}.kicktable h2{color:black;font-weight:bold;font-style:italic;font-family: "thunder";font-size: 30px;line-height:100%;}.kicktable .source {float: right;}.exerpt{margin-top:20%;margin-left:-1%;height:100%;width:80%;text-align:center;}.exerpt h1{color:black;font-weight:bold;font-style:italic;font-family: "thunder";font-size: 130px;text-shadow: -13px 13px  #f3e8b0;}.exerpt h2{color:black;font-weight:bold;font-style:italic;font-family: "thunder";font-size: 30px;text-shadow: -5px 5px  #f3e8b0;}

/* signed cd hover menu */ .cdtext { margin-left:-18px;text-align:center;margin-top:22px;padding-left: 0;list-style-type: none;font-family: "monnole";visibility: hidden;opacity: 0;transition: opacity 0.3s;} li.cdmenu:hover .cdtext{visibility: visible;opacity: 1;} li.cdmenu:before {content: ''; margin: 0 .5em;opacity: 0;} li.cdmenu:hover{transition: 0.3s; display:flex; text-decoration:none; background: #D5E6AF; color:#94735B;opacity:1;} li.cdmenu a{background-color:transparent;text-decoration:none;} .cdmenu ul {margin-left:0%;}
li.cdmenu {border-radius: 50%; height:80px; width:80px; font-variant: small-caps;font-size: small;font-size:20px;text-transform: lowercase;display:flex; list-style-type: none; padding: 10px;background-image: url('rickshrine/music/signedcd.png'); background-repeat: no-repeat;background-position:left 0px center;background-size:100px 100px;margin-bottom:10px;}

/* cd graphics-- must stay absolute */ .cdcover {margin-top: 10%;margin-left: 10%;width: 500px;margin-bottom: 0%;opacity:100%;position:absolute;z-index:1;float:right;}.cdcover img {width:450px;z-index:1; box-shadow:-.3vw .5vw 3vw #C3AD9D; border-radius:5px;}.cd {margin-top: 10%;margin-left: 35%;width: 500px;margin-bottom: 0%;opacity:100%;position:absolute;z-index:-1;float:right;}.cd img {width:450px; animation: cdmove 5s infinite;z-index:-1;box-shadow:none;position:absolute;} @keyframes cdmove {100% {transform: rotate(360deg);}}


/* CURRENTLY EDITING */

.overlay-background {
  width: 100%;
  height: 400px;
  /* The color layer goes first, then the image url */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('your-image.jpg');
  background-size: cover;
  background-position: center;
}

/* large transparent container */ .unofficialheader {margin-top:6%;margin-left: auto;margin-right:auto; width: 1100px;position:relative;margin-bottom: 3%;padding:0px;display:flex;background-image: url("rickshrine/unofficial.gif");border-radius:15px;height:610px;background-size: 100% 100%; background-repeat: no-repeat;background-clip: content-box;z-index:-30;}

/* vertical mini sidebar stack */ .iconstack {display:flex; color:black; vertical-align:top;width:80px;margin-right:10%;height:100%;font-family:starcruiser;z-index:5;background-color:pink;opacity: 50%;} 

/* NAVIGATION LINKS */

.travel {position:relative;height:100%;width:50%;padding:15px;}

li.travel {background-color:#D5E6AF;padding:5px;font-variant: small-caps;font-size: small;font-size:13px;text-transform: lowercase;width:100%;margin-bottom:5px;border-radius:5px;display:inline-block;padding-bottom: 10px;}

li.travel:hover{transition: 0.3s; display:block; text-decoration:none; background: #f3e8b0; color:#94735B;}

li.void {padding:5px; background-color:#D5E6AF; font-variant: small-caps; font-size: small; font-size:13px; text-transform: lowercase; width:100%; margin-bottom:5px; border-radius:5px; padding-bottom: 10px;}

li.void:hover{color:#94735B; display:block; text-decoration:none; background: #f3e8b0; transition: 0.3s;}

li.travel a{background-color:transparent;text-decoration:none;}

li.void span {display: inline-block; padding:1px;}

li.void:hover span {transition: 0.7s;}

li.void:hover:after {content: "under construction  \2606"; float:right; color:#94735B;}

/* IMAGE CONTAINERS */

.count{margin-left:89%;margin-top:1%;position:absolute;width:100px;z-index:2;}
.count img{width:37%;height:auto;}
.count a{background-color:transparent;}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  position:absolute;
  margin-top: -385%;
  margin-left:-130%;
  min-height:380px;
  width: 550px;
  margin-bottom: 5%;
  background-color: #f5f4e6;
  color: #717171;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  z-index: 3;
  box-shadow: 3px 3px 1px #C3AD9D;
}

.popup img {width:120px;}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn 2s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.popbox, .lpopbox, .rpopbox { display: inline-block; vertical-align: top; margin-left:0%; width: 250px;z-index:-1;padding:10px;text-align:left;color:#717171;background-color:pink;}

li.popped {padding:5px; background-color:#D5E6AF; font-variant: small-caps; font-size: small; font-size:13px; text-transform: lowercase; width:100%; margin-bottom:5px; border-radius:5px; padding-bottom: 10px;}

li.popped:hover{color:#94735B; display:block; text-decoration:none; background: #f3e8b0; transition: 0.3s;}


/* NAVIGATION BUTTON */

#myBtn {display:block;position: fixed; bottom: 15px; right: 20px; z-index: 99; border: none; outline: none; background-color: white;  color: black;  cursor: pointer; border-radius: 10px; padding:5px;}
#myBtn:hover {background-color: #C3AD9D; transition: 0.3s; }

.tooltip {position: relative;display: inline-block;}

.tooltip .tooltiptext {visibility: hidden;width: 50px;background-color: #C3AD9D;color: #fff;text-align: center;border-radius: 10px;padding: 5px;font-size:12px;font-variant: small-caps;text-transform: lowercase;font-weight:bold;opacity: 0;transition: opacity .3s;position: absolute;z-index: 1;margin-left:3px;margin-top:-50px;}
.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  transition: 0.5s;
width: 100%;
  height: 8;
  z-index:99;
  overflow:hidden;
  display: flex;
  justify-content: center; /* Horizontally centers the child */
  align-items: center; 
} 

.gradient
{    width: 100%;
transition: 0.7s;
  height: 0;
  top:0;
  position:fixed;
  /* 1. Define the gradient */
  background: linear-gradient(30deg,#E8E2A7,#fffbd8,#dff7d5,#CAE8BE);
  /* 2. Scale up so the background is larger than the container */
  /* 3. Attach infinite keyframe animation loop */
  animation: shiftGradient 6s ease infinite;
   background-size: 200% 200%;
}

@keyframes shiftGradient {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 100%;
  }
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
  background-color:transparent;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.innerme {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay .intome img{
  top: 20px;
  right: 45px;
  position:absolute;
  width:100px;
  height:0;
}