/* variables go up here */
 :root {
  --site-bg: url(assets/tiling_bg.png); 
  --main-text: #ceb9e4;
  --content-bg: #261636;
  --link-text: white;
  --accent: #ddddff;
  /* bg variables should also work as image URLs, if you want! */
}

 @font-face {
     font-family: 'Special Elite';
     src: url('assets/SpecialElite.ttf');
}
/* and CSS goes down here */

body {
	background: var(--site-bg);
	font-family: 'Special Elite', monospace;
	color: var(--main-text);
}

.pageContents {
    width: 90vw;
    margin: 0 auto;
}

button{
  color: var(--main-text);
  background-color: var(--site-bg);
  border: none;
  font-family: "Special Elite", monospace;
}

button:hover{
  cursor: pointer;
}

.inactive{
  opacity: 0.5;
}

.inactive:hover{
  text-shadow: 0px 0px 0px black;
  cursor: default;
}

  
.buttons{
  text-align: center;
  margin-top: 0px;
  background: black;
}

.buttons img{
	width: 50px; /* button size */
}

.box{
	border: 10px solid transparent;
    border-image: url('assets/border.png') 75 round; /*MAKE SURE that the border you pick is flush to the edges of the image linked. to adjust how much of the border image is used; replace the 75 */
	background: var(--content-bg);
    background-clip: padding-box;
    padding: 10px;
    margin: 5px;
}

#page{
	max-width: 100%;
	margin: 5px;
	}

.flexbox{
	display: flex;
}

.main {
	flex: 3;
}

.side {
	flex: 1;
	position: sticky;
	top: 0;
	max-height: 100vh;
}

img {
	max-width: 100%;
}

.navbar{
	background: black;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	height: 2em;
	align-items: center;
}

.navbar a, .navbar a:visited{
	flex: 1;
	color: var(--main-text);
	text-align: center;
}

a, a:visited{
	color: var(--link-text);
}

a:hover{
	color: var(--link-text);
	text-shadow: 0px 0px 3px var(--accent);
	transition: 0.5s;
}

.header{
	padding: 0px;
	background: var(--main-bg);
	gap: 0px;
	display: grid;
}

.flexgrid{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gelement img{
	width: 150px;
	height: 150px;
	object-fit: cover;
}

.gelement {
	width: 150px;
	text-align: center;
}