/* =========================================================
   00) GLOBAL / RESET / TYPE
   ========================================================= */

html,

body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Garamond, serif;
/*	font-family: "Leander", Garamond, serif;*/
  font-size: 18px; /* default browsers use 16px */
  font-weight: 200;
    cursor: url("/files/grotacursor.png"), auto;
  line-height: 1.2;
}

/* =========================================================
   01) FONTS (OPTIONAL)
   ========================================================= */

/*@font-face {
  font-family: "Leander";
  src: url("https://gotheresidencyofthearts.nekoweb.org/files/fonts/Leander.ttf");
  color: #010907;
}*/

/* =========================================================
   02) PAGE BACKGROUND / CENTERING
   ========================================================= */

body {
	background: #000 url("/files/background.png") no-repeat center center;
	background-size: cover;
	display: flex;
	justify-content: center; 
	align-items: center;
}

/* =========================================================
   03) MAIN WRAPPER
   ========================================================= */

#maincontainer {
  position: fixed;
  width: 1000px;        
  height: 700px;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-sizing: border-box;
  }

/* =========================================================
   04) TOP + BOTTOM CONTAINERS
   ========================================================= */

/* child 1 + child 2 of maincontainer */
#top-container {
	position: relative;
	width: 100%;
/*height: 100%;*/
	height: 140px;
	display: flex;
	flex-direction: column;
	background: transparent;
}

#bottom-container {
	position: relative;
	
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center; 
	justify-content: flex-start; 
	width: 95%;
	height: auto;
	margin: 0 auto;
	
background: black;
background-image: url("/files/maincontainer.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 

}

/* =========================================================
   05) HEADER / NAV
   ========================================================= */

/* Header container */
#header-container {
	width: 100%;
	height: 59px;
	display: flex;
	flex-direction: column;
	justify-content: center; 
	align-items:  center; 
background: transparent;
background-image: url(/files/header/header.png);
	margin-top: auto;
    
    background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
}

#buttons-container {
  width: 80%;
  height: 42px;
 z-index:500;
  display: flex;
  justify-content: space-between; 
  align-items: center;
 
  background: transparent;
}

/* all buttons share the same png */
.nav-btn {
  flex: 1;
  height: 100%;
  
  display: flex;              
  justify-content: center;
  align-items: center;
  
  background: url("/files/buttons/largebutton.png") center / contain no-repeat;
  background-color: transparent;

  border: none;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: white;
  font-family: inherit;
  
  font-size: 1.1rem;   
  font-weight: 500;
text-shadow: 0px 2px 2px #000;
  
  cursor: pointer;
  
}

#buttons-container a.nav-btn,
#buttons-container a.nav-btn:link,
#buttons-container a.nav-btn:visited,
#buttons-container a.nav-btn:hover,
#buttons-container a.nav-btn:active {
  text-decoration: none;
  color: white;
}

.spacer {
  width: 180px; /*extra gap between buttons*/
  flex-shrink: 0;
}

.nav-opportunities {
  
  font-size: 0.8rem;    
  
}

#logo-container {
	position: absolute;
	bottom: -20px; 
	left: 50%; /* center horizontally */
	transform: translateX(-50%);

	z-index: 9999;
	width: 170px;
	height: 170px;
	background-image: url("/files/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
}

/* =========================================================
   06) BODY HEADER (LOGO TEXT)
   ========================================================= */

/* Body header (top of column) */
#body-header-container {
	width: 100%;
	min-height: 50px;
	padding-top: 20px;
  padding-bottom: 20px; 
	background: transparent;
	background-image: url("/files/logotext5.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
  box-sizing: border-box;
}

/* =========================================================
   07) BODY LAYOUT (3 COLUMNS)
   ========================================================= */

/* Body row: 3 columns */
#body-row-container {
	display: flex;
	align-items: stretch; 
	gap: 12px;
	width: 100%;
	flex: 1; 
	padding: 0 12px 12px;
	box-sizing: border-box;
	background: transparent;
}

/* Columns */
#column-1-container,
#column-2-container,
#column-3-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;

	box-sizing: border-box;
	
}

#column-1-container {
	flex: 1;
	
}

#column-2-container {
	flex: 3;

}
#column-3-container {
	flex: 1;
	
}

/* =========================================================
   08) COLUMN ITEMS (BASE + SIZING)
   ========================================================= */

/* Column items */
 #c1-item-1,
 #c1-item-2,
 #c2-item-1,
 #c2-item-2,
 #c3-item-1,
 #c3-item-2 {
 background-size: contain;
 background: transparent;
 
 }

/* item 1 in each column */
#c1-item-1,
#c2-item-1,
#c3-item-1 {
	flex: 3;
}

/* item 2 in each column */
#c1-item-2,
#c2-item-2,
#c3-item-2 {
	flex: 1;
}

/* =========================================================
   09) ASSET STACKS (ALL PNG BACKGROUNDS, GROUPED)
   ========================================================= */

/* SECTION PANELS */
#c1-item-1 {
  position: relative;
  background:
    url("/files/section1/section1-ornament.png") ,
    url("/files/section1/section1-cover.png") ;
    background-repeat: no-repeat, no-repeat; 
    background-position: center, center;
    background-size: contain, contain ;
    
}

#c2-item-1{
	position: relative;
   width: 550px;
   height: 600px;     
   background:
    url("/files/section2/section2-coverv2.png"),
    url("/files/section2/section2-bkg.png");

  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, contain ;
  
  overflow: hidden;        /* keeps scrollbox inside the PNG area */
}

#c3-item-1 {
	position: relative;
    background:
     url("/files/section1/section1-ornament.png"),
    url("/files/section1/section1-cover.png");
    background-repeat: no-repeat, no-repeat; 
    background-position: center center, center center;
    background-size: contain, contain ;
}

/* COLUMN FOOTERS (LEFT/RIGHT MATCH) */
#c1-item-2 {
	background-image:
    url("/files/footer/footer-filler1.png"),
    url("/files/footer/footer-container1.png");

  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, contain ;
}

#c3-item-2 {
	background-image:
    url("/files/footer/footer-filler1.png"),
    url("/files/footer/footer-container1.png");

  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, contain ;
}

/* =========================================================
   10) COMPONENTS INSIDE ITEMS
   ========================================================= */

.sconce,
.sconce2 {
  position: relative;
  left: 0%;
  top: 0%;
  transform: translateY(50%);
  max-height: 100%;        
  max-width: 100%;
  height: auto;
  width: auto;
  pointer-events: none;
  object-fit: contain;
}

.scrollbox-img {
  display: block;
  margin: 0 auto;   
  width: 100%;        
  height: auto;
}

/* the scrollable area */
#c2-item-1 .scrollbox {
  position: absolute;     
  top: 30px;
  right: 37px;
  bottom: 30px;
  left: 37px;              

  overflow-y: auto;        
  overflow-x: hidden;

  
  box-sizing: border-box;
  text-align: center;
  background: transparent; 
  color: #010907;

  pointer-events: auto;    
}

/* =========================================================
   11) EFFECTS / ANIMATION
   ========================================================= */

#c1-item-1::after,
#c3-item-1::after{
  content: "";
  position: absolute;
  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
  
  background: url("/files/sconce/sconceglow.png") center / contain no-repeat;
  pointer-events: none;
  z-index: 50;

  animation: fadePulse 3s ease-in-out infinite;
}

@keyframes fadePulse{
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* =========================================================
   12) C2 ITEM 2 (FOOTER ROW OF 3 ITEMS)
   ========================================================= */

/* c2 item 2 contains a row of 3 items */
#c2-item-2 {
	display: flex;
	
	width: 100%;
	gap: 8px;
	background: transparent;
}

/* row items inside c2 item 2 */
#row-item-1,
#row-item-2,
#row-item-3 {
	
	width: 100%;
	background: transparent;
}

/* row items inside c2 item 2 */
#row-item-1,
#row-item-3 {
	flex: 1; /* normal width */
	background-image:
    url("/files/footer/footer-filler2.png"),
    url("/files/footer/footer-container2v5.png");

  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, contain ;
	
}

#row-item-2 {
	flex: 0.5; /* smaller */
		background-image:
    url("/files/footer/footer-filler3.png"),
    url("/files/footer/footer-container3.png");

  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, contain ;
}