@font-face {
 font-family: "Orbitron"; 
 src: url('Orbitron-VariableFont_wght.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

@font-face {
  font-family: "RiverAdventurer";
  src: url('River_Adventurer.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; 
}

@font-face {
 font-family: "ChineseRocks";
 src: url('Chinese_Rocks_RG.otf') format('opentype');
 font-weight: normal;
 font-style: normal;
}

/* https://fontesk.com/river-adventurer-font/ */

body {
  color: 
  #ffffff;
  background: linear-gradient(0deg, rgba(253, 100, 29, 1) 0%, rgba(252, 176, 69, 1) 50%, rgba(252, 212, 69, 1) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: Arial;
  font-size: 1.4em;
  margin: 0;
  cursor: crosshair;

}

h1 {
  font-family: ChineseRocks, RiverAdventurer, Orbitron;
  font-weight: bolder;
  padding: 0;
  margin: 0;
  font-size: 2em;
  }
  
h1 a {
  text-decoration: none;

}
  
h2 {
 font-family: Orbitron;
 color: #e9ffea;
 margin: 1rem 0rem 1rem 0rem;
}
 
/* header bar */

#title {
    background-color: #000000;
    margin: 0%;
    padding: 1px 2% 1px 3%;
    text-decoration: none;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

#title a {
 color: #dc8533;
 transition: 0.8s ease;
 text-decoration: none;
 
}

#title a:hover {
 transition: 0.8s ease;
 color: #ffe853;
 
}


/* PAGES */
.container {
padding: 1% 1% 3% 3%; 
 justify-content: space-around;
  max-width: 90%;

}

.page-content { 
  display: flex;
  flex-flow: row;
  margin: 2px;
  flex-wrap: nowrap; 
  width: 90%;
  align-items: flex-start;

 
}

#page-text {
 width: 40vw; 
 padding: 0rem 2rem 5rem 2rem; 
 border: .2rem solid;
 border-color: rgb(40, 223, 144);
 background-color: #000000b5;
 display: flex;
  border-radius: 1px 1px 1px 1px;
  text-align: left;
  text-shadow: 2px 2px 1px black;
  max-height: 50vh; 
  overflow: auto;
}

#page-text p { 
    margin: 0.5em;
}

#cryptidimg {
width: 30vw;
height: auto;
padding: 3% 2% 2% 4%;

}

#cryptidimg img {
  width: 25vw;
  height: auto;
  max-width: 35vw;
border-radius: 50%;
/* border: 1px solid rgba(40, 223, 144, 1);*/
border: .2rem solid rgba(101, 67, 33, .9); 
outline: .8rem solid rgba(233, 224, 195, 1);
box-shadow: 0px 0px 2px .9rem rgba(0, 0, 0, 1);




/* filter: drop-shadow(1px 0px 0px rgba(40, 223, 144, 1)) 
drop-shadow(-1px 0px 0px rgba(40, 223, 144, 1))
drop-shadow(0px 1px 0px rgba(40, 223, 144, 1))
drop-shadow(0px -1px 0px rgba(40, 223, 144, 1))
drop-shadow(2px 0px 0px rgba(101, 67, 33, 1)) 
drop-shadow(-2px 0px 0px rgba(101, 67, 33, 1))
drop-shadow(0px 2px 0px rgba(101, 67, 33, 1)) 
drop-shadow(0px -2px 0px rgba(101, 67, 33, 1)) 
drop-shadow(4px 0px 0px rgba(211, 211, 211, 1))
drop-shadow(-4px 0px 0px rgba(211, 211, 211, 1))
drop-shadow(0px 4px 0px rgba(211, 211, 211, 1))
drop-shadow(0px -5px 0px rgba(211, 211, 211, 1)) 
drop-shadow(5px 0px 0px rgba(0, 0, 0, 0.8))
drop-shadow(-5px 0px 0px rgba(0, 0, 0, 0.8))
drop-shadow(0px 5px 0px rgba(0, 0, 0, 0.8))
drop-shadow(0px -5px 0px rgba(0, 0, 0, 0.8)); */

/* animation: float-up-down 2.5s ease-in-out infinite alternate; */


}

.footer {
background-color: orange;
justify-content: center;
display: none;

}

.footer a {
    color: black;
    
}

 button {
    background-color: black;
    color: white;
    padding: 10px 20px 22px 20px;
    width: 10%;
    margin: 6px;
    border-radius: 20px;
    font-weight: bold;
    text-align: center;
    font-size: 50%;
    box-shadow: 4px 4px 0px orange;
    border: 1px solid orange;
 }
 
button:hover {
cursor: pointer;  
}

button:active {
   box-shadow: none;
   transform: translate(5px, 5px);

}

.sticky-bar {
   position: fixed;
   bottom: 0;
   width: 98.7%;
   height: 40px;  
   background: black;
   padding: 10px 10px 15px 10px;
   display: flex;
   justify-content: center;
   margin: 0;
}


#page-text::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#page-text::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 2px;
}
 
/* Handle */
#page-text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.9); 
  border-radius: 2px;
}

/* Handle on hover */
#page-text::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,rgba(255, 245, 140, 1) 0%, rgba(189, 255, 156, .9) 100%); 
}

 @keyframes float-up-down {
      0% {
        transform: translateY(0px); /* Starting position, no vertical offset */
        transform: translateX(0px);
      }
      50% {
        transform: translateY(-20px); /* Move up by 10 pixels */
      }
      100% {
        transform: translateY(0px); /* Return to starting position */
        transform: translateX(0px);
      }
    }

@media (max-width: 800px) {

.container {
align-items: center;
margin: auto;
padding: 0px 0rem 0px 2rem;

}

.page-content {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-content: center;
    justify-content: center;
    }

#cryptidimg {
  display: flex;
  width: 90vw;
  justify-content: center;
  max-height: 30vh;
  animation: none;
  z-index: -10;
  padding: 3vh 0px 0px 0vw;
}
#cryptidimg img {
  display: flex;
  width: 85vw;
  height: auto;}

#page-text {
    justify-content: center;
    width: 85%;
    margin: 3vh 0px 0px 0px;
    font-size: 1.1rem;
    max-height: 33vh;    
}

#title {
    justify-content: center;
}

#title p {
    display: none;
}

button {
  padding: 0px 10vw 0px 10vw;
  margin: 0px 10vw 0px 3vw;
   box-shadow: none;
   border: 3px solid orange;

}

button:active {
 box-shadow: none;
}


}

/* .footer {
    display: flex; } */


}