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

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

/* all links hover */ a:hover {color:#94735B;background-color:#D5E6AF;transition: .3s ease;}

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

/* headertext formatting */ h1 {font-style: italic;font-family: 'monnole';font-size: 24px;color:#94735B;text-shadow: 2px 10px #D5E6AF;} h2{font-family: 'chasa';font-size: 40px; color:#94735B;text-shadow: 2px 10px #D5E6AF; text-transform: uppercase;margin-top:5px;margin-bottom:5px;}

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

/* 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;}

/* 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;}

/* title line */ .title-line {background:transparent;border-bottom:1px solid #C3AD9D;font-variant: small-caps;text-transform: lowercase;font-size:13px;margin-top:0px;padding-top:0px;line-height:15px;}

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

/* navigation button */ #globe {display:none;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;transition: opacity 0.3s ease, transform 0.3s ease;}#globe:hover {background-color: #C3AD9D; transition: 0.3s;}.globetip {position: relative;display: inline-block;}.globetip .globetiptext {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;}.globetip:hover .globetiptext {visibility: visible;opacity: 1;}

/* 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;z-index:1;}@keyframes rotate {to {--angle: 360deg;}}@property --angle {syntax: "<angle>";initial-value: 0deg;inherits: false;}/* remove scrollbar */.shooting {-ms-overflow-style: none;scrollbar-width: none;}.shooting::-webkit-scrollbar {display: none;}

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

/* vertical graphic stacks */ .iconstack {vertical-align:top;width:110px;margin-right:10%;height:100%;font-family:starcruiser;}.iconstack img {max-width:110px;display: block;height:auto;} .iconstack img:hover {transform: rotate(30deg);}

/* overarching container */ .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; 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;margin:30px 0px 0px 30px;}.thicklime img {width:100%;display: block;height:auto;} 

/* 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;}

/* navigation containers */ .travel {position:relative;height:100%;width:50%;padding:15px;margin-top:0%;margin-left:0%;display:inline-block;vertical-align: top;}/* navigation bullets*/ 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;vertical-align:initial;} li.travel:hover{transition: 0.3s; display:block; text-decoration:none; background: #f3e8b0; color:#94735B;} li.travel a{background-color:transparent;text-decoration:none;}

/* voided bullets */  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.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;}

/* credits popup */ label[for]{color:#717171;text-decoration:none; cursor:pointer;}

dialog .popup-inner {border-radius:12px;box-shadow:0px 8px 36px 0px #C3AD9D;column-count: 3;column-gap: 0px;display: flex;z-index:9999;overflow:hidden;}.popmart {display:inline-block;vertical-align: top;vertical-align: top;width:230px;margin-left:0%;padding:10px;margin-top:0%;font-variant: small-caps; font-size: small;text-transform:lowercase;line-height:25px;}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;}

label[for="close-popups"]{ }

:root {
  --Popup-Fade-Speed:420ms;
  --Popup-Z-Index:9999; /* required */
  --Popup-BG-Color:#666;
  --Popup-BG-Color-Transparency:65%;
  --Popup-BG-Blur:5px;
  --Popup-Width:800px; /* required */
  --Popup-Max-Height:85vh;
  --Popup-Padding:20px;
  --Popup-Contents-BG:#fff;
}

/* 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 {cursor: pointer;width: 510px;height: 330px;float:left;border-radius:3px;margin-left:-90%;margin-bottom:30px;}.photobook img{border-radius:0px;}.photobook .hard {cursor: pointer;font-weight: bold;border: none;background-color:#f4f4f4;}.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 #999,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 {cursor: pointer;width: 900px;height: 600px;float:left;z-index:3;border-radius:3px;}.herobiz .hard {cursor: pointer;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 {cursor: pointer;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);}}



/* NOT IN USE */

.count{width:30%;z-index:99;margin-top: 0px;float:right;position:relative;}.count img{height:auto;width:27%;float:right;}.count a{background-color:transparent;text-decoration:none;}

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

.gradient{width: 100%;transition: 0.7s;height: 0;top:0;position:fixed;background: linear-gradient(30deg,#E8E2A7,#fffbd8,#dff7d5,#CAE8BE);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%;}}

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

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


.drumroll {
display:flex;
  align-items: center; /* Vertically centers the text and the line */
  width: 100%;        /* Forces container to take full width */
  margin-bottom:60px;
  flex-wrap: wrap; 
}

.line {
  flex-grow: 1;       /* Stretches the line to fill the middle gap */
  height: 0.5px;        /* Sets line thickness */
  background-color: #94735B; /* Sets line color */
  width:10px;
  margin: 0 10px;     /* Creates a gap between the text and the line */
}

.liner { padding:5px;
  border-radius:5px;
  display:flex;
  margin-bottom:10px;
  margin-right:10px;
  align-items: center; 
  background-color:#D5E6AF;
  font-variant: small-caps;font-size: small;font-size:13px;text-transform: lowercase;
  border-radius: 5px;border: 1px solid #94735B;box-shadow: 2px 2px #C3AD9D;
  cursor: pointer;
  }

.liner:hover{box-shadow: 3px 4px #C3AD9D;transition: .3s ease;}
  
.liner a{text-decoration:none;background-color:transparent;font-style: italic;}

.liner a:hover{color:#94735B; text-decoration:underline;transition: .3s ease;}
  

.username, .userlink {
  white-space: nowrap; /* Prevents text from wrapping to a new line */
}



#update-icon {
 display: flex;
 flex-direction: row-reverse;
 justify-content: center;
 align-items: center;
 position: fixed;
 top: 20px;
 right: 20px;
 cursor: pointer;
 z-index: 50;
}

#update-icon i {
 font-size: 21px;
 color: #717171;
}

#update-icon a{text-decoration:none;background-color:transparent;  }

#update-icon img {width:60px;}

#update-icon img:hover {transform: rotate(10deg);}


#update-wrapper {display: none;}

#update-content { 
 display: flex;
 justify-content: center;
 align-items: center;
 margin-right: 10px;
}

#update-arrow {
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 10px solid #fbfbfb;
}

#update-box {
 width: 160px;
 font-size: 12px;
 padding: 1em;
 background: #fbfbfb;
 color: #717171;
 border-radius: 5px;
 font-variant: small-caps;font-size: small;font-size:12px;text-transform: lowercase;
}

#update-box i {font-size: 1em; }

#update-box ul {padding: 1px; list-style:none;} 

#update-box li::before {content: '\2606'; margin: 5px;}

.update-title {font-weight: bold; font-size: 14px; line-height: 1.6em;}