:root{ scrollbar-width: none }

body{ margin-top: 0;
  margin-bottom:0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  background-color:white;
  font-size:14px;
  background-image:url("./image/bg.png");
  background-repeat: no-repeat;
background-size:COVER;

background-position:left bottom;
background-attachment:fixed;
}


/* Navbar styling */
#navbar {
z-index:0;
width:130px;
background-image: url('./image/braille.png'), linear-gradient(to bottom, white 130px, rgb(044, 080, 208), rgb(044, 080, 208) 131px, transparent 131px, transparent 132px), linear-gradient(to bottom, transparent 20%), 
linear-gradient(to top, transparent 10%, rgba(185, 225, 255,1) 50%, rgba(172,208,255,1) 75%, rgba(185, 235, 255,0.7) 89%, transparent 95%);
background-repeat:no-repeat;
border-image: linear-gradient(to bottom, transparent, rgb(044, 080, 208) 130px, transparent 100%) 1;
border-width: 0 1px 0px 0px;
border-style: solid;
font-family:"Century Gothic";
font-style:italic;
font-weight:bold;
box-sizing:border-box;
padding:10px 20px;
letter-spacing:3px;
line-height:20px;
height:1080px;
font-size:14px;
text-align:right;
padding-right:10px;
padding-top:135px;
position:fixed;
color:white;
text-shadow:1px 1px 2px royalblue, 0px 0px 1px royalblue;
overflow:hidden;



}
/* navbar links */
#navbar a, a:visited {
text-shadow:1px 1px 2px rgba(80,100,255,0.5);
font-weight:normal;
text-decoration:none;
font-family:"Century Gothic";
color:rgba(10,20,255,1);
font-style:normal;
font-size:14px;
letter-spacing:0px;}

#navbar a:hover {
font-weight:bold;

letter-spacing:1px;
color:blue;}
#navbar a + p {
display:none;

}

/* the background text that appears when you hover over a link */
#navbar a:hover + p {
display:block;
font-size:100px;
font-family:"Century Gothic", sans-serif;
font-weight:bold;
color:rgba(215, 215, 255,0.4);
text-shadow:/*1px 1px 0px rgba(205, 215, 255,1), -1px -1px 0px rgba(205, 215, 255,1), -1px 1px 0px rgba(205, 215, 255,1), 1px -1px 0px rgba(205, 215, 255,1)*/none;
letter-spacing:-8px;
position:absolute;
width:600px;
height:60px;
bottom:0px;
left:79px;
margin-bottom:65px;
text-align:left;
transform:rotate(-90deg) scaleX(1.6);
transform-origin: top left;
mix-blend-mode:multiply;
font-style:normal;
z-index:-1;
user-select: none;
}

/* Header styling */
#header {
background-image: url("./image/header.png");
background-size:contain;

width:750px;
z-index:-9;
height:130px;
text-align:right;
border-image: linear-gradient(to right, transparent, rgb(044, 080, 208) 130px, transparent 90%) 1;
border-width: 0px 0px 1px 0px;
border-style: solid;
position:absolute;


}
  
/* Center / body content styling */
#center {
  position:absolute;
background-image: linear-gradient(to right, white 80%,  rgba(255,255,255,0.8) 90%, rgba(255,255,255,0.9) 95%, transparent);
background-color:white;
  margin-left: 130px;
  width: 620px;
  margin-top:131px;
  font-family: "Tahoma", sans-serif;
  font-size:12px;
  box-sizing:border-box;
  /*color:rgb(10,30,95);*/
  color:rgb(52,72,155);
  padding-bottom:40px;
z-index:1;
  }
/* center paragraph styling */
#center p {
padding-left:10px;
padding-right:10px;
box-sizing:border-box;
font-size:12px;
}

#center li {

padding-right:10px;
box-sizing:border-box;
font-size:12px;
}


a {
color:cornflowerblue;
}

#center a {
text-decoration:none;
color:#1B61E4;
text-shadow:1px 1px 3px rgba(60,150,255,0.3);
}

#center a:hover {
font-weight:bold;
color:blue;
}

/* generic main page title ribbons styling */
.pageTitle {
	position:sticky;
top:0px;
background-image: linear-gradient(to left, transparent, rgba(185, 225, 255,0.6) 20%,  rgba(185, 255, 255,0.15) 100%);
font-family: "Century Gothic", sans-serif;
background-color:white;
color:#447EE9;
box-sizing:border-box;
padding-left:4px;
border-image: linear-gradient(to right, rgb(044, 080, 208), transparent 90%) 1;
border-width: 0px 0px 1px 0px;
border-style: solid;
z-index:2;
margin-bottom:0px;
height:42px;

}
/* main title of pageTitle*/
.pageTitle  h2 {
text-align:left;
padding:0px;
margin:0px;
margin-bottom:-5px;
font-size:20px;
font-weight:normal;
color:blue;
text-shadow:1px 1px 2px rgba(80,100,255,0.4);
}
/* subtitle of pageTitle */
.pageTitle  h3 {
text-align:left;
float:left;
padding:0px;
margin:0px;
font-weight:normal;
letter-spacing:1px;
font-size:14px;
}
/* links inside page title, on bottom right corner */
.pageTitleSubNav {
	color:skyblue;
	float:right;
	padding-right:4px;

}
/* links inside page title, on bottom right corner */
#center .pageTitleSubNav a {
	/*color:rgb(115, 157, 227);*/
	
text-shadow:1px 1px 2px rgba(80,100,255,0.3);
	text-decoration:none;
	font-size:14px;
color:#447EE9;
}

#center .pageTitleSubNav a:hover {
	font-weight:bold;
	color:blue;

}
/* link descriptions */
.pageTitleSubNav a + p {
display:none;
}


.pageTitleSubNav a:hover + p {
display: block;
position: absolute;
color:/*rgb(125, 167, 227);*/blue;
padding:0px;
top:0;
margin-top:5px;
right:0;
margin-right:-6px;
filter:drop-shadow(1px 1px 1px rgba(90,100,255,0.4));

}

/* generic ribbon styling */
.ribbon {
background-image: linear-gradient(to right, rgba(185, 225, 255,0.8) 30%,  rgba(195, 255, 255,0.25), transparent);
font-family:"Century Gothic", sans-serif;
font-size:14px;
padding-top:2px;
padding-left:8px;
color:blue;
height:22px;

}
.ribbon h2 {
text-shadow:1px 1px 3px rgba(80,100,255,0.6);
float:left;
padding:0px;
margin:0px;
font-weight:normal;
letter-spacing:1px;
font-size:14px;
padding-right:8px;
}
.ribbon h3 {
color:rgb(125, 167, 227);
padding-left:4px;
margin:0px;
font-weight:normal;
letter-spacing:0px;
font-size:14px;
}



/* section specific styling*/

/* updates : details / summary styling */
#update {

}

#update summary {
background-image: linear-gradient(to right, rgba(185, 225, 255,0.8) 30%,  rgba(195, 255, 255,0.25), transparent);
font-family: "Century Gothic", sans-serif;
color:rgb(55, 70, 230);
font-size:13px;
padding-left:8px;
padding-right:4px;
padding-top:3px;
padding-bottom:4px;
margin-top:-1px;
border-image: linear-gradient(to right, blue, transparent 95%) 1;
border-width: 1px 0px 1px 0px;
border-style: solid;

text-shadow:1px 1px 3px rgba(80,145,255,0.4);
}

#update summary:hover {
color:blue;
cursor:pointer;
background-image: linear-gradient(to right, rgba(165, 195, 255,1) ,  rgba(185, 225, 255,0.8) 80%, transparent);
text-shadow:1px 1px 3px rgba(40,100,255,0.7);
}

#update details[open] summary {
border-image: linear-gradient(to right, blue, transparent 95%) 1;
border-width: 1px 0px 0px 0px;
border-style: solid;

}

/* blog directory : details / summary styling */
#blogDirectory summary, #musicDirectory summary {
background-image: linear-gradient(to right, rgba(185, 225, 255,0.8) 30%,  rgba(195, 255, 255,0.25), transparent);
font-family: "Century Gothic";
color:rgb(55, 70, 230);
font-size:13px;
padding-left:8px;
padding-right:4px;
padding-top:3px;
padding-bottom:4px;

text-shadow:1px 1px 3px rgba(80,145,255,0.4);

}

#blogDirectory summary:hover, #musicDirectory summary:hover {
cursor:pointer;
background-image: linear-gradient(to right, rgba(185, 225, 255,1) ,  rgba(185, 225, 255,0.8) 80%, transparent);
text-shadow:1px 1px 3px rgba(40,100,255,0.7);
}

#blogDirectory summary:active, #musicDirectory summary:active {
cursor:pointer;
background-image: linear-gradient(to right, rgba(165, 215, 255,1),  rgba(185, 225, 255,0.8) 80%, transparent);
text-shadow:1px 1px 3px rgba(40,100,255,1);
}
#blogDirectory li {
list-style-type:none;
}

.fileTable table, th, td {
border: 1px solid skyblue;
border-collapse:collapse;
font-size:12px;
padding:4px;
text-align:center;
color:rgb(60, 80, 154);
}

.filetable th:first-child {
width:350px;
}
.fileTable table {
margin:10px;
}

.fileTable th {
font-family:"Century Gothic";
color:rgb(115, 157, 227);
}