/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • resets + imports • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
@import url("/stuffs/fontawesome/css/all.min.css");

@import url('https://fonts.googleapis.com/css2?family=family=Righteous&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 * {
  vertical-align: baseline;
  background: transparent;
  scroll-behavior: smooth;
  box-sizing: border-box;
  transition: all ease .2s;
}
 


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}



body {
  max-width: 70%;
  margin: 0 auto;  color: #0f0a71;
  font-family: "Ubuntu", sans-serif;
  font-weight:400;
  font-size: 1em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  background-color: #c3a3ff;
  hyphens: auto;
  margin: 0 auto;
  line-height: 1.2;
}



/* 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • background • • 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/

/* the below styles the background which repeats the title and tagline in various scrawled forms */
#believe {
  position: fixed; 
  top: 0;
  left: 1em;
  width: 100vw;
  padding: 0em;
  height:100vh;    background: #4A08AC;
    background: radial-gradient(circle,#4a08ac 0%, #fe466b 100%);
  text-transform:uppercase;
  color:#fcbeec;
  overflow:hidden;
  z-index: -5; 
  font-family: 'Righteous', sans-serif;
  transition:none;
  opacity:.1;
  line-height: 1;
  transform: scale(2.25); display:block; 
  text-align: justify;
  font-size: 1em;}
  #believe span {margin-left:.5em;}
  #believe span:nth-child(3n) {margin-left:.7em;}
  #believe span:nth-child(5n) {margin-left:0em;}
  #believe span::before {content:" ";} 







a:hover {
  text-decoration: none;
}

header {
  text-align: left;
  margin: 0 auto;
  padding:  .5em .8em;
  border-left: 5px solid #4a08ac;
  border-right: 5px solid #4a08ac;
  background-color: #4a08ac;
}

nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
}

nav a[aria-current="page"] {
  font-weight: bold;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack>* {
  margin-block: 0;
}

.stack>*+* {
  margin-block-start: var(--space, .5em);
}



main {
  display: grid;
  grid-template-columns: 1fr 27%;

  border-left: 5px solid #4a08ac;
  border-right: 5px solid #4a08ac;
  gap: 0px;
  opacity:1;
  background-color: #e8e8ff;
}

main article {
  padding: 1em;
  padding-right:0;
    background-color: #e8e8ff !important;
}

main aside {
  padding: 1em;
}
#side{ background-color: #e8e8ff !important;}
footer {
  text-align: center;
    text-align: center;
  border-left: 5px solid #4a08ac;
  border-right: 5px solid #4a08ac;
  margin: 0 auto;
  color:#e8e8ff;
  padding: .5em;
  background-color: #4a08ac;
  font-size: 0.8em;
}


/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • navigation • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
nav {
line-height: 1;
color: 	#c3a3ff;
width: 100%;
background-color: #4a08ac;
border-radius:5px;
padding: .3em;
font-size:1.2em;
box-shadow: 4px 4px 3px 0px #c3a3ff;
margin: 1em auto 1em;
}
nav ul {
list-style-type: none;
margin: 0;
  text-transform:uppercase;
font-family: "Righteous", sans-serif;
padding: .1em;
}
nav li ul li {
border: 0;
}
nav li a,
nav li span {
display: block;

font-weight: 700;
color: 	#e8e8ff;

padding: .1em 0.3em;
position: relative;
cursor: pointer;
transition: background-color 0.5s ease;
}
nav li a::before {
content: none;
}
nav li a:hover,
nav li span:hover {
background-color: 	#e32cc8;
color:#e8e8ff;


}
nav li span::after {
content: "⏵";
font-weight: 700;
float: right;
padding-right: .1em;
line-height: .8;
transition: transform 0.3s ease;
}
nav li span.open::after {
transform: rotate(90deg);
}
nav li span.open {
  background-color: 	#e32cc8;

text-shadow: none;
}
 
.submenu {
height: 0;
text-transform:none;
font-family: "Ubuntu", sans-serif;
overflow: hidden;
transition: height 0.5s ease;
background-color: 	#c3a3ff;
padding: 0;
}
.submenu li {
text-indent: 0em;
font-size: .8em;
font-weight: normal;
letter-spacing: normal;
text-transform: none;

}
 nav .submenu a {
position: relative;
color: #0f0a71;
background-color:	#c3a3ff;
font-weight: 800;
font-size:smaller;
padding: 0.4em;
text-shadow: none;
}
 nav .submenu a:hover {
  background-color: 	#e32cc8;
  color:#e8e8ff;       

}
#top {
display: none;
}
.button {
display: none;
}
/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • headers and text • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/

img.claire {
  margin: auto;
  display: block;
width:350px;
  border-radius: 5px;
  border:0;
  padding: 0;

  background-color: #4A08AC;
  color: #e8e8ff;

  box-shadow: 4px 4px 3px 0px #c3a3ff;
  overflow: hidden;

  transition: 0.3s;
}


#top {
display: none;
}
.button {
display: none;
}

 .gray * {
            color: #c3a3ff !important;
          }
         *.gray {
            color: #c3a3ff !important;
          }

 li.gray:before {content:"✎"}


main article img.feature {border-radius:5px; border:1em solid #4a08ac;}
 .right, 
figure.right, 
img.right {
    float: right;
    margin: .5em !important;
    width: 30%;
}
.left, 
figure.left, 
img.left {
    float: left;
    margin: 1em 1em 1em 0em;
    width: 30%;
}
.alert  {
  width: 100%; 
  margin: 1em auto;
  border-radius: 5px;
  padding:.5em;
  background-color: #4a08ac;
  transition: 0.3s;
  color:#e8e8ff;
box-shadow: 4px 4px 3px 0px #c3a3ff;
  display: block;
}

article p {margin: 0.5em 0;}


h1, h2, h3 {text-transform: uppercase;}
mark {
  background-color: 	#c3a3ff;
  
  border-radius: 5px;
}
hr {  background-color: #4a08ac; border:0; height:10px;}
footer p {
text-align: center;
padding: .6em;
margin: 0 auto;
width: 100%;
}
footer span {
  font-weight:600;
}
header h1 {
margin:0;
font-size: 3em !important;
display:inline;
  font-family: "Righteous", sans-serif;

color:#e8e8ff !important;

  animation: neon 1s infinite ease-in-out !important;
}
header h1 span {
  animation: neon 1s infinite ease-in-out !important;}
main h1, aside h1 {
font-size: 3em;
color:#4a08ac;
text-shadow: 2px 2px 2px #c3a3ff;
padding: 0em;
MARGIN-TOP: .3EM;

Margin-bottom:.5em;
border-radius:5px;
  font-family: "Righteous", sans-serif;
}
#sidetitle {display:None;}
h2 {
  font-size:2em;
  padding-bottom:.1em;
border-bottom: 10px solid #4a08ac;
color:#4a08ac;
text-shadow: 2px 2px 2px #c3a3ff;
margin: .5em 0;
  font-family: "Righteous", sans-serif;
} 
h3 {
border-left: 10px solid #4a08ac;
color:#4a08ac;
font-size:1.5em;
text-shadow: 2px 2px 2px #c3a3ff;
margin-bottom:.5em;
padding-left:.3em;
MARGIN-TOP: 1EM;
  font-family: "Righteous", sans-serif;
}
p {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
text-align: justify;
}    



em {font-weight:600;font-style:normal}

main .fa-paw,  aside .fa-paw, main .fa-fire-flame-curved, aside .fa-fire-flame-curved {
  COLOR: #4A08AC;
  background: radial-gradient( 
  #4a08ac,
  #8438c4,
  #c94fd9,
   #8438c4,
     #4a08ac
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Font Awesome 5 Free"; 
}

/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • links of all sorts • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/ 



 




a {

  color: #e32cc8;
  font-weight: 900;
  text-decoration: none;

  
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(227, 44, 200, 0.4) 50%
  ); 
  background-size: 100% 200%;
  background-position: 0 0;
  transition: background-position 0.9s ease-in-out;
}

a:hover {
  background-position: 0 100%;
  color: #e32cc8;
}

a:has(img) {
background:transparent;
}



@keyframes neon {

  0%, 100% {
    text-shadow:
      0 0 4px  #da54ff,
      0 0 8px  #f246ff,
      0 0 12px #ff33ff,
      0 0 16px #ff1aff;
  }
  50% {
    text-shadow:
      0 0 8px  #c770ff,
      0 0 16px #d36aff,
      0 0 24px #e756ff,
      0 0 32px #ff40ff;
  }
}
:where(#status a, footer a, cite a, #sounds a, small a, .alert a, figcaption a):any-link {
  color: #ff80ec;
}

:where(#status a, footer a, #sounds a, small a, .alert a, figcaption a):hover {
  color: #ff80ec;
}




footer a {position:relative; z-index:1;} 


/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • blockquotes • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
blockquote {
border-radius: 5px;
padding-top: 0em;

box-shadow: 4px 4px 3px 0px #c3a3ff;
padding:0em;
background-color: #c3a3ff;
color: #0f0a71;
border:.8em solid #4a08ac;

width: 100%;
margin: 1em auto;
position: relative;
}
blockquote p {
margin: .5em;
}
blockquote p:has(cite) {margin:0; padding:0}
blockquote cite {
  border-top:.8em solid #4a08ac;
display: block;
background-color:#4a08ac;
color:#e8e8ff; 
padding: 0;
width: 100%;
font-style: normal;
margin: 0em;
text-align: center;
}
/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • media styling • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
.cinema {
margin: 0 auto;
width: 100%;
padding:1em;
background-color: #4a08ac;

box-shadow: 4px 4px 3px 0px #c3a3ff;
border-radius:5px;
}
.video {
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 5px;
padding: 0em;
border:0;
color: #e8e8ff;
margin: auto;
position: relative;
}
img {max-width:100%; }
article img {max-width:100%; border-radius:5px; border: .8em solid #4A08AC}
.free {border:0}

figure {
padding:.5em;
border-radius:5px;
margin: 1em auto !important;
width:100%;
max-width: 100%;
padding: 1em;
color: #e8e8ff;
background: #4a08ac;

box-shadow: 4px 4px 3px 0px #c3a3ff;
}
figure img {
width: 100%;
max-width:100%;
margin: 0;
border-radius: 5px;
border: 0em solid #0f0a71;
margin-bottom:.5em;
box-sizing: border-box;
}
figure a::before {
display: none;
}
figcaption {
color:#e8e8ff;
background-color: 	transparent;
border-radius:0px;
text-align: center;
padding:.0;
margin: 0 auto 0 0;
}
figcaption p {margin: 0;padding:0em;}
/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • lists • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
article ol,
article ul {
text-align: justify;
margin: .5em auto;
padding:0;
}
article ol {
counter-reset: custom-counter;
}
article ol li,
article ul li {
margin: .5em auto;
width: 100%;
padding: 0em .3em;
}
article ol li {list-style: none;}
article ol li:before {
counter-increment: custom-counter;
content: counter(custom-counter, decimal-leading-zero) ":";
color: #4a08ac;
text-shadow:
-1px -1px 0px 	#c3a3ff,
1px -1px 0px 	#c3a3ff,
-1px  1px 0px 	#c3a3ff,
1px  1px 0px 	#c3a3ff;
font-weight:bold;
font-size:1.4em;
padding-right: .3em;
}
article ul {
  list-style: none; 
  padding-left: 0;
}

article ul li {
  position: relative;
  padding-left: 1.5em; 
}

article ul li::before {
  content: "\f1b0"; 
  font-family: "FontAwesome";
  font-size: 1em;
  font-weight: 900;
  color: #4a08ac;
  text-shadow: 2px 2px 2px #c3a3ff;
  position: absolute;
  left: 0;
  top: 0;
}

article ul.linx li a:first-of-type::after {content:": "}
article ul.linx li.aol a:first-of-type:after {content:": "}
article ul.linx li.irl a:first-of-type:after {content:": "}
article ul.linx li.gray a:first-of-type:after {content:": "}

article ul.linx li.irl:before {
  content: "\f185"; 
  font-family: "Font Awesome 5 Free"; 

  font-weight: 900;
}

article ul.linx li.aol:before {
  content: "\f186"; 
  font-family: "Font Awesome 5 Free"; 

  font-weight: 900;
}

article ul.linx li.gray:before {
  content: "\f303"; 
  font-family: "Font Awesome 5 Free"; 

  font-weight: 900;
}


 #changes li {
  list-style-image:none;
  border:0;
  }
  #changes li span {font-weight:bolder}
   #changes li span::after{content:":"}
  
 #changes li::before {
  content: '✓';
  font-weight:bold;
  font-size:1.4em;
  margin-right: 6px;
  color: #4a08ac;
}
 #todo li {list-style-image:none;  border:0;}
 #todo li::before {
  content: '✎';
  font-weight:bold;
  font-size:1.4em;
  margin-right: 6px;
  color: #4a08ac}

 #maybe li {list-style-image:none;}
 #maybe li::before {
  content: '☁';
  font-weight:bold;
  font-size:1.4em;
  margin-right: 10px;
  color: #4a08ac}







/* 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
        • • tables • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/


table {
	margin: 1em auto;
	width: 100%; 
  
box-shadow: 4px 4px 3px 0px #c3a3ff;
  border:.8em solid #4a08ac;
	background-color: 	#c3a3ff;
	border-collapse: separate;
	border-spacing: 0;
    font-size: .9em;
    padding: 0em 0em .3em;
    margin: auto;
    border-radius:.5em;
    
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    overflow: hidden;
}
table tr {
  border-top:.8em solid #4a08ac;}
table tr:first-of-type{border:0}



 

table td {
	padding: .1em 0.3em;
    text-align:center;
	vertical-align: middle;
}

table th {
	font-size: 1.2em;
color:#e8e8ff;
  font-family: "Righteous", sans-serif;
  vertical-align:middle;
  text-align:center;
  padding:.2em;
  margin-bottom:.3em;
  background-color: #4a08ac;
  
}





/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • definitions etc • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
dl {
margin: 0.5em auto;
width: 100%;
border-radius: 5px;
background-color: 	#c3a3ff;
padding: .5em;
}
dt,
dd {
display: block;
margin: 0;
}
dt {
border-radius: 5px;
font-size: 1.2em;
color:#e8e8ff;
  font-family: "Righteous", sans-serif;
background-color: #4a08ac;
padding: .1em 0.3em;
}
dd {
padding: 0.5em;
background-color: 	#c3a3ff;
}
details {
margin: 0.5em auto;
border-radius: 5px;
padding:.3em;
width: 100%;
background: 	#c3a3ff;
}
summary {
cursor: pointer;
font-size: 1.2em;
  font-family: "Righteous", sans-serif;
border-radius: 5px;
padding: .1em 0.3em;
margin:.3em;
background-color: #4a08ac;
}
details p {
margin: 0;
padding: 0.4em;
}

.code {height:20em}

/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • forms and buttons • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/ 

button {
        background-color: #4a08ac;
        border-radius: 10px;
        border:5px solid #4a08ac;
        text-transform:uppercase;
        text-align: center;
display:block;

box-shadow: 4px 4px 3px 0px #c3a3ff;
padding: 0.5em;
font-weight:800;
        color: #e8e8ff;
        width:fit-content;
        font-family: 'Righteous', sans-serif;
        font-size:1.1em;
        margin:1em 0;
        cursor: pointer;
        transition: all 0.4s ease;
    }
    button:hover {background-color:#ff80ec; color:#0f0a71}








input,
textarea {
background: #4a08ac;
border: 0px;
display:block;
        border-radius: 10px;
padding: 0.5em;
font-weight:800;
color:#e8e8ff;
box-shadow: 4px 4px 3px 0px #c3a3ff;
margin: 1em 0;
resize: none;
width:76%;
}
button {width:fit-content;}
textarea {
height: 6em;
}
textarea::placeholder,
input::placeholder {
color: #e8e8ff;
font-weight:400;
}
 
#hiss, #invalid {display:none;width:100%; text-align:center; font-size:.8em;}
#sent {
  font-family: "Righteous", sans-serif;display:none;text-transform: uppercase;font-size:1.4em;}
/* 

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
        • • status • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~  
*/

.socials {text-transform:uppercase;font-family: "Righteous", sans-serif;font-size:.9em;color:#4A08AC:center; margin: 1em auto 0;}

#status {
box-shadow: 4px 4px 3px 0px #c3a3ff; margin-bottom:.2em;
  background-color: #4a08ac; padding:.7em; color:#e8e8ff; border-radius:5px;}
#statuscafe-username {font-size:.9em; font-family:"Righteous", sans-serif; text-transform:uppercase}


#statuscafe-content {
  padding-top:.1em; font-size:.8em;
    text-align: justify;
}
#statuscafe-username::after {
    content: " said:";
}




/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • to top button • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/

@property --progress {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: -90deg;
}

@keyframes progress {
  0% {
    --progress: 0%;
    --angle: 0deg;
  }
  
  2% {
    --angle: -90deg;
  }
  
  100% {
    --progress: 100%;
  }
}

.topup {
  --yellow: oklch(38.68% 0.215 288.75);
  --white: oklch(60.51% 0.245 296.52);
  color:#e8e8ff;
  background-image: linear-gradient(var(--yellow) 0% var(--progress), var(--white) var(--progress) 100%);
  border: 4px solid #4a08ac;
  border-radius: 5px;
  display: block;
  padding: .1em 0.3em;
  position: fixed;
  inset: auto 1rem 2rem auto;
  overflow: hidden;
  animation: progress linear;
  animation-timeline: scroll();
}

@supports not (animation-timeline: scroll()) {
  .topup {
    background: var(--yellow);
  }
}

.topup:is(:link, :visited) {
  color:#e8e8ff;
  text-decoration: none;
}

.topup span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.topup svg {
  display: block;
  fill: none;
  stroke: #e8e8ff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3px;
  transform: rotate(var(--angle));
}




/*◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
the faux marquee in the sidebar
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇*/
#marquee {
  width: 100%;
  margin:0em 0 0;
  overflow: hidden;
}

#stamps {
  display: block;
}

.track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 275s linear infinite;
  width: 15200px;
}

#marquee:hover .track { 
  animation-play-state: paused;
}

.track img {
  width: 99px;
  height: 56px;
  opacity: 0.5;
  margin: .5em .1em;
  transition: transform 0.2s, opacity 0.2s;
}

.track img:hover {
  transform: scale(1.1);
  opacity: 1;
  position: relative;
  z-index: 100;
}

@keyframes scroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-15200px); 
  }
}




/* 

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
        • • hidden chat • •     
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~ 
*/
#stripes {    position: fixed;
  top: 0%;
  left: 0%;
  width: 100vw;
height:100vh;
  z-index: 900; 
   display:none;
 background-color:#c3a3ff;
opacity:.9;}

#chatbox {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50vw;
display:none;
transition: opacity .5s ease-in-out;
min-height:600px;
  transform: translate(-50%, -50%);
  background: #e8e8ff;
  box-shadow: 0 4px 18px #c3a3ff;
  z-index: 1000; 
border-top:.8em solid #4a08ac;
border-bottom: .8em solid #4a08ac;
border-radius:5px;
padding-bottom:1em;
}

#chatbox h2 {  font-size: 2.7em;
  color:#4a08ac;
  text-shadow: 2px 2px 2px #c3a3ff;
  
    font-family: "Righteous", sans-serif;
    text-align:center;
width: 76%;
letter-spacing:.1em;
font-size: 2em;

padding: 0.2em;
margin: .2em auto 0.2em auto;
text-transform: uppercase; 
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }

  50% {
      transform: scale(1.1);
  }

  100% {
      transform: scale(1);
  }
}
.pulse {
  animation: pulse 1s infinite;
}

.fadein {animation:fadein .5s;}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

#chatbox P {margin:1em; font-size:.8em;}






#groupchat P {margin:1em; font-size:.8em;}


#groupchat {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50vw;
display:none;
transition: opacity .5s ease-in-out;
min-height:600px;
  transform: translate(-50%, -50%);
  background: #e8e8ff;
  box-shadow: 0 4px 18px #c3a3ff;
  z-index: 1000; 
border-top:.8em solid #4a08ac;
border-bottom: .8em solid #4a08ac;
border-radius:5px;
padding-bottom:1em;
}


#groupchat h2 {  font-size: 2.7em;
  color:#4a08ac;
  text-shadow: 2px 2px 2px #c3a3ff;
  
    font-family: "Righteous", sans-serif;
    text-align:center;
width: 76%;
letter-spacing:.1em;
font-size: 2em;

padding: 0.2em;
margin: .2em auto 0.2em auto;
text-transform: uppercase; 
}





/*
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
   last.fm sounds of the now
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
i learned about the last.fm stuff
       from the amazing
 Prashant Shrestha (prashant.me)
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
*/

#lastfm {
  display:flex;
  width: 100%; /* this should remain 100% obviously, if you want it to entirely fill the container in which it is placed, ie, a sidebar, etc... */
  margin: 0.1em auto;
  border-radius: 5px;
  background-color: #4a08ac;
  transition: 0.3s;
  color:#e8e8ff;
box-shadow: 4px 4px 3px 0px #c3a3ff;
}

#covers {
  width: 20%;
  float: left;
  display: block;
}

#lastfm a img#albumart {
  width: 100%;
  aspect-ratio: auto 1 / 1;
  margin: 0.5em; /* border for the album art image, also can function as padding for it if you want to change it to the background color of #lastfm */
  border-radius: 5px;
}

#sounds {
  text-align: center;
  float: right;
  width: calc(100% - 2em);
  display: block;
}

/* the next four entries represent wholly aesthetic choices and can be played with and changed as you wish, mostly without breaking the widget :-) */

#sounds h3 {
  font-size: 1.5em;
  text-align: center;
  margin: auto;
  font-family: "Righteous", sans-serif;
  text-transform: uppercase; 
}

#sounds p {
  margin: .5em;
  width:98%;
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
  padding: 0.4em;
}


@media screen and (max-width: 1600px) {body {
max-width: 90%;
} }

@media (max-width: 1000px) {
  main {
    display: block;
  }
  main article {padding-right:1em;}

#chatbox {width: 80vw}
#sidetitle {display:block;}

#mobile {
position: fixed;
top: 0em;
right: 0;
display: flex;
border-bottom-left-radius: 5px;
background-color: #4A08AC;
flex-direction: row;
z-index: 1000;
padding: .5em;
gap: 10px;
}
.button {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
z-index: 1000;
background-color: transparent;
padding: 5px;
gap: 10px;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
  border: 4px solid #4a08ac;
  border-radius: 5px;
color: #4a08ac;
background-color: #e8e8ff;
text-decoration: none;
font-weight: 1000;
border-radius: 5px;
font-size: 18px;

transition: transform 0.2s, background-color 0.2s;
}
.button:hover {
transform: scale(1.1);
background-color: 	#c3a3ff;
color: #0f0a71;
}
.question {
font-weight: bold;
}
.up-arrow {
font-weight: bold;
font-size: 22px;
}
.button a:hover {
color: #0f0a71;
background-color: 	#c3a3ff
}
.button a {
position: relative;
color: #0f0a71;
font-weight: 1000;
}
.button a::before {
content: none;
background: transparent;
height: 0;
}
.button a:hover::before {
content: none;
height: 0;
background: transparent;
}
html {scroll-padding-top: 5em;}
}

#topup {display:none}


















 
/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • index page • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
        #unfolder {
            font-weight: bold;
          color:#4a08ac;
          font-weight: 900;
          border-top:1px dashed #c3a3ff;
            cursor: pointer;
          } /* this particular portion styles the initial link to open the index completely */
          .hide {
            display: none;
          }
          .show {
            display: inherit;
          }
          
        
          #contents #garden {
            box-sizing: border-box;
            margin: 1em auto;
            padding: 0px;
            width: 90%;}
        
        #contents #innergarden {
            padding: .2em;
          border-radius:5px;
          color:#4a08ac;
            
        }
        
        #contents a {text-decoration:none;}
        
        #contents .eclipse + ul {
            display: none;
        }
        
        #contents .eclipse {
            cursor: pointer;
        }
        
        #contents #uneclipse {
            width: 90%;
            margin: auto;
        }
        
        #contents #garden ul {
            margin: auto;
            width: 90%;
          border:0px;
            text-align:left;
            border: 0px;
            padding:0;
            margin-top: 0em;
            margin-bottom: 0em;
        }
        
        
        
        #contents #garden ul li {list-style-type: "\f1b0";
            list-style-position: inside; vertical-align: middle; border-bottom:1px dashed #c3a3ff; margin:0; padding:.3em 0;}
          #contents #garden ul li::marker {color:#4a08ac; line-height:1; 
            text-shadow: 2px 2px 2px #c3a3ff;	font-size:1em;   font-family: 'FontAwesome';} 
                #contents #garden ul ul li::marker {color:#7808ac}
                #contents #garden ul ul  ul li::marker {color:#8608ac}
        #contents #garden ul ul li,
        #contents #garden ul ul ul li {
            border: 0px; margin:0;
        }
        #contents #garden ul ul li { 
           margin:0px;}
        
        #contents #garden ul,
        #contents #garden ul ul,
        #contents #garden ul ul ul {
            color: #4a08ac;
        
            border: 0;
        }
        #contents #garden a {margin-left:.6em;}
        
        #contents #garden .gray a {
            color: #c3a3ff;
          }
          #contents #garden .gray a::before{background-color: transparent;} 
        
          #contents #garden  .gray * {
            color: #c3a3ff;
          }
          
        #contents #garden ul li::before {display:none}
          #contents #garden li.gray {
            list-style-type: "∅";
          }
        #day {font-size:2em;}
article {display: block !important;}
        #contents .mast {display:none}
         .recent {width:40%; display:block; float:inline-start; background-color:#4a08ac; color:#e8e8ff;  margin: .5em 1em 1em 0em;
  border-radius: 5px; 
  padding:.4em .4em .5em;
  transition: 0.3s;
box-shadow: 4px 4px 3px 0px #c3a3ff;}
     .recent a {color:#e8e8ff}
        
     .recent a:hover { color:#ff4ae4;}
  .recent h2 {
text-shadow: 1px 1px 1px #c3a3ff; margin:.2em;padding-top:0; line-height:1;border-bottom-color: #e8e8ff;color:#e8e8ff}

#contents .recent ul {margin:auto 0; padding:auto 0;}
 .recent ul li {list-style-type:none;text-align:left; border:0;margin: .2em .5em;  font-size: 0.9em;}
.recent ul li::before {color:#e8e8ff}
@media screen and (max-width: 1000px) {
 .recent {width:100%} }


#cleared {cursor:pointer;}















/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • guestbook • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/


#guestbooks___guestbook-messages-container blockquote {border:0; margin:0 auto; background:transparent; box-shadow:none;}
hr {display:none}
#guestbooks___guestbook-messages-container p {margin: 1em 0 .3em}
#guestbooks___guestbook-form > input {margin:.3em auto 0;}
#text {margin:0}
#guestbooks___guestbook-form > input[type=submit] {width:20%; margin:auto 0 .3em auto}
#guestbooks___guestbook-made-with {margin-top:.5em;}



/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • songs page • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/



    #recentsongs {
      width: 100%;
      margin: 0.5em auto;
    }

    
    #recentsongs .song {
      display: flex;
      width: 100%;
      border-radius: 0.5em;
      background-color: 	#c3a3ff;
      justify-content: start;
      gap: 0em;
      padding: 0.3em;
      margin:0.5em 0em;
    }
    
    #recentsongs .songinfo {
      flex: 1;
      margin: 1em;
    }
    
    #recentsongs .songtitle {
      text-transform: "uppercase";
      
  font-family: 'Righteous', sans-serif;
      width:100%;
      font-size: 1.5em;
      line-height:1em;
    }
    
    #recentsongs .artist {
      padding-top:0.3em;
      font-size:1.1em;
      text-transform: "uppercase";
      
	letter-spacing:.1em;
    }
    
    #recentsongs .albumart img {
  border-radius: 0.5em;
  height:100%;
  width:8em;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

    
    #nosongs {
      font-size: 1.2em;
      padding: 0.5em;
      text-align: center;
    }



    /*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • not found page • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
    #going {
        background-color: #4a08ac;
        border-radius: 10px;
        text-transform:"uppercase";
        text-align: center;
        color: #e8e8ff;
float:inline-start;
        font-family: 'Righteous', sans-serif;
        font-size:.9em;
        margin: 0 .5em .5em  0;
        width:30%;
        padding: 5px 10px;
        cursor: pointer;
        transition: all 0.4s ease;
    }
    #going:hover {background-color:#c3a3ff; color:#0f0a71} 




















    /*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • liked and stamps • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/



.stampification {width:100%; text-align:center;}
.stampification img {width:99px; border:0;height:fit-content;}


#siwebring #templateWebring {
    font-family: trebuchet ms, sans-serif;
    text-align: center;
    width: 315px;
    margin:auto;
    height: 175px;
    background: url('/siwebring/siwidgetbg.png') no-repeat;
    background-size: cover;
    border: 3px #FF74B8 solid;
    font-size: 16px;
}

#siwebring #templateWebring a {
    color: #E7338C;
}

#siwebring #templateWebring a:hover{
    font-weight: bold;
} 

#siwebring #webringboxes {
display: flex;
justify-content: center;
align-items: center;
padding-top: 10px;
height: 100px;
}

#siwebring #webringiconbox, #siwebring #iconWebring {
    width: 100px ;
    height: auto;
    display: block;
}

#siwebring #webringiconbox {
    border: 3px solid #FF74B8;
    border-radius: 4px;

}

#siwebring #webringdescbox {
    width: 170px;
    margin-left: 20px;
}

#siwebring #webringdesc {  
    -webkit-text-stroke: white 3px;
    paint-order: stroke; 
}

#siwebring #webringlinks{
    width:100%;
    margin:auto;
    text-align: center;
}
#siwebring p {text-align:center}

/* styling the table itself */
table.outlinks {
	margin: 2em auto;
	width: 100%; /* please change width of table as you fancy, as well as top-bottom margin, but if you leave the left-right margins set toauto, it will remain centered */
	background-color: #4a08ac; /* color of the table cell's background (except the header) */
	border-collapse: separate;
	border-spacing: 0;
    
color:#0f0a71;
	border-radius: 5px;
	overflow: hidden;
}


table img {border:0; margin:0; padding:0;}
table.outlinks td,
table.outlinks th {
	border: 5px solid #4a08ac; /* inner border, looks best if same color as outer */
	padding: .3em;
  
    background-color: #c3a3ff;
	vertical-align: middle;
}
table td {padding-top:.5em; padding-bottom:.5em;}
/* making sure the buttons have the correct amount of space within the first row of cells; change if using a different button size */
table.outlinks td:first-child {
	width: 88px;
	height: 31px;
}
table.outlinks td:first-child a::before{display:none}






/*
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
• • welcoming animation • •
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~
*/
@keyframes welcome {
  0% {
    opacity: 0;
    transform: translateY(-400px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
header, main, footer  {
  opacity: 0;
  animation: welcome 2s ease-out forwards;
}