/*OPENING MOVE: hi who is accessing the Grand Central Library's database (prompts viewer to input name) (does not have to be real name)*/
  
.lobby {
      opacity: 1;
      transition: opacity 4s ease;
}

.lobby.fade-out {
      opacity: 0;
}

.page-content.fade-in {
      opacity:1;
}

/* utilizes function: signatureDetected*/
.lobby:signatureDetected {
  opacity:0;
}

/* i might not need the down below. still functions for home atm though 5/23/25*/
#welcome-section {
  width:500px;
  border-radius:2px;
  height:300px;
  margin:0% 10%;
  overflow:auto;
}

/* observing style */
/* GRAND CENTRAL LIBRARY - PREFACE. */

#pbody {
  font-family:"Play";
  background-image:url(/assets/pattern3.png);
  background-repeat:repeat;
  background-position: 50% 0;
  background-size: 200px;
  background-color:#162f34;
  color: #ff5f4d;
  font-size: 1em;
  line-height: 1.5em;
}

/* THE REST IS JUST COPYPASTED SO CHANGE IT*/

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

/* Hide scrollbar for IE and Edge*/
.noscroll {
  -ms-overflow-style: none;  /* IE and Edge */
}

/* Hide scrollbar for Firefox */
.noscrollf {
  scrollbar-width: none;
}

p { 
    font-weight: bold;
}

button {
  font-family: "something else";
  color: white;
  font-size: 0.9em;
  line-height: 1em;
}

.pclickable {
  border:none;
  border-radius:15%;
  background-color:transparent !important;
  opacity: 1;
  transition: 0.3s;
  line-height:0;
}

.pclickable:hover {
  background-color:#2a3a59 !important;
}

.pclickable:focus {
  background-color:#2a3a59 !important;
}

.sidebarone {
  margin:0 5vh 0 0;
}

.sidebarthree {
  margin:0 0 0 5vh;
}

h1 {
  color: #FCE694;
  font-family: "Taviraj", serif;
}

h2 {
  color: #F6FEAA;
}

h3 {
  color: #00c2a5;
}

h4 {
  color: #C1DBE3;
}

h5 {
  color: #E5EEF1;
}

h6 {
  color: #ffc061;
}

b {
  color: #F0F4FA;
}

a:link {
  color: #fbdd9d;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #a5a18f;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

/*CONTENT MANAGEMENT STARTS HERE YAY*/
/*CONTENT MANAGEMENT STARTS HERE YAY*/
/*CONTENT MANAGEMENT STARTS HERE YAY*/

/* meant for wider screens ; resized ver available */

#pfoundation {
  position:static;
  background-image:url();
  background-color:#3e1720;
  background-size: 1000px;
  border: 2px solid #000;
  border-color:#ad1200;
  border-radius: 4px;
  width: 75vw;
  margin: 140px auto 0px auto;
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: wrap;
}

#picon {
  overflow:visible;
  position:absolute;
  border:0;
  width:120px;
  height:200px;
  margin:0 0 0 23vw;
  background-image:url(/assets/placeholder.png);
  background-position:center;
  background-size:80px;
  background-repeat:no-repeat;
}

#psidebar {
  position:absolute;
  border:0px;
  border-style:solid;
  width:40vw;
  margin:85px 0 0 35vw;
}

/* MEANT FOR NARROWER SCREENS -700px */

/* meant for narrower screens */
@media (max-width:700px){

#pfoundation {
  position:static;
  background-image:url();
  background-color:#3e1720;
  background-size: 1000px;
  border: 2px solid #000;
  border-color:#ad1200;
  border-radius: 4px;
  width: 75vw;
  margin: 140px auto 0px auto;
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: wrap;
}

#picon {
  overflow:visible;
  position:absolute;
  border:0;
  border-radius:100%;
  width:150px;
  height:150px;
  margin:30px 0 0 20vw;
  background-image:url(/assets/placeholder.png);
  background-position:center;
  background-size:100px;
}

#psidebar {
  position:absolute;
  border:0px;
  border-style:solid;
  width:40vw;
  margin:85px 0 0 35vw;
}

#side-icon {
  display:none;
}

#side-navi {
  width:100% !important;
}

.nospace {
  display:none;
}

.colmidclick {
  margin:0;
}


/* GRAND CENTRAL LIBRARY - BOOK. */

#bbody {
  font-family:"Play";
  background-image:url(/assets/pattern3.png);
  background-repeat:repeat;
  background-position: 50% 0;
  background-size: 200px;
  background-color:#162f34;
  color: #ff5f4d;
  font-size: 1em;
  line-height: 1.5em;
}

/* THE REST IS JUST COPYPASTED SO CHANGE IT*/

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

/* Hide scrollbar for IE and Edge*/
.noscroll {
  -ms-overflow-style: none;  /* IE and Edge */
}

/* Hide scrollbar for Firefox */
.noscrollf {
  scrollbar-width: none;
}

p { 
    font-weight: bold;
}

button {
  font-family: "something else";
  color: white;
  font-size: 0.9em;
  line-height: 1em;
}

.bclickable {
  border:none;
  border-radius:15%;
  background-color:transparent !important;
  opacity: 1;
  transition: 0.3s;
  line-height:0;
}

.bclickable:hover {
  background-color:#2a3a59 !important;
}

.bclickable:focus {
  background-color:#2a3a59 !important;
}

.sidebarone {
  margin:0 5vh 0 0;
}

.sidebarthree {
  margin:0 0 0 5vh;
}

h1 {
  color: #FCE694;
  font-family: "Taviraj", serif;
}

h2 {
  color: #F6FEAA;
}

h3 {
  color: #00c2a5;
}

h4 {
  color: #C1DBE3;
}

h5 {
  color: #E5EEF1;
}

h6 {
  color: #ffc061;
}

b {
  color: #F0F4FA;
}

a:link {
  color: #fbdd9d;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #a5a18f;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

/*CONTENT MANAGEMENT STARTS HERE YAY*/
/*CONTENT MANAGEMENT STARTS HERE YAY*/
/*CONTENT MANAGEMENT STARTS HERE YAY*/

/* meant for wider screens ; resized ver available */

#bfoundation {
  position:static;
  background-image:url();
  background-color:#3e1720;
  background-size: 1000px;
  border: 2px solid #000;
  border-color:#ad1200;
  border-radius: 4px;
  width: 75vw;
  margin: 140px auto 0px auto;
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: wrap;
}

#bicon {
  overflow:visible;
  position:absolute;
  border:0;
  width:120px;
  height:200px;
  margin:0 0 0 23vw;
  background-image:url(/assets/placeholder.png);
  background-position:center;
  background-size:80px;
  background-repeat:no-repeat;
}

#bsidebar {
  position:absolute;
  border:0px;
  border-style:solid;
  width:40vw;
  margin:85px 0 0 35vw;
}

/* MEANT FOR NARROWER SCREENS -700px */

/* meant for narrower screens */
@media (max-width:700px){

#bfoundation {
  position:static;
  background-image:url();
  background-color:#3e1720;
  background-size: 1000px;
  border: 2px solid #000;
  border-color:#ad1200;
  border-radius: 4px;
  width: 75vw;
  margin: 140px auto 0px auto;
  display:flex;
  flex:1;
  flex-direction: column;
  flex-wrap: wrap;
}

#bicon {
  overflow:visible;
  position:absolute;
  border:0;
  border-radius:100%;
  width:150px;
  height:150px;
  margin:30px 0 0 20vw;
  background-image:url(/assets/placeholder.png);
  background-position:center;
  background-size:100px;
}

#bsidebar {
  position:absolute;
  border:0px;
  border-style:solid;
  width:40vw;
  margin:85px 0 0 35vw;
}

#side-icon {
  display:none;
}

#side-navi {
  width:100% !important;
}

.nospace {
  display:none;
}

.colmidclick {
  margin:0;
}

/*ok*/

}


/* animations */

.fade {
  opacity: 0.1;
  animation: fadeIn 2s forwards;
}

.fade .contentslow {
  opacity: 0;
  animation: fadeIn 2.5s forwards;
}

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