/*fonts*/
@font-face{ /*regular*/
	font-family: "Atkinson Hyperlegible Next"; /*set name */
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-Regular.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}
@font-face{/*itallic*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-RegularItalic.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: italic;
}
@font-face{/*bold*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-Bold.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
}
@font-face{/*bold itallic*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-BoldItalic.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: italic;
}
@font-face{ /*medium*/
	font-family: "Atkinson Hyperlegible Next"; /*set name */
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-Medium.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
@font-face{/*medium itallic*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-MediumItalic.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-MediumItalic.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: italic;
}
@font-face{ /*light*/
	font-family: "Atkinson Hyperlegible Next"; /*set name */
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-Light.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-Light.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
}
@font-face{/*light itallic*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-LightItalic.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-LightItalic.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: italic;
}
@font-face{ /*extra light*/
	font-family: "Atkinson Hyperlegible Next"; /*set name */
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-ExtraLight.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-ExtraLight.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}
@font-face{/*extra light itallic*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-ExtraLightItalic.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: italic;
}
@font-face{/*extra bold*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-ExtraBold.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}
@font-face{/*extra bold itallic*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-ExtraBoldItalic.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: italic;
}
@font-face{/*semi bold*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-SemiBold.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
@font-face{/*semi bold itallic*/
	font-family: "Atkinson Hyperlegible Next"; /*set name*/
	src: url('../fonts/AHN/WOFF2/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2') format('woff2'),
	     url('../fonts/AHN/TTF/AtkinsonHyperlegibleNext-SemiBoldItalic.ttf') format('truetype');
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: italic;
}

[data-theme="dark"] {
   --color-bg: rgb(0, 0, 0);
   --color-fg: rgb(248, 248, 255);
}

[data-theme="light"] {
   --color-bg: rgb(248, 248, 255);
   --color-fg: rgb(0, 0, 0);
}

header{background-color: rgb(0, 0, 0); 
		color: rgb(248, 248, 255); text-align: center; font-family: "Atkinson Hyperlegible Next", sans-serif; 
		display: block; position: fixed; overflow: hidden;
  		top: 0px; left: 0px; width: 100%;
		z-index: 1000; 
}
nav{background-color: rgb(0, 0, 0);}

/* Style the search box */
.search-container {
  float: left;
  padding: 6px 10px; border: none; margin-top: 2px; margin-left: 10px; margin-right: 16px;
  font-size: 0.9rem;
  width: 45%;
}
.search-container input[type=text] {
  padding: 6px;
  font-size: 0.9rem;
  border: none;
  font-family: "Atkinson Hyperlegible Next", sans-serif; 
  display: flex;
}
.search-container button {
  float: left; display: flex;
  height: 40px; width: 40px;
  padding: 3px 10px; margin-top: 0px;
  color: rgb(248, 248, 255); 
  border: none;
  cursor: pointer;
  background-color: rgb(0, 0, 0); 
}

/*Search box end*/

/*Navigation bar (menu)*/
.topnav{
	background-color: rgb(51, 51, 51);
	margin: 0px; padding-top: 10px; 
	width: 100%; height: 50px; top: 49px; left: 0px;
    display: flex;
    justify-content: left;
    /*overflow: hidden;*/
	position: fixed;
	z-index: 1000; left: 0px; top: 49px;
}
.topnav a{
	margin: 0px; padding: 10px; padding-left: 15px; padding-right: 15px;
	/*float: left;*/
	display: inline-block; 
	text-decoration: none; text-align: center; font-size: 0.9rem;
	color:rgb(248, 248, 255)
}
.topnav .icon {
  display: none;
}
.dropdown{
	display: block;
  	overflow: hidden;
	padding-left: 15px; padding-right: 15px;
}
a, .dropdown .dropbtn{
	margin: 0; border: none; padding: 0px;/*Change the space between words*/
	color:rgb(248, 248, 255); /*Change the colour of the hyperlinks*/
	font-size: 0.9rem;
	outline: none;
	background-color: inherit;
  	font-family: inherit;
}
.topnav a:hover, .dropdown:hover .dropbtn:hover{/*use: in between a and hover*/
	color: rgb(116, 7, 225); /*Change the colour of the text when hover with the mouse*/
}
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 0%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 109px;
  padding-left: 5%; padding-right: 5%; 
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 10%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  flex-wrap: wrap;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
 	color: rgb(116, 7, 225); /*Change the colour of the text when hover with the mouse*/
}
.mainpanel{float: left; display: block; position: relative;
	width: 23%; height: 160px; margin: 0px; padding: 0px; padding-bottom: 25px;
}
.listcontainrpanel{float: left; display: block; position: relative;
	width: 23%; height: 160px; margin: 0px; padding: 0px; padding-bottom: 25px;
}
.listpanel{float: left; display: block; position: relative;
	width: 100%; height: 80px; margin: 0px; padding: 0px; 
}
.sidepanel{float: left; display: block; position: relative;
	width: 23%; height: 160px; margin: 0px; padding: 0px; padding-bottom: 25px;
}
.overlay .panelimg{width: 100%;height: 160px;}
.overlay .listpanelimg{width: 100%; height: 80px;}
.overlay .displayspan{display:center; position: absolute;
	bottom: 0px; left: 0px; 
	color: rgb(248, 248, 255); 
	z-index: 2;
	width:100%;
	background-color: rgba(0, 0, 0, 0.59);
}
.overlay .displaytext {font-size: 1.1rem; color: rgb(248, 248, 255);
	z-index: 2;  box-shadow: none; border: 0px;
}
.overlay .displaytext a{font-size: 1.1rem; text-decoration: none; color: rgb(248, 248, 255); transition: 0.3s; /* Transition effects on hover (color) */}
.overlay .displaytext a:hover {color: rgb(116, 7, 225);}
/*Navigation bar end*/

#themeswitch{
  height: 40px; width: 40px; top: 4px; right: 75px;
  padding: 0; border-radius: 50%;
  background-color: var(--base-variant);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  overflow: hidden;
}
[data-theme="dark"] #themeswitch{
  background-image: url("../images/dark_mode.png");
  background-repeat: no-repeat;
  background-size: 40px;
}
[data-theme="light"] #themeswitch{
	background-image: url("../images/light_mode.png");
	background-repeat: no-repeat;
 	background-size: 40px;
}

/**Responseive Text Start**/
@media screen and (min-width: 1171px) and (max-width: 1445px) {
	.search-container button {padding: 0px 0px;  width:30px; height: 30px;}
}
@media screen and (min-width: 761px) and (max-width: 1170px) {
	.search-container button {padding: 0px 0px;  width:25px; height: 25px;}
}
@media screen and (min-width: 761px) and (max-width: 922px) {
  	.search-container {padding-top: 10px; margin-top: 2px; width: 45%;}
	.search-container button {padding: 0px 0px;  width:20px; height: 20px;}
	header input[type=text] {border: 1px solid rgb(204, 204, 204); padding: 0px;}
	.search-container input[type=text] {padding: 0px;}
}
@media screen and (min-width: 601px) and (max-width: 760px) {
  	.search-container {padding-top: 10px; margin-top: 2px; width: 45%;}
	.search-container button {padding: 0px 0px;  width:20px; height: 20px;}
	header input[type=text] {border: 1px solid rgb(204, 204, 204); padding: 0px;}
	.search-container input[type=text] {padding: 0px;}
	.hideablelnk {display: none;}
}
@media screen and (min-width: 451px) and (max-width: 600px) {	
	.search-container {padding-top: 10px; margin-top: 5px; width: 45%;}
	.search-container button {padding: 0px 0px;  width:20px; height: 20px;}
	header input[type=text] {border: 1px solid rgb(204, 204, 204); padding: 0px;}
	.search-container input[type=text] {padding: 0px;}
	header a{padding-left: 5px; padding-right: 5px;}
	.hideablelnk {display: none;}
	#themeswitch{right: 65px;}
    .topnav{height: auto; justify-content: center;} 
    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    .topnav a, .dropdown {display: none;}
    .topnav a.icon { 
        float: right;
        display: block;
		top: 50%; left: 50%;
    }
	.dropdown:hover .dropdown-content {display: none; overflow: hidden;}
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative; display: list-item;}
    .topnav.responsive a.icon {
        position: absolute;
        top: 7px; left: 90%;
		display: flex;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
	.topnav.responsive .dropdown {display: block; float: none;  text-align: center;}
  	.topnav.responsive .overlay-content {position: relative; display: block; padding: 12px 16px;
		background-color: rgba(145, 145, 145, 0.905);
		 z-index: 1000;
	 	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		color:rgb(248, 248, 255);
	}
	.topnav.responsive .overlay-content a:hover{
		color: rgb(116, 7, 225); 
		background-color: rgba(145, 145, 145, 0.905);
	}
  	.topnav.responsive .dropdown .dropbtn {
    	display: block;
    	width: 100%;
    	text-align: center;
		padding-bottom: 5px;
  	}
	.topnav.responsive .overlay {
		height: auto; width: 100%; padding: 0px; margin: 0px;
		position: relative;
		justify-content: center;
  		z-index: 1000;
  		left: 0;
  		top: 150;
		background-color: rgba(145, 145, 145, 0.905);
  		overflow-x: hidden; /* Disable horizontal scroll */
  		transition: 0; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}
	.topnav.responsive .overlay-content {
  		position: relative;
 		top: 0; /* 25% from the top */
 		width: 100%; /* 100% width */
 		text-align: center; /* Centered text/links */
 		padding: 0px;margin: 0px;
	}
	.topnav.responsive .overlay a {
 		padding: 0px; margin: 0px; padding-top: 5px; padding-bottom: 5px;
 		text-decoration: none;
 		font-size: 0.9rem;
  		color: rgb(248, 248, 255);
  		display: block; /* Display block instead of inline */
  		transition: 0; /* Transition effects on hover (color) */
	}
	.mainpanel{display: block; width:100%; border: 0px;}
	.listcontainrpanel{display: block; width:100%; border: 0px;}
	.listpanel{display: block; width:100%; border: 0px;}
	.sidepanel{display: block; width:100%; border: 0px;}
	#crpanel{background-image: none;}
	#ggpanel{background-image: none;}
	#beastpanel{background-image: none;}
	#pbpanel{background-image: none;}
	#xpacpanel{background-image: none;}
}
@media screen and (max-width: 450px) {
    body {font-size: 14px;}
    h1 {font-size: 30px;}
    h2 {font-size: 20px;}	
	.search-container {padding-top: 10px; margin-top: 5px; width: 45%; margin-left: 10px; margin-right: 0px;}
	.search-container button {padding: 0px 0px; ; width:15px; height: 15px;}
	header input[type=text] {border: 1px solid rgb(204, 204, 204); padding: 0px;}
	.search-container input[type=text] {padding: 0px;}
	.hideablelnk {display: none;}
	.hideablelnk2 {display: none;}
	header img{width: 25px;}
	#themeswitch{right: 65px;}
    .topnav{height: auto; justify-content: center;} 
    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    .topnav a, .dropdown {display: none;}
    .topnav a.icon { 
        float: right;
        display: block;
		top: 50%; left: 50%;
    }
	.dropdown:hover .dropdown-content {display: none; overflow: hidden;}
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative; display: list-item;}
    .topnav.responsive a.icon {
        position: absolute;
        top: 7px; left: 90%;
		display: flex;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
	.topnav.responsive .dropdown {display: block; float: none;  text-align: center;}
  	.topnav.responsive .overlay-content {position: relative; display: block; padding: 12px 16px;
		background-color: rgba(145, 145, 145, 0.905);
		 z-index: 1000;
	 	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
		color:rgb(248, 248, 255);
	}
	.topnav.responsive .overlay-content a:hover{
		color: rgb(116, 7, 225); 
		background-color: rgba(145, 145, 145, 0.905);
	}
  	.topnav.responsive .dropdown .dropbtn {
    	display: block;
    	width: 100%;
    	text-align: center;
		padding-bottom: 5px;
  	}
	.topnav.responsive .overlay {
		height: auto; width: 100%; padding: 0px; margin: 0px;
		position: relative;
		justify-content: center;
  		z-index: 1000;
  		left: 0;
  		top: 150;
		background-color: rgba(145, 145, 145, 0.905);
  		overflow-x: hidden; /* Disable horizontal scroll */
  		transition: 0; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}
	.topnav.responsive .overlay-content {
  		position: relative;
 		top: 0; /* 25% from the top */
 		width: 100%; /* 100% width */
 		text-align: center; /* Centered text/links */
 		padding: 0px;margin: 0px;
	}
	.topnav.responsive .overlay a {
 		padding: 0px; margin: 0px; padding-top: 5px; padding-bottom: 5px;
 		text-decoration: none;
 		font-size: 0.9rem;
  		color: rgb(248, 248, 255);
  		display: block; /* Display block instead of inline */
  		transition: 0; /* Transition effects on hover (color) */
	}
	.mainpanel{display: block; width:100%; border: 0px;}
	.listcontainrpanel{display: block; width:100%; border: 0px;}
	.listpanel{display: block; width:100%; border: 0px;}
	.sidepanel{display: block; width:100%; border: 0px;}
	#crpanel{background-image: none;}
	#ggpanel{background-image: none;}
	#beastpanel{background-image: none;}
	#pbpanel{background-image: none;}
	#xpacpanel{background-image: none;}
}
/**Responseive Text end**/