@font-face {
  font-family: MSDOS-Header;
  src: url(../Fonts/Glass_TTY_VT220.ttf);
}

:root {
  --Accent: #975abf;   /* affects links, email, bold, textbox borders */
  --HeaderFont: MSDOS-Header;   /* affects headers, links&tabs */
  --Font: 'Helvetica', sans-serif; 
  --HeaderLinksFont: 'Consolas', sans-serif; 
  --FontColor: rgb(227, 227, 227);
  --BG: #000000;
  --Responsivep: calc(13px + 0.390625vw);  /* matthewjamestaylor/responsive-font-size - RESPONSIVE CSS */
  --ResponsiveHeaderLinks: calc(18px + 0.390625vw); 
  --ResponsiveList: calc(11px + 0.390625vw);  /* also used for gallery desc + small text in general */
  --IndexImg: url('../Images/Sprites/VidayaGaems.gif');
  --HeaderImg: url('../Images/P1 Logo JP 500px.png');
}
* {box-sizing: border-box;}

/* -------------------------------------------------------- */
/* BASIC TEXT */
/* -------------------------------------------------------- */

body { background-color: var(--BG);}
  
h1, h2, h3  {
  color: var(--FontColor);
  font-size: var(--ResponsiveHeaderLinks);
  text-align: center;
}

p {
  color: var(--FontColor);
  font-family: var(--Font);
  font-size: var(--Responsivep);
  text-align: left;
  padding-right: 40dvh;
  padding-left: 40dvh; 
  line-height: 134%;
}

@media screen and (max-width: 1300px) {   
  p, ul, li  {
    padding-right: 5dvh;
    padding-left: 5dvh;   
    font-size: calc(14px + 0.390625vw);
  }
}  

b, strong, em {
  color: var(--Accent);
  font-weight: bold;
}

a:link {
  cursor: pointer;
  color: var(--Accent);
}

a:visited { color: var(--Accent); }
a:hover { color: var(--FontColor); transition: 0.5s; }
ul { text-align: center; }


/* -------------------------------------------------------- */
/* LIGHTER COLOURED TABLE FOR GUIDES */
/* SHIFT ALL OF THIS TO STYLE MAIN BODY W/SIDEBAR LATER */
/* -------------------------------------------------------- */

.guides{
  background-color: #686868;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-top: 2dvh;
  padding-bottom: 2dvh;
  column-gap: 1dvh;
  margin-right: 5dvh;
  margin-left: 5dvh;  
}

.guidesitem {
  background-color: #9d6f6f;
  padding-right: 5dvh;
  padding-left: 5dvh; 

}

.guidesitem p {
  background-color: #d65252;
  font-size: var(--Responsivep);
  padding-right: 5dvh;
  padding-left: 5dvh; 
}

/* -------------------------------------------------------- */
/* GRID FOR MAIN SITE LAYOUT */
/* ONE SIDEBAR + MAIN BODY */
/* -------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: fit-content(23dvh) 1fr ;
  grid-template-areas: "sidebar content";
}

#sidebar {
  border: 1px solid var(--Accent);
  color: var(--FontColor);
  font-family: var(--Font);
  font-size: var(--Responsivep);
  text-align: center; 
  padding: 2dvh;
  margin-left: 10%;
}

#aside { grid-area: sidebar; width: 100%;}
#main { grid-area: content; }


/* -------------------------------------------------------- */
/* ALL IMGS CENTERED BY DEFAULT */
/* -------------------------------------------------------- */
img {
  display: block; 
  margin:auto;
}
/* -------------------------------------------------------- */
/* PORTRAITS CLASS - FOR ABOUT + CHAR DIALOGUE */
/* -------------------------------------------------------- */
.por {
  float: left; 
  margin-right: 3dvh;
  padding-left:1dvh;
}
/* -------------------------------------------------------- */
/* DIV TEXT WITH IMAGE - EXTRA MEDIA */
/* -------------------------------------------------------- */
 
.textBox {                   /* for generic comments*/
  background-color: none;
  margin-right: 5%;
  margin-left: 5%;
  border: 2px outset var(--Accent);
}

.textBox p {
  text-align: center;
}

.extraText {                  /* SPECIFICALLY FOR EXTRA-MEDIA.*/
  color: var(--FontColor);
  border: 0px solid red; 
  color: var(--FontColor);
  font-family: var(--Font);
  font-size: var(--Responsivep);
  text-align:left;
  padding: 15px;
  margin: 5dvh;
}

.extraText a { font-size:var(--Responsivep); }  

.extraMedia {
  width: 100%;
  padding: 3dvh 5dvh;
  display:flex;
  flex-direction: row;
}

/* -------------------------------------------------------- */
/* HEADER STYLING */
/* -------------------------------------------------------- */

.header {
  display:block;
  margin:auto;
  border: 0px outset var(--Accent);
}

a.headerLinks:link {
  cursor: pointer;
  font-size: var(--ResponsiveHeaderLinks);
  color: var(--Accent);
  font-family: var(--HeaderLinksFont);
  text-align: center;
}

a.headerLinks:hover {
  color: var(--FontColor);
  transition: 0.5s;
}

/* -------------------------------------------------------- */
/* INDEX - ACCENT BUTTON + CHANGING IMG */
/* -------------------------------------------------------- */

.AccentBtn {
  background-color: black;
  color: var(--Accent);
  font-size: var(--ResponsiveHeaderLinks);
  font-family: Consolas, sans-serif;
  border: none;
  padding: 2px 36px;
  position:fixed;        /* Fixed to bottom-right of homepage */
  bottom:2%;
  left:1%;
}

.AccentDropup {
	margin-left: auto; 
	margin-right: auto; 
  display: inline-block;
  position:fixed;      /* Follows button position */
  bottom:3%;
  left:1%;
}

/* Dropup content (Hidden by Default) */
.AccentDropup-content {
  display: none;
  position: absolute;
  bottom: 23px;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: center;
  transition: max-height 1s;
  
}

.AccentDropup-content p {
  color: var(--FontColor);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: Consolas, sans-serif;
  font-size: 1.3rem;
  text-align: center;
}

/* Links inside the dropup */
.AccentDropup-content a {
  color: var(--FontColor);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: Consolas, sans-serif;
  padding-bottom: 3%;
}

/* Show the dropup menu on hover */
.AccentDropup:hover .AccentDropup-content {
  display: block;
  max-height: 200px;
}

.indexImg {
  content:var(--IndexImg);
  margin: auto;
}

/* -------------------------------------------------------- */
/* GALLERY - STICKY IMG TO JUMP SECTIONS */
/* -------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

#changeText {
  font-size: smaller; 
  text-align: center;
  padding-left: 5dvh;
  padding-right: 5dvh;
}

#Naoyascroll, #Makiscroll {    /* Gallery scroll to top divs */
 position:fixed;
 bottom:1%;
 right:0.5%;
 padding-right: 5dvh;
 text-align: center;
}

@media (max-width: 500px) {.hidden-mobile { display: none;}}

.section {       /* Gallery section title with highlight */
  background: linear-gradient(120deg, var(--Accent) 0%, var(--Accent) 100%);
  margin-right: 20%;
  margin-left: 20%;
  background-repeat: no-repeat;
  background-size: 100% 10%;   
  background-position: 0 90%;   
}

.section h1, h2, h3 {    /* h1 in Extras */
  font-family: var(--Font);  
  text-align: center;
  font-size: var(--ResponsiveList); 
}

.section p {    
  font-family: var(--Font);  
  text-align: center;
  font-size: var(--ResponsiveList); 
}

/* -------------------------------------------------------- */
/* COLLAPSIBLES - GALLERY + EXTRAS (add number for +1 collapsible on same page) */
/* www.digitalocean.com/community/tutorials/css-collapsible */
/* -------------------------------------------------------- */

.wrap-collapsibleShort, .wrap-collapsibleShort2 {margin-bottom: 1.2rem 0;}

input[type='checkbox'] {display: none;}

.hideshowButtonShort, .hideshowButtonShort2 {   /* --------- BUTTON ----------- */
  display: block;
  font-weight: bold;
  font-family: var(--HeaderFont);
  font-size: var(--Responsivep);
  line-height: normal;
  text-align: center;
  padding: 0.5rem;
  margin: 3rem;

  color: #000000;
  background: var(--Accent);
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.hideshowButtonShort:hover, .hideshowButtonShort2:hover  {color: var(--FontColor);}

.hideshowButtonShort::before, .hideshowButtonShort2::before {   /* --------- TRIANGLE ICON ----------- */
  content: ' ';
  display: inline-block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);
  transition: transform .2s ease-out;
}

.toggleShort:checked + .hideshowButtonShort::before,  
.toggleShort:checked + .hideshowButtonShort2::before 
{transform: rotate(90deg) translateX(-3px);}

.collapsibleShort-content, .collapsibleShort2-content {   /* --- HIDE + SHOW CONTENT ANIMATION --- */
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;  
}

.toggleShort:checked + .hideshowButtonShort + .collapsibleShort-content,  
.toggleShort2:checked + .hideshowButtonShort2 + .collapsibleShort2-content 
{height:auto; max-height: 320dvh;}   /* --- INCREASE IF IMGS CUT OFF --- */

.toggleShort:checked + .hideshowButtonShort,  
.toggleShort2:checked + .hideshowButtonShort2 
{border-bottom-right-radius: 0;border-bottom-left-radius: 0;}

.collapsibleShort-content .contentShort-inner,  
.collapsibleShort2-content .contentShort2-inner {  
  border-bottom-left-radius: 7px; 
  border-bottom-right-radius: 7px; 
  padding: .5rem 1rem;
}

/* -------------------------------------------------------- */
/* INDEX - TODO LIST */
/* -------------------------------------------------------- */
.toDo li {
  color: var(--FontColor);
  font-family: var(--Font);
  font-size: var(--ResponsiveList);
}

.toDo li.notDone {color: red;background-position: 0 .5em;}
.toDo li.mostlyDone {color: yellow;background-position: 0 .5em;}
.toDo li.Done {color: rgb(58, 222, 58);background-position: 0 .5em;}
.feather {width: 24px;height: 24px;stroke: var(--FontColor);stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;fill: none;}

/* -------------------------------------------------------- */
/* GALLERY FLEXBOX - RESPONSIVE IMAGES */
/* -------------------------------------------------------- */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}

.galleryItem {       
  max-height: 100%; 
  width: auto;
  padding-left: 3dvh;
  padding-right: 3dvh;
  padding-bottom: 1dvh;
  text-align: center;
  flex-basis: 300px;
}
 
.galleryItem img:hover {border: 1px solid #fff;transition: 0.5s;}

.galleryDesc {
  color: var(--FontColor);
  border: 0px solid red; 
  font-family: var(--Font);
  font-size: var(--ResponsiveList);
  text-align: center;
  padding: 15px;
}

.galleryDesc a:link{ font-size:var(--ResponsiveList); } 

.break {
  display: flex;
  flex-wrap: wrap; 
  flex-basis: 100%;
  height: 0;
}

/* -------------------------------------------------------- */
/* GALLERY - SPRITES GRID */
/* -------------------------------------------------------- */

.spritesGrid {
  display: grid;
  /* make responsive - look ma no media queries */    
  grid-template-columns: repeat( auto-fill, minmax(256px, 1fr) );
  justify-items: center;
  align-items: center;
  margin-left: 10%;
  margin-right: 10%;
}

.spritesGridItem {
  background-color: none;
  border: 0px solid var(--Accent);
  font-size: var(--ResponsiveList);
  text-align: center;
  object-fit: cover;
  grid-auto-flow: dense;
}


/* --------------------------------------------------------------- */
/* ------------------     TABS     ------------------ */
/*   https://codepen.io/wanderingwind/pen/rNNwgxe   */
/* -------------------------------------------------------------- */

[data-tab-content] {display: none;} 

.active[data-tab-content] {display: block;}

body {                  /*  tab buttons interior  */
  font-family: var(--HeaderLinksFont);
  font-size: var(--Responsivep);
  padding: 0; margin: 0;
}

.tabs {                   /* row containing the tab buttons */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:  space-evenly;
  list-style-type: none;
  padding: 0; margin: 0;
} 

.tab { 
  background-color: var(--BG);   /* text inside tab button */
  color: var(--Accent);  
  cursor: pointer;
  padding: 10px;
}

.tab.active {
  background-color: var(--Accent); 
  color: var(--BG);  
}

.tab:hover {
  background-color: var(--Accent);
  color: var(--FontColor); transition: 0.5s;
}

.tab-content {margin-left: 20px;margin-right: 20px;}


/* -------------------------------------------------------- */
/* SCROLLBAR */
/* -------------------------------------------------------- */

::-webkit-scrollbar {width:17px;height:17px;}

::-webkit-scrollbar {background-color:rgb(0,0,0);}

::-webkit-scrollbar-track { border:8px solid rgb(46, 46, 46); 
  background-color:rgb(56, 56, 56);    /* light track color */
}

::-webkit-scrollbar-thumb { 
  border:8px solid rgb(46, 46, 46);    /* background color */
   background-color:var(--Accent);   /* scrollbar color */
   min-height:14px; min-width:24px;
  }


/* -------------------------------------------------------- */
/*
//    "Although life is but a journey to the grave
//       It must not be undertaken without hope."
// 
//                   _ooOoo_
//                  o8888888o
//                  88" . "88
//                  (| -_- |)
//                  O\  =  /O
//               ____/`---'\____
//             .'  \\|     |//  `.
//            /  \\|||  :  |||//  \
//           /  _||||| -:- |||||-  \
//           |   | \\\  -  /// |   |
//           | \_|  ''\---/''  |   |
//           \  .-\__  `-`  ___/-. /
//         ___`. .'  /--.--\  `. . __
//      ."" '<  `.___\_<|>_/___.'  >'"".
//     | | :  `- \`.;`\ _ /`;.`/ - ` : | |
//     \  \ `-.   \_ __\ /__ _/   .-` /  /
//======`-.____`-.___\_____/___.-`____.-'======
//                   `=---='
//
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//          佛祖保佑           永无BUG
//         God Bless        Never Crash
*/
/* -------------------------------------------------------- */