body {
background-color: black;
/*background-image: url(otherjunk/images/fantasy.png);*/
}

@font-face {
font-family: myfont;
src: url(otherjunk/KernelPanicNbp-LyG3.ttf);
}

p {
font-family: myfont;
}

details {
display: inline;

}

details summary::-webkit-details-marker {
  display: none;
}

details summary {
  list-style: none;
}

a{
  color: #1e74e6;
  
}
/* ------------ */
/* page header/navigation */

.headerfr{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0px;
z-index: 3;
font-family: myfont;
display: flex;
justify-content: space-between; 
}

/* ------------- */
/* for all your quest needs */
.questyap {
background-color: rgba(30, 9, 43,0.7);
border-radius: 20px;
margin-bottom: 15px;

border-top: 2px solid #d6a1ff;
border-left: 1px solid #af72e0;


border-right: 1px solid #13011c;
border-bottom: 2px solid #13011c;
box-shadow: 0 -4px 5px rgba(141, 49, 222, 0.5);

z-index: -3;

}


.coloredtext {
background-image: linear-gradient(#ada0fa, #7e04c9);
color: transparent;
background-clip: text;
font-family: myfont;
padding: 10px;

}


/* ------------- */
/* front entrance page */
#frontpage {
display: flex;
flex-direction: column; 
text-align: center;
width: 100%;
height: 800px;
align-items: center;
justify-content: center;
}

.aa {
 width: 150px;
 animation: SCREAMS 0.1s infinite;
}


.aa img{
  width: 100%;
}


@keyframes SCREAMS {
  0% { transform: rotate(2deg)}
  50% { transform: rotate(-2deg)}
  100% { transform: rotate(2deg)}
}


/* ------------- */
/* main page */

#container {
text-align: center;
display: grid;
gap: 30px;
grid-template-columns: 1fr 4fr;
margin-top: 70px;
width: 90%;
height: 400px;
margin-left: auto;
margin-right: auto;
}

.gridbox {
height: 600px;

}

#handbean {
  transition: 1.7s ease-out;
  transform: translateY(0) translateX(0);
  position: fixed;
  right: -15vh;
  z-index: 2;
  bottom: -35vh;
}

#handbean img{
width: 1000px;
transform: scaleX(-1);
cursor: pointer;


}


/*blog*/

#blognav {
text-align: center;
height: 1000px;
margin-top: 2%;

background-image: linear-gradient(to bottom, #6370d6, #4e64a6);

font-family: myfont;
}

.entries {
background-color: red;
text-align: center;
}

.contentright {
  height: 100vh;
  background-color: blue;
}


.musicbtns img {
display: inline;
cursor: pointer;
width: 30px;
bottom:0;
transform: translateX(-6px);
}

#thecreature {
cursor: pointer;
position: fixed;
left: 60%;
top: 10%;
width: 250px;
height: auto;
}

/*hidden junk*/

#hiddenbox{
  display: none;
  transition: 0.5 ease;
  transform: translateY(-10px);
  opacity: 0.1;
}

#thekey {
  width: 80px;
  cursor: grab;
  
}

#keyhole {
  top: 15;
  width: 40px;
  transform: translateX(0);
 
}

#thekeydiv {
  margin: 0 auto;
  width: 100px;
  height: 60px;


}


input {
all: unset;
position: relative;
border: 1px solid #af72e0;
border-radius: 3px;
font-family: myfont;
color: orange;
padding: 5px;

background-color: black;
bottom: 15px;
  
}

#howdy{
 display: none;
  transition: 1.0 ease;
  transform: translateX(-10px);
  opacity: 0.1;
}