/* CREDITS:
- header title font: Blackletter
- main font: Georgia
- layout js: https://petrapixel.neocities.org/coding/snippets
*/

*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
	outline: 0px solid red;
}

html {
	min-height: 100vh;
	position: relative;
	 overflow-x: hidden;
  scrollbar-color: var(--font-color) var(--bg);
  scrollbar-width: thin;
}

html, body, button, a, a:hover,
summary {
	cursor: url('../cursors/cursor2.gif'),
	default;
}

:root {
	/* Colors */
  --bg: #0a0a0b;
  --bg2: #151516;
  --bg3: #09090a;
  --font-color: #8d8d8e;
  --font-color2: #919192;
  --bold-color: #9D9D9E;
  --heading-color: #9D9D9E;
  --color1: #242324;
  --color2: #7765a5;
  --color3: #151516;
  --color4: #121212;

	/* Font */
  --font: Georgia, Times New Roman, Arial;
  --font-size: 1.1em;
  --letter-spacing: 0.08em;
  --line-height: 1.47em;
  --heading-font: DeiGratia;
  --header-height: 62px;
  --header-font: Blackletter;
  --header-size: 5.5em;
  --nav-margin: 1em;

  /* Other */
  --margin: 1em;
  --padding: 1em;
  --header-padding: 2.3em;
  --border: 0px solid #000000;
  --round-borders: 0px;
  --sidebar-width: 20%;
  --width: 655px;
  --link-width: 19.3%;
  
  /* Corner Border-thing */
	--s: 15px; /* the size on the corner */
    --t: 1px;  /* the thickness of the border */
    --g: 15px; /* the gap between the border and image */
}

/* FONTS */
			
			@font-face {
    font-family: Blackletter;
    src: url('fonts/blackletter/blackletter.TTF') format("truetype");
            }
			
			@font-face {
    font-family: Georgia;
    src: url('fonts/georgia/georgia.ttf') format("truetype");
            }
			
	/* FONTS END */
	

/* LAYOUT */

body {
	min-height: 100vh;
	background-image: url('');
	background-color: var(--bg);
	background-attachment: fixed;
	font-size: var(--font-size);
	font-family: var(--font);
	letter-spacing: var(--letter-spacing);
	line-height: var(--line-height);
	color: var(--font-color);
	text-transform: lowercase;
}

.layout {
	display: flex;
	justify-content: center;
  align-items: center;
  flex-direction: column;
	width: var(--width);
	margin: 0 auto;
	margin-top: 2em;
}

header {
	background: repeating-conic-gradient(from 45deg, #151516 0% 25%, #111113 0% 50%);
background-size: 40px 40px;
background-color: #111113;
	width: var(--width);
	height: var(--header-height);
	padding-bottom: var(--header-padding);
	margin-bottom: 5em;
	margin: 0 auto;
	position: relative;
	z-index: -1;
}

header:after {
      content: "";
      width: 65px;
      height:var(--header-height);
      display: block;
      position: relative;
	  z-index: 9;
	  margin-left: 35em;
	  margin-top: -30px;
	  transform: rotate(90deg);
      background: rgba(10,10,11, 1);
      background: -webkit-gradient linear, 0% 0% 0% 100%, from rgba(10,10,11, 0.1), to rgba(10,10,11, 1);
      background: -webkit-linear-gradient(bottom, rgba(10,10,11, 0), rgba(10,10,11, 1), rgba(10,10,11, 1));
background: -moz-linear-gradient(bottom, rgba(10,10,11, 0), rgba(10,10,11, 1), rgba(10,10,11, 1));
background: -ms-linear-gradient(bottom, rgba(10,10,11, 0), rgba(10,10,11, 1), rgba(10,10,11, 1));
background: -o-linear-gradient(bottom, rgba(10,10,11, 0), rgba(10,10,11, 1), rgba(10,10,11, 1));
      bottom: 0;
      left: 0;
      z-index: -10;
      margin-bottom: 50px;
  }

.hdrtitle {
	font-family: var(--header-font);
	font-size: var(--header-size);
	text-shadow: -3px 3px rgba(0,0,0,0.0);
	position: relative;
	margin-top: 4px;
}

.navbox {
	background-color: var(--color3);
	padding-top: 1em;
	height: 265px;
	width: 150px;
	position: fixed;
	margin-left: -48em;
	top: 0;
	z-index: 9;
	-webkit-mask:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 17%/38px 100%;
}

.navlink {
	display: block;
	width: 100%;
	padding-left: var(--margin);
	margin-bottom: 0.2em;
}

#widget-calendar table {
  border: 1px solid var(--bg2);
  border-collapse: collapse;
  color: var(--font-color);
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background-color: var(--bg);
}

#widget-calendar td {
  padding: 0 .13rem;
  border: 1px solid var(--color1);
}

#widget-calendar .month {
  font-weight: bold;
  text-align: center;
  background-color: var(--font-color);
  color: var(--bg);
}

#widget-calendar .days {
  font-weight: normal;
}

#widget-calendar .today {
  font-weight: bold;
	color: var(--color2);
}

#widget-calendar .blank {
  background-color: var(--bg2);
}

#music {
	background-color: var(--bg);
	width: auto;
	height: 43px;
	margin-top: var(--margin);
	text-align: center;
	padding: 0.1em;
	border: 1px solid var(--color1);
	
}

.playlistholder2 p {
	margin: 0.3em;
	padding-left: 0.7em;
}

#songName {
	display: none;
}

main {
	width: var(--width);
}

section {
	width: 100%;
}

#secthalf {
	width: 50%;
}

.lilbox {
	margin-top: var(--margin);
	text-align: center;
}

.boxflex {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1rem;
	flex: 0 1 auto;
	margin: var(--margin);
}

.membox {
	width: 25%;
}

.membox img {
	margin-bottom: 0.3em;
}

.textbox {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.textbox p {
	margin-left: 0;
}

.stampsbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: var(--margin);
	margin-bottom: var(--margin);
	width: 100%;
}

.stampsbox img {
	width: ;
}

.scrollbox {
	height: 200px;
	width: 100%;
	overflow: auto;
	overflow-x: hidden;
	padding: var(--padding);
	margin-bottom: var(--margin);
}

footer {
	color: var(--font-color);
	text-align: right;
	margin: 0 auto;
	width: var(--width);
	border-top: 1px solid var(--color1);
	padding-top: 0.5em;
}

/* LAYOUT END */

/* TEXT AND THINGS */

a, a:visited {
color: var(--font-color);
text-decoration: var(--font-color) solid underline;
	text-decoration-thickness: 0.03em;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--bg);
  text-decoration: var(--font-color) solid underline;
  background-color: var(--font-color);
 }
 
 a:focus {
	 border: 3px solid var(--color2);
 }
 
 .linkbg:hover {
	 background-color: transparent;
 }
 
 .hover2 {
	 cursor: zoom-in;
 }
 
 h1, h2, h3 {
	 color: var(--heading-color);
 }
 
h1 {
	font-family: var(--font);
	font-weight: bold;
	font-size: 1.6em;
	letter-spacing: 0.08em;
	margin-bottom: 0.3em;
	line-height: 1.3em;
	position: relative;
	overflow: hidden;
}

h1:after {
	position: absolute;
    top: 50%;
    overflow: hidden;
    width: 100%;
    height: 1px;
    content: '';
    border-top: 2px solid var(--color1);
	margin-left: 0.3em;
}

h1::before {
	content: url('../pixels/crown3.png');
	font-weight: normal;
    float: left;
	margin-right: 0.3em;
}

h2, h3 {
	font-family: var(--font);
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0.08em;
	margin-bottom: 0.5em;
}

#list {
	margin-top: 0;
}

.linkspace {
	display: inline-block;
}

.linkspace::after {
	content: '|';
	color: var(--color1);
	margin-left: 0.4em;
	margin-right: 0.4em;
}

p {
	margin-bottom: var(--margin);
}

.pline {
	border-left: 5px solid var(--color1);
	padding-left: 1em;
}

.pborder {
	border-bottom: 1px dashed var(--font-color);
	padding-bottom: 1em;
}

.pright {
	text-align: right;
}

b {
	background-color: var(--font-color);
	color: var(--bg);
}

em {
	font-weight: bold;
}

blockquote {
	background-color: var(--color3);
	font-style: italic;
	padding: 0.7em;
	margin-bottom: var(--margin);
	border-left: 9px solid var(--font-color);
}

blockquote p {
	margin-bottom: 0;
}

.bigtext {
	text-transform: uppercase;
}

details {
	color: var(--font-color);
	margin-top: var(--margin);
	margin-bottom: var(--margin);
	padding-top: var(--padding);
	border-top: 1px solid var(--color1);
}

summary {
	font-family: var(--heading);
	font-weight: bold;
	letter-spacing: var(--letter-spacing);
}

summary::marker {
  color: var(--font-color);
  font-size: 20px;
}

details > summary {
    list-style-type: none;
}

details > summary::marker {
    display: none;
}

details > summary::before {
    content: '[+]';
	float: left;
	margin-right: 0.3em;
	font-size: 1.3em;
	font-style: normal;
	font-weight: normal;
	position: relative;
	top: -1px;
}

details[open] > summary::before {
    content: '[-]';
}

.topmargin {
	margin-top: 0.8em;
}

.notop {
	margin-top: 0;
}

.nomargin {
	margin-bottom: 0;
}

.yesmargin {
	margin-bottom: var(--margin);
}

.nopadding {
	padding-bottom: 0;
}

#noborder {
	border: 0;
}

ol, ul {
  list-style-type: square;
  margin-left: 2em;
  margin-bottom: 1em;
}

ol li, ul li {
  margin-bottom: 0.2em;
}

ol li::marker {
  color: var(--color1);
}

ul li::marker {
  color: var(--color1);
}

.sublist {
	margin-left: 1.4em;
	list-style-type: disc;
}

#longlink {
	list-style: none;
	margin-left: 0;
}

#longlink li {
	background-color: var(--color4);
	padding: 0.3em;
}

.plantlist {
	list-style-type: none;
	margin: 0;
}

.purple {
	color: var(--color2);
}

/* FONTS AND THINGS END */


/* IMAGES */

.bordertop {
	background-color: var(--bg3);
	font-size: 0.9em;
	font-style: italic;
	text-align: right;
	min-width: 100%;
	padding: 0.7em;
	padding-left: 0;
	position: fixed;
	top: 0;
	z-index: 9;
	border-bottom: 1px solid var(--color1);
	box-shadow: 0 5px rgba(0,0,0,0.25);
}

.jimg {
	display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--margin);
  width: 50%;
}

.imgcolor {
	filter: grayscale(0%);
}

img {
	filter: grayscale(100%);
	vertical-align: middle;
	display: inline-block;
}

img:hover {
	filter: grayscale(0%);
}

.imgfit {
	object-fit: contain;
	width: 100%;
}

.sideimg {
	max-width: 180px;
	float: left;
	margin-right: 1em;
}

.sideimg2 {
	max-width: 180px;
	float: right;
	margin-left: 1em;
}

.smallside {
	width: auto;
	float: left;
	margin-right: 1em;
}

.smallside2 {
	width: auto;
	float: right;
	margin-left: 1em;
}

.floatimg {
	position: absolute;
	margin-top: 8.7em;
	margin-left: -4em;
	z-index: 9;
}

.borders {
	border: 2px inset #000;
}

.borders2 {
	border: 21px solid transparent;
border-image: url('../pixels/gborder1.png') 21 round;
}

.borders3 {
	padding: 0.5em;
	border: 1px solid var(--color1);
}

/* IMAGES END */

/* DIVIDERS */

.divider {
	width: 100%;
	border-bottom: 1px dashed var(--font-color);
	margin-bottom: var(--margin);
}

.imgdivider {
	background-image: url('../pixels/divider9.png');
	background-repeat: repeat-x;
	background-position: center;
	height: 20px;
	width: 100%;
	margin-bottom: var(--margin);
}

/* DIVIDERS END */

/* OTHER LAYOUTS */


.plantbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: var(--margin);
	border: 1px solid var(--color1);
	padding: 0.5em;
}

.plantbox h2 {
	background-color: var(--color1);
	color: var(--font-color);
	font-size: 1.2em;
	padding: 0.3em;
	border-bottom: 0;
	width: 100%;
	margin-bottom: 0.5em;
	margin-top: 0;
}

.plantbox h2:after {
	border: 0;
}

.plantimg {
	width: 30%;
	border: 1px solid var(--color1);
	margin-right: 0.5em;
}

.plantinfo {
	width: 68.6%;
	border: 1px solid var(--color1);
	padding: 0.5em;
}

/* THINGS UGH */

.note {
	text-align: center;
	color: var(--font-color2);
	background-color: var(--color3);
	padding: var(--padding);
	margin-bottom: var(--margin);
	
}

.note::after{
  content:url('../pixels/chess.png');
  text-align: right;
  display: block;
}

.groupflex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: var(--padding);
}

.groupbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 150px;
	width: 23.15%;
	background-color: var(--color1);
}

.grouptitle {
	position: relative;
	margin-top: 0;
background-color: var(--font-color);
	color: var(--heading);
	border: 0;
	width: 100%;
	text-align: left;
	padding: 0.3em;
}

.groupbox p {
	margin-bottom: 0;
}

.imgbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin-bottom: var(--margin);
}

.artgallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	margin-bottom: var(--margin);
}

.artimg {
	padding: 0.5em;
	border: 1px solid var(--color1);
	width: 138px;
	transition: 0.2s;
}

.artimg:hover {
	transform: scale(1.1);
}

.artgallery a:hover {
	background-color: transparent;
	cursor: zoom-in;
}

.memblist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	margin-bottom: var(--margin);
	text-align: center;
}

.memblink {
	width: 23.1%;
}

.membicon {
	object-fit: contain;
	width: 100%;
	border-left: 1px solid var(--color1);
	border-right: 1px solid var(--color1);
	border-top: 1px solid var(--color1);
}

.membname {
	display: block;
	background-color: var(--color1);
	color: var(--font-color) !important;
	padding: 0.3em;
	text-decoration: none;
}

.membname:hover {
	color: var(--bg) !important;
}

.sidebox {
	float: left;
	margin-right: 1em;
	width: 180px;
}

.sidebox img {
	object-fit: contain;
	width: 100%;
	margin-bottom: 0.5em;
}

.sidebox table {
border: 1px solid var(--color3);
	text-transform: lowercase;
	text-align: left;
	background-color: var(--bg);
	color: var(--text-color);
	font-size: 0.9em;
	padding: 0;
	width: 100%;
}

.sidebox td {
	border: 1px solid var(--color3);
}

.tdcolor {
	background-color: var(--color3);
	text-align: center;
	padding-left: 0;
}

.tdwidth2 {
	width: 40%;
}

.tdinfo {
	padding-left: 0.3em;
}

table td {
	padding: 0.1em;
}

.sidebox2 {
	float: right;
	margin-left: 1em;
	width: 180px;
}

.thing {
	background-color: var(--color3);
	color: var(--color2);
	font-weight: bold;
	text-align: center;
	display: inline-block;
	width: 60px;
	padding-bottom: 0.3em;
}

.albumbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--margin);
}

.albumimg {
	width: 207px;
}

/* MEDIA */

@media (max-width: 750px), (orientation: portrait) {
	
	html, body {
    overflow-x: hidden;
}
  
  .layout {
	height: 100%;
	margin-top: 1.3em;
	width: 90%;
  }
  
  .navbox,
  header, footer, main  {
	  width: 100%;
  }
  
  .navbox {
	  position: relative;
	  text-align: center;
	  height: 110px;
	  margin-left: 0;
	  margin-top: var(--margin);
  }
  
  .navlink {
	  display: inline-block;
	  width: auto;
	  padding-left: 0;
	  margin-left: 0.5em;
	  margin-right: 0.5em;
  }
  
  .hdrtitle {
	  font-size: 3.4em;
	  margin-top: 0.2em;
  }
  
  footer {
	  text-align: center;
	  margin-bottom: var(--margin);
  }
  
  .sideimg, .sideimg2 {
	  float: none;
	  min-width: 100%;
	  margin-left: 0;
	  margin-right: 0;
  }
  
  .smallside, .smallside2 {
	  float: ;
  }
  
  .jimg {
	  width: 100%;
  }
  
  .plantbox {
	  display: flex;
	  flex-direction: column;
  }
  
  .plantimg, .plantinfo {
	  width: 100%;
  }
  
  .plantimg {
	  margin-bottom: 0.5em;
  }
  
  .memblist {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  width: 100%;
  }
  
  .memblink {
	  min-width: 47%;
  }
  
  .sidebox {
	  width: 100%;
  }
  
  .albumimg {
	  width: 47.9%;
  }
		  
	.abracadabra {
	  display: none;
  }
}