/* Links */
a{
  color:rgb(167, 69, 123);
  font-weight:700;
  text-decoration: none;
}

a:hover {
  color:rgb(167, 69, 123);
  font-weight:700;
  text-decoration: underline;
}


/* Background */
body {
  background-color: black;
  background-image: url('/images/BGpattern.png');
  background-size:318px;
  padding:0px;
  margin:0px;
  overflow:scroll;
}

/* Top Image */
.topimg {
  width:100%; 
  height:23vw; 
  font-size:70px; 
  padding-top:2%; 
  padding-bottom:2%; 
  color:white; 
  background-image: url('/images/GenmajouBanner.jpg'); 
  background-attachment:fixed; 
  background-repeat: no-repeat;
  background-size:100% auto;
}

.topimg-wrapper {
  position: absolute;
  left:50%;
  transform: translate(-50%);
  height:23vw;
}

.topimg-hover {
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
  opacity: 0;
  transition: opacity .5s ease-out;
}

.topimg-hover:hover {
  opacity:1;
}

/* Style the top navigation bar */
.topnav {
  margin-top: 0px;
  overflow: hidden;
  background-color:black;
  background-image: 
  radial-gradient(ellipse 40% 1000%, rgba(205, 154, 221, 0.5), transparent), 
  linear-gradient(rgba(159, 254, 129, 0.73), rgba(4, 81, 51, 0.73)),
  url('/images/Checker.png');
  background-size: auto, auto, 23px;
  border-top: 3px solid rgba(84, 50, 85, 1);
  border-bottom: 3px solid rgba(84, 50, 85, 1);
  text-align: center;
  padding-top:0px;
  padding-bottom:0px;
  padding-right:4%;
}

/* Style the topnav links */
.topnav a {
  width:auto;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  border:3px solid rgba(67, 46, 88, 1);
  border-radius:10px;
  background-image:
  linear-gradient(rgba(191, 86, 111, 1), rgba(155, 44, 101, 1));
  background-size:auto;
  padding-bottom:10px;
  padding-top:10px;
  padding-left:15px;
  padding-right:15px;
  margin-top:0px;
  margin-bottom:0px;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  font-size:20px;
}

/* Change color on hover */
.topnav a:hover {
  background-image: 
  linear-gradient(rgba(119, 179, 205, 1), rgba(81, 125, 185, 1));
  
  color: white;
  border-radius:10px;
}

/* List style */
.nav_button {
  list-style: none;
  display: inline-block;
  margin-bottom:0px;
  margin-top:4px;
  overflow:hidden;
}
.nav_button li {
  float: left;
  margin: 0 10px 0;
  vertical-align:center;
}
.nav_button li a {
  color: white;
}

/* Main body */
.mainbody {
  border:3px solid rgba(84, 50, 85, 1);
  border-radius:20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color:black;
  background-image: 
  radial-gradient(ellipse 60% 1000%, rgba(205, 154, 221, 0.5), transparent),
  linear-gradient(to bottom, rgba(82, 120, 126, 0.7), transparent), 
  linear-gradient(to right, rgba(91, 149, 93, 0.8), rgba(53, 100, 55, 0.8)),
  url('/images/Checker.png');
  margin:auto;
  margin-bottom:40px;
  width:800px;
  text-align:center;
}

/* Main body container header */
.mainbodycont {
  border-left:3px solid rgba(84, 50, 85, 1);
  border-right:3px solid rgba(84, 50, 85, 1);
  border-top:3px solid rgba(84, 50, 85, 1);
  border-bottom:transparent;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background:transparent;
  margin:auto;
  width:800px;
  margin-top:60px;
  padding-top:20px;
}

/* Title */
.title {
	font-size:30px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
	color:white;
	text-align:center;
  text-shadow:-5px 3px rgba(84, 50, 85, 1);
	margin:auto;
  width:800px;
  margin-top:60px;
	padding-top:5px;
  padding-bottom: 5px;
  border:3px solid rgba(84, 50, 85, 1);
  border-bottom:1px solid rgba(84, 50, 85, 1);
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  background-image:
    radial-gradient(ellipse 70% 1000%, rgba(191, 86, 111, 1), transparent),
    linear-gradient(rgba(243, 126, 151, 0.5), rgba(138, 30, 84, 0.5)),
    url('images/DiamondBG.png');
  background-color: rgb(61, 36, 66);
  background-size:auto, auto, 16px 15px;
}

/* Newest Project */
.newest {
	border-top:0px solid rgba(84, 50, 85, 1);
	border-bottom:3px solid rgba(84, 50, 85, 1);
	height:auto;
  width:800px;
  object-fit:cover;
}

/* Text Box */

.box {
	margin:12px;
	background-image:linear-gradient(rgba(243, 237, 239, 1), rgba(217, 202, 205, 1));
	border:3px solid rgba(84, 50, 85, 1) !important;
	border-radius:20px;
}

.box2 {
  width:95%;
	margin:auto;
	margin-top:20px;
	background-image: linear-gradient(rgb(185, 107, 133), rgb(158, 90, 122));
	border:3px solid rgba(84, 50, 85, 1) !important;
	border-radius:20px;
}

.box3 {
  margin:3px;
  background-image: linear-gradient(to right, rgba(84, 50, 85, 1), rgb(64, 36, 65));
	background-color: rgba(84, 50, 85, 1);
	border:3px solid rgb(64, 36, 65) !important;
	border-radius:10px;
  position:relative;
}

.boxtitle {
  font-size:30px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
	color:rgba(49, 21, 41, 1);
	text-align:center;
  text-shadow:-4px 3px white;
	margin-top:10px;
	margin-bottom:10px;
  height:41px;
  background-image:
    radial-gradient(ellipse 50% 1000%, rgba(236, 214, 221, 0.7), transparent), 
    linear-gradient(rgba(201, 167, 190, 0.7), rgba(201, 167, 190, 0.7)),
    url('images/DiamondBG.png');
  background-size:auto, auto, 15px 20px;
  border-radius: 5px;
}

.boxtitle2 {
  background-image: linear-gradient(rgb(120, 89, 124), rgba(84, 50, 85, 1));
  color:white;
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
  padding-right:10px;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  border:3px solid rgba(84, 50, 85, 1);
  border-top-left-radius:15px;
  border-top-right-radius:15px;
}

.boxtext {
  text-align: left;
  margin:30px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Rubik", "Trebuchet MS", sans-serif;
}

.boxtext-post {
  text-align: left;
  text-indent:4ch;
  margin-top:15px;
  margin-bottom:15px;
  margin-left: 30px;
  margin-right: 30px;
  font-size: 17px;
  font-weight: 400;
  font-family: "Rubik", "Trebuchet MS", sans-serif;
}

.firstletter {
  font-weight:700; 
  font-size:35px; 
  font-family: Libre Bodoni, serif;
}

.boxtext p{
  text-indent:30px;
}

.drop-cap-paragraph {
  text-indent: 0;
}

.drop-cap-paragraph::first-letter {
  float: left;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 0.65;
  margin: 0.1em 0.1em 0 0.1em ;
  font-family: "Libre Bodoni", serif;
}

/* Works List */
.boxworksdark {
  height:315px; 
  margin-top:0; 
  margin-left:5px; 
  margin-right:5px; 
  margin-bottom:1px;
  width:744px;
  border-top-left-radius:0; 
  border-top-right-radius:0;
	background-color: rgba(84, 50, 85, 1);
	border:3px solid rgba(84, 50, 85, 1) !important;
	
}

.workimage {
  margin:5px;
  margin-right:3px;
  border:3px solid rgba(84, 50, 85, 1);
  border-radius:15px;
  height:300px;
  float:left;
}

.workscontainer {
  border:3px solid rgba(84, 50, 85, 1);
  border-radius:15px;
  margin:5px;
  background-image:linear-gradient(to right, rgb(245, 229, 233), rgb(235, 217, 227));
  background-color:rgba(228, 213, 221, 1);
  font-size: 16px;
  font-family: "Rubik", "Trebuchet MS", sans-serif;
  padding:5px;
  width: 491px;
  height:290px;
  overflow:auto;
  float:right;
  scrollbar-color: rgb(158, 90, 122) rgb(228, 213, 221);
  scrollbar-width: thin;
}

.worktable {
  border:transparent;
  background:transparent;
  margin-left:5px;
  margin-top:5px;
  width:100%;
  float:left;
  border-spacing:0;
}

.worktable th {
  border:3px solid rgba(84, 50, 85, 1);
  background-image: linear-gradient(rgb(120, 89, 124), rgba(84, 50, 85, 1));
  background-color:rgba(84, 50, 85, 1);
  font-family: "Raleway", sans-serif;
  font-weight:700;
  font-size:18px;
  color:white;
  padding:7px;
  margin:0;
}

.worktable td {
  border:3px solid rgba(84, 50, 85, 1);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding:3px;
  font-size: 17px;
  font-family: "Rubik", "Trebuchet MS", sans-serif;
  background-color: rgb(245, 229, 233);
  margin:0;
}

.worktable tr {
  padding:0px;
  margin:0px;
}

/* Button! */

.button {
  display:inline-block;
  width:22%;
  background-image: linear-gradient(rgb(120, 89, 124), rgba(84, 50, 85, 1));
  border:3px solid rgba(84, 50, 85, 1);
  border-bottom-right-radius:15px;
  font-family: "Raleway", sans-serif;
  font-weight:900;
  font-size:28px;
  color:white;
  padding-top:17px;
  padding-bottom:17px;
  margin:5px;
  text-decoration: none;
}

.button:hover {
  display:inline-block;
  width:22%;
  background-image: 
  linear-gradient(rgba(119, 179, 205, 1), rgba(81, 125, 185, 1));
  font-family: "Raleway", sans-serif;
  font-weight:900;
  font-size:28px;
  color:white;
  padding-top:17px;
  padding-bottom:17px;
  margin:5px;
  text-decoration: none;
}

/* Short Work Table */
.shortworktable {
  border:3px solid rgba(84, 50, 85, 1);
  border-radius:20px;
  background-image: linear-gradient(rgb(161, 90, 114), rgb(100, 59, 78));
  width:95%;
	margin:auto;
	margin-top:20px;
  margin-bottom:20px;
  padding:2px;
}

.shortworktable tr {
  padding:10px;
}

.shortworktable th {
  border:1px solid rgb(84, 50, 85);
  background-color: rgb(66, 39, 70);
  color:white;
  text-align: center;
  font-family: "Raleway", sans-serif;
  font-weight:700;
  font-size:16px;
  padding:5px;
}

.shortworktable td {
  border:1px solid rgb(84, 50, 8);
  background-image: linear-gradient(to right, rgba(243, 237, 239, 1),rgb(235, 217, 223));
  color:black;
  text-align:center;
  font-family: "Rubik", "Trebuchet MS", sans-serif;
  font-size:16px;
  padding:6px;
}

/* Progress Bars */

.progressbar-red {
  background-image:
  linear-gradient(rgba(196, 31, 72, 0.7),rgba(236, 85, 74, 0.7)),
  url('images/Stripes.png');
  background-size:auto, 35px 50px;
  padding:3px;
  border:transparent;
  border-radius:5px;
  margin:2px;
  height:23px;
}

.progressbar-green {
  background-image:
  linear-gradient(rgba(31, 158, 120, 0.7),rgba(88, 226, 111, 0.7)),
  url('images/Stripes.png');
  background-size:auto, 35px 50px;
  padding:3px;
  border:transparent;
  border-radius:5px;
  margin:2px;
  height:23px;
}

.progressbar-blue {
  background-image:
  linear-gradient(rgba(28, 52, 185, 0.7),rgba(42, 143, 224, 0.7)),
  url('images/Stripes.png');
  background-size:auto, 35px 50px;
  padding:3px;
  border:transparent;
  border-radius:5px;
  margin:2px;
  height:23px;
}

.progresstext {
  position:absolute; 
  margin:1px; 
  font-weight:900; 
  font-size:18px; 
  color:white; 
  white-space:nowrap; 
  display:inline;
}

/* Journal Titles & Box */

.journalbox {
	margin-left:5px;
  margin-right:5px;
  margin-bottom:10px;
	background-image:linear-gradient(rgba(243, 237, 239, 1), rgba(217, 202, 205, 1));
	border:3px solid rgba(84, 50, 85, 1) !important;
	border-bottom-right-radius:15px;
  border-bottom-left-radius:15px;
  padding-left:15px;
  padding-right:15px;
  padding-top:2px;
  padding-bottom:2px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  font-family: "Rubik", "Trebuchet MS", sans-serif;
  text-indent:30px;
}

.newstitle {
  background-image: linear-gradient(rgb(120, 89, 124), rgba(84, 50, 85, 1));
  color:white;
  -webkit-text-stroke: 1.5px rgb(92, 9, 41);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:5px;
  padding-right:5px;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  border:3px solid rgba(84, 50, 85, 1);
  border-top-left-radius:15px;
  border-top-right-radius:15px;
}

.newstitle a {
  color:white;
  -webkit-text-stroke: 1.5px rgb(92, 9, 41);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
}

.newstitle a:hover {
  color:rgb(207, 36, 87);
  -webkit-text-stroke: 1.5px rgb(92, 9, 41);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
  cursor:pointer;
}

.updatestitle {
  background-image: linear-gradient(rgb(120, 89, 124), rgba(84, 50, 85, 1));
  color:white;
  -webkit-text-stroke: 1.5px rgb(10, 58, 66);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:5px;
  padding-right:5px;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  border:3px solid rgba(84, 50, 85, 1);
  border-top-left-radius:15px;
  border-top-right-radius:15px;
}

.updatestitle a {
  color:white;
  -webkit-text-stroke: 1.5px rgb(10, 58, 66);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
}

.updatestitle a:hover {
  color:rgb(20, 141, 60);
  -webkit-text-stroke: 1.5px rgb(10, 58, 66);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
  cursor:pointer;
}

.blogtitle {
  background-image: linear-gradient(rgb(120, 89, 124), rgba(84, 50, 85, 1));
  color:white;
  -webkit-text-stroke: 1.5px rgb(27, 69, 109);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
  padding-top:1px;
  padding-bottom:1px;
  padding-left:5px;
  padding-right:5px;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  border:3px solid rgba(84, 50, 85, 1);
  border-top-left-radius:15px;
  border-top-right-radius:15px;
}

.blogtitle a {
  color:white;
  -webkit-text-stroke: 1.5px rgb(27, 69, 109);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
}

.blogtitle a:hover {
  color:rgb(107, 161, 192);
  -webkit-text-stroke: 1.5px rgb(27, 69, 109);
  font-size:25px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
  text-align: left;
  cursor:pointer;
}

.read-text {
  color:rgb(167, 69, 123);
  font-weight:700;
  font-size: 23px;
}

.feedbox {
  width:95%;
  height:350px;
  margin:auto;
  margin-bottom:5px;
  background-image: linear-gradient(to right, rgba(84, 50, 85, 1), rgb(64, 36, 65));
	background-color: rgba(84, 50, 85, 1);
	border:3px solid rgb(64, 36, 65) !important;
	border-radius:15px;
  padding:10px;
  box-sizing: border-box;
  overflow:auto;
  scrollbar-color: rgb(108, 59, 114) rgb(173, 131, 153);
  scrollbar-width: thin;
}

.feedentry {
  background-image:linear-gradient(rgba(243, 237, 239, 1), rgba(217, 202, 205, 1));
  border:3px solid rgb(64, 36, 65);
  border-radius:20px;
  box-sizing: border-box;
  padding:10px;
}

.newsentry {
  color:black;
  font-size: 17px;
}

.newsentry:hover {
  color:rgb(207, 36, 87);
  font-size: 17px;
}

.updateentry {
  color:black;
  font-size: 17px;
}

.updateentry:hover {
  color:rgb(20, 141, 60);
  font-size: 17px;
}

.blogentry {
  color:black;
  font-size: 17px;
}

.blogentry:hover {
  color:rgb(107, 161, 192);
  font-size: 17px;
}

/* Image Gallery */
.picturegallery {
  position:relative;
  min-height:100px;
  background:transparent;
  margin:20px;
}

.picturegallery .gallerycontainer {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  justify-content:center;
  padding:10px;
}

.picturegallery .gallerycontainer .galleryimage {
  height:300px;
  width:auto;
  border:3px solid rgba(84, 50, 85, 1);
  overflow:hidden;
  cursor:pointer;

}

.picturegallery .gallerycontainer .galleryimage img{
  height:100%;
  width:auto;
  transition: .2s linear;
}

.picturegallery .gallerycontainer .galleryimage:hover img{
  transform:scale(1.1);
}

.picturegallery .popup-image {
  position: fixed;
  top:50%;
  left:50%;
  margin-left:-500px;
  margin-top:-350px;
  border:3px solid rgb(64, 36, 65); 
  width:1000px; 
  height:700px; 
  background-image: linear-gradient(rgba(84, 50, 85, 1), rgb(64, 36, 65)); 
  background-color: rgba(84, 50, 85, 1);
  z-index:100;
  display:none;
}

.picturegallery .popup-image span{
  position: absolute;
  top:0; 
  right:10px;
  font-size:60px;
  font-weight: bolder;
  text-shadow: -4px 1px white;
  color:rgb(64, 36, 65);
  cursor:pointer;
  z-index:100;
}

.picturegallery .popup-image img{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  border:3px solid rgb(64, 36, 65);
  object-fit:cover;
  width:auto;
  height:100%;
}

@media (max-width:768px){
  .picturegallery .popup-image img{
    width:95%;
  }
}

/* Image Pages */

.picturewrapper {
  border-top:3px solid rgba(84, 50, 85, 1);
  border-left:3px solid rgba(84, 50, 85, 1);
  border-bottom:3px solid rgba(84, 50, 85, 1);
  border-right:transparent;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  overflow:hidden;
  width:50%;
  height:650px;
  display:flex;
  justify-content: center;
  float:left;
}

/* Galfan Title */
.galfantitle {
	font-size:30px;
	font-weight:900;
	font-family: "Raleway", sans-serif;
	color:white;
	text-align:center;
  text-shadow:-5px 3px rgba(84, 50, 85, 1);
	margin:auto;
  width:100%;
  border-left:3px solid rgba(84, 50, 85, 1);
  border-right:3px solid rgba(84, 50, 85, 1);
  border-top:3px solid rgba(84, 50, 85, 1);
  border-bottom:transparent;
  border-top-right-radius:20px;
  background-image:
    radial-gradient(ellipse 70% 1000%, rgba(191, 86, 111, 1), transparent),
    linear-gradient(rgba(243, 126, 151, 0.5), rgba(138, 30, 84, 0.5)),
    url('images/DiamondBG.png');
  background-color: rgb(61, 36, 66);
  background-size:auto, auto, 16px 15px;
}

/* Galfan Main body */
.galfanmainbody {
  border:3px solid rgba(84, 50, 85, 1);
  border-bottom-right-radius:20px;
  background-image: 
  radial-gradient(ellipse 60% 1000%, rgba(205, 154, 221, 0.5), transparent),
  linear-gradient(to bottom, rgba(82, 120, 126, 0.7), transparent), 
  linear-gradient(to right, rgba(91, 149, 93, 0.8), rgba(53, 100, 55, 0.8)),
  url('images/Checker.png');
  margin:auto;
  margin-bottom:40px;
  width:100%;
  text-align:center;
}

/* Galfan Table */
.galfantable {
  border:transparent;
  background:transparent;
  width:100%;
  border-spacing:0;
  width:98%;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
}

.galfantable th {
  border:3px solid rgba(84, 50, 85, 1);
  background-image: linear-gradient(rgb(120, 89, 124), rgba(84, 50, 85, 1));
  background-color:rgba(84, 50, 85, 1);
  font-family: "Raleway", sans-serif;
  font-weight:700;
  font-size:18px;
  color:white;
  padding:5px;
  margin:0;
}

.galfantable td {
  border:3px solid rgba(84, 50, 85, 1);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding:3px;
  font-size: 17px;
  font-family: "Rubik", "Trebuchet MS", sans-serif;
  background-color: rgb(245, 229, 233);
  margin:0;
}

.flexbox {
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}