body {
    color: #2a46cf;
    background-color: #000000;
    background-image: repeating-linear-gradient(
	0deg,
	rgb(133 195 244) 0px,
	rgb(133 195 244) 5px,
	rgb(167 207 238) 5px,
	rgb(167 207 238) 10px
	);
	background-attachment: fixed;
	cursor: url("cursor.png"), auto;
	font-family: Arial, Helvetica, sans-serif;
}
body.HT{
    background-image: repeating-linear-gradient(
	0deg,
	rgb(133 244 195) 0px,
	rgb(133 244 195) 5px,
	rgb(167 238 207) 5px,
	rgb(167 238 207) 10px
	);
	font-family: "Old Standard TT", serif;
}
body.blog{
    background-image: repeating-linear-gradient(
	0deg,
	rgb(255 224 170) 0px,
	rgb(255 224 170) 5px,
	rgb(255 204 153) 5px,
	rgb(255 204 153) 10px
	);
	font-family: Georgia, "Times New Roman", serif;
	color: #000000;
}

/*general stylystic stuff*/
button {
    padding: 10px;
    border-radius: 5px;
    background-color: blue;
    color: white;
    cursor: pointer;
    font-family: "Trebuchet MS", sans-serif;
    font-weight: 600;
}

right{
	float: right;
}
#post-date {
    float: right;
}

h1 {
	font-family: Chalkboard;
	font-style: italic;
	color: #0029d7;
}
h2, h3, h4 {
	font-family: "Trebuchet MS", sans-serif;
	font-weight: 600;
	color: #001fd0;
}
h3, h4 {
  font-weight: 400;
}
h3 {
	font-family: impact;
}
bb {
	color: #bedfff;
	text-shadow: 1px 0px #2a46cf, -1px 0px #2a46cf, 0px 1px #2a46cf, 0px -1px #2a46cf;
}
ps, psB {
	font-family: Comic Sans MS;
}
psB {
	font-size: 24px;
}

/*dividers, for "chapters"*/
.dividerL, .dividerR, .divider1L, .divider1R{
border-top: 3px dashed #000000;
width: 25%;
display: inline-block;
vertical-align: middle;
flex-grow: 1;
}
.divider1L, .divider1R {
border-top: 1px dashed #000000;
}
.dividerL, .divider1L {
  margin-right: 10px; /* space between line and text */
}

.dividerR, .divider1R {
  margin-left: 10px; /* space between text and line */
}
.divider-box{
	display: flex;
  	align-items: center;
  	width: 100%;
}

.divider-wide, .dividerL-wide {
border-top: 3px dashed #000000;
width: 100%;
align-items: center; 
justify-content: center;
}
.dividerL-wide {
border-top: 1px dashed #000000;
}

/*tilting text*/
.tiltedH {
  transform: rotate(-15deg); /* tilt X degrees (for *wow* factor)*/
  display: inline-block;
}


/*div that forces element to be in center*/
.center-wrapper {
    flex: 1;
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertical */
}


/*Button for "menu" section*/
.grid-container-a button, .grid-container-a2 button, .grid-HTcontainer-a2 button{
	margin-top: 2.5px;
	margin-bottom: 2.5px;
letter-spacing: 1px;
text-align: center;
border-radius: 6px;
border: 1px solid #000000;
width: 100%;
background-color: #ff5263;
}


/*Button goes dark*/
.grid-container-a button:hover, .grid-container-a2 button:hover, .grid-HTcontainer-a2 button:hover {
    background-color: #cc4250; /* a darker red */
}

.grid-container-a2 button, .grid-HTcontainer-a2 button{
	max-width:150;
}

.grid-container-a button.active, .grid-container-a2 button.active, .grid-HTcontainer-a2 button.active{
	background-color: #ffffed;
	color: #393939;
}


/*"Menu" settings*/
.grid-container-a {
	background-color: #d3f3ff82;
    display: flex;
    width: 100%;
    height: 250px;
    border-radius: 10px;
    border: 1px solid #0042aa;
    box-sizing: border-box;
}


/*unsure why I created 3 of them, in theory one works. Eh*/
.Head-Menu, .Head-Menu-B, .Head-Menu-C {
display: block;
height: 245px;
width: 140px;
min-width: 90px;
overflow-y: hidden;
margin: 1px;
padding: 5px;
border-radius: 10px;
background-image: url("imgs/bg1.png");
text-align: center;
float: left;
margin-left: 20px; /* space between Heads */
}
/*Similar to above but to right - unsure how well it works*/
.Head-Menu-D {
	float: right;
	margin-right: 5px;
	margin-top: 55px;
}

/*general copy-paste*/
.grid-container-a2 {
	position: relative;
	background-color: #d3f3ffdd;
	margin-top: 25px;
	width: 150px;
	float: left;
	border-radius: 6px;
	border: 1px solid #000000;
	z-index: 0;
	margin-bottom: 5px;
}
/*For HT*/
.grid-HTcontainer-a2 {
	position: relative;
	background-color: #d3ffe282;
    margin-top: 55px;
	width: 150px;
	float: left;
	border-radius: 6px;
	border: 1px solid #000000;
	z-index: 0;
	margin-bottom: 5px;
}


/*Main section*/
.grid-container, .grid-HTcontainer {
	margin: 25px;
	padding: 20px;
	background-color: #ffffff;
    border-radius: 10px;
    border: 4px double #000000;
    box-sizing: border-box;
    position: relative;
    z-index: 39;
	max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/*Main section for Hattrick (gets special treatment)*/
.grid-HTcontainer {
	margin-top: 55px;
	background: 
	repeating-linear-gradient(
		0deg,
		#3da346 0px,
		#3da346 20px,
		#4ac556 20px,
		#4ac556 40px);
	color: #ffffff;
    border: 4px outset #000000;}
.grid-HTcontainer :is(h1, h2, h3, h4) {
	color: #ffffff;
}
.grid-HTcontainer bb {
	color: #c8fdd2;
	text-shadow: 1px 0px #007a13, -1px 0px #007a13, 0px 1px #007a13, 0px -1px #007a13;
}
/*If it works, DON'T TOUCH IT*/
/*That being said, code bellow is scarry
one day I'll make it prettier*/
.grid-HTcontainer{
	padding-top: 20px;
	padding-bottom: 20px;
	background: 
	linear-gradient(
		to top,
		transparent calc(50% - 2px),
		#ffffff55 calc(50% - 2px),
		#ffffff55 calc(50% + 2px),
		transparent calc(50% + 2px)),
	radial-gradient(
		circle at center,
		#ffffff55 0px,
		#ffffff55 4px,
		transparent 4px,
		transparent 60px,
		#ffffff55 60px,
		#ffffff55 64px,
		transparent 64px),
	repeating-linear-gradient(
		0deg,
		#3da346 0px,
		#3da346 20px,
		#4ac556 20px,
		#4ac556 40px);
}
.grid-HTcontainer::before {
	content: "";
	position: absolute;
	top: -40px;
	left: 30%;
	width: 40%;
	height: 40px;

	background:
		linear-gradient(#ffffff, #ffffff) left center / 6px 100% no-repeat,
		linear-gradient(#ffffff, #ffffff) right center / 6px 100% no-repeat,
		linear-gradient(#ffffff, #ffffff) center top / 100% 6px no-repeat,
		linear-gradient(#ffffff, #ffffff) center bottom / 100% 2px no-repeat,
		repeating-linear-gradient(
	    45deg,
        rgba(255,255,255,0.3) 0px,
		rgba(255,255,255,0.3) 2px,
		transparent 2px,
		transparent 8px),
		repeating-linear-gradient(
	    -45deg,
        rgba(255,255,255,0.3) 0px,
		rgba(255,255,255,0.3) 2px,
		transparent 2px,
		transparent 8px),
		repeating-linear-gradient(
		0deg,
		#3da346 0px,
		#3da346 20px,
		#4ac556 20px,
		#4ac556 40px);
}
.grid-HTcontainer::after {
	content: "";
	position: absolute;
	bottom: -40px;
	left: 30%;
	width: 40%;
	height: 40px;

	background:
		linear-gradient(#ffffff, #ffffff) left center / 6px 100% no-repeat,
		linear-gradient(#ffffff, #ffffff) right center / 6px 100% no-repeat,
		linear-gradient(#ffffff, #ffffff) center top / 100% 2px no-repeat,
		linear-gradient(#ffffff, #ffffff) center bottom / 100% 6px no-repeat,
		repeating-linear-gradient(
	    45deg,
        rgba(255,255,255,0.3) 0px,
		rgba(255,255,255,0.3) 2px,
		transparent 2px,
		transparent 8px),
		repeating-linear-gradient(
	    -45deg,
        rgba(255,255,255,0.3) 0px,
		rgba(255,255,255,0.3) 2px,
		transparent 2px,
		transparent 8px),
		repeating-linear-gradient(
		0deg,
		#3da346 0px,
		#3da346 20px,
		#4ac556 20px,
		#4ac556 40px);
}

/*blog section*/
.blog-buttons button{
		margin-top: 2.5px;
	margin-bottom: 2.5px;
letter-spacing: 1px;
text-align: center;
border-radius: 6px;
border: 1px solid #000000;
width: 100%;
background-color: #ff5263;
font-family: Verdana;
}
.blog-navi {
    display: flex;         
    justify-content: space-between;  /* push items to opposite sides */
    margin-top: 20px;
}
.blog-navi button {
	border: double;
    border-radius: 10px;
    background-color: #39a9FF;
}
.blog-navi button:hover {
    background-color: #007BFF;
}
.blog-container {
	border: 1px solid #000000;
	border-radius: 20px;
	max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    background: 
	repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 15px,
		#00000011 15px,
		#00000011 16px);
	background-color: #feea8f;
}

/*End section 1*/
.grid-container-b {
	position: relative;
	margin-top: -101px;
	width: 150px;
	float: right;
	border-radius: 6px;
	border: 1px solid #000000;
	background-color: #f2cf94;
	z-index: 0;
	font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}


/*settings for mobile/smaller devices, better safe than sorry!*/
@media (max-width: 1100px) {
    .grid-container-a2 {
        position: absolute;
        margin-top: 0px;
    }
    .grid-container-b {
    	margin-top: 0px;
    }
}