/* ========================================================================== */
/* Font imports */
/* ================================ */
@font-face {  font-family: "LOGOTEXT";  src: url("fonts/PixelOperatorHB8.ttf");}
@font-face {  font-family: "HEADERTEXT";  src: url("fonts/vtech.woff");}
@font-face {  font-family: "BODYTEXT";  src: url("../fonts/Comfortaa/Comfortaa-Regular.ttf");}
@font-face {  font-family: "LINKTEXT";  src: url("fonts/cordata.woff");}
@font-face {  font-family: "ITEXT";  src: url("fonts/loverine.otf");}
@font-face {  font-family: "BTEXT";  src: url("fonts/PoetsenOne-Regular.ttf");}

/* ========================================================================== */
/* Variables*/
/* ================================ */
:root {  
	--font-logo: "LOGOTEXT", serif;
	--font-family-header: "HEADERTEXT", monospace;
	--font-family: "BODYTEXT","Verdana", sans-serif;  
	--font-code: "LINKTEXT", monospace;
	--font-i: "ITEXT", cursive;
	--font-b: "BTEXT", cursive;

	/*colors, including backgrounds*/
	--color-main:  #00001a/*#0F52BA*/; 
	--color-section: #f4f1f1;   
	--color-memberSec: #5DB7DE50;
    --color-body: #00001a;
	--color-border: #5DB7DE;
    --color-accent: yellow;
    --color-accent2: inherit;	

	/* text */	
	--default-text-color: #fff;    
	--text-section: #00001a;
	--text-hyperlink: #c7008e /*#D58936*/;
	--text-hyperlink-member: #c7008e;
	--text-hyperlink-bg: #ffffff10;

} 

/* ========================================================================== */
/* Basic page style */
/* ================================ */
body {
    margin: 0; padding: 0;
	font-family: var(--font-family);

    /* background */
    background-image: url('../css/background.svg');
    background-color: var(--color-body);
    background-size: cover;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: center top; 

    }

/*image tweaks*/
a img {text-decoration: none;}

h1 {
    font-size: 3em; 
    font-family: var(--font-logo);
    color: var(--color-border);
    }
h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: 1.67em;}
h6 {font-size: .67em;}

/*h1,*/ h2, h3, h4, h5, h6 {
	font-family: var(--font-family-header);
	color: var(--default-text-color);
	text-align: center;
}
p {
    font-size: 1em;
    line-height: 200%;    
}

/* ========================================================================== */
/* Text customization */
/* ================================ */

article h2:before {content: '▀▓█░▄ '; color: var(--color-accent);}
article h2:after {content: ' ▄░█▒▀'; color: var(--color-accent);}

/*hyperlinks (in paragraphs)*/
p a  {
	background-color: var(--text-hyperlink-bg);
	color: var(--text-hyperlink);
    font-family: var(--font-code);
	text-decoration: underline;
	/*weirdo transforming angles and things*/
	/*display: inline-block;
	transform: rotate(2deg);*/
	padding: 4px;
    border-radius: 4px;
}
p a:hover {	
	/*color: var(--text-hyperlink-hover);*/
	text-decoration: underline overline double;
	/*	display: inline-block;
	transform: rotate(-4deg);
	padding: 4px;*/
	}

/*codeblock*/
code, pre, #codeBlock {
    font-family: var(--font-code);
    font-size: small;	
	margin: 1em auto;	
	padding: 4px;
	overflow-x: scroll; 
	width: 80%;
	border: 1pt dashed var(--color-section);
	background-color: #00000090;
	color: white;
	
}
/*B and I */
b, strong {    
	/*color: var(--color-accent);*/
    padding: 4px;
    font-family: var(--font-b);
    font-size: inherit;
    }
i, em {
	/*color: var(--color-accent2); */
	font-family: var(--font-i);
	font-size: xx-large;
}

/* ========================================================================== */
/* Structure (body, semantic) */
/* ================================ */

#container {
	width: 100%;
	margin: 0; 
	padding: 0;
	display: flex;
	flex-direction: column;
	align-content: space-between;
    background-color: #00000090;
  }  

header {	
	margin: 0 auto;
	text-align: center;
}

.containerContent {
	display: flex;
	flex-direction: row;
	margin: 0 auto;
	background: var(--color-section);
	border-top: 10pt solid var(--color-border);
	border-bottom: 10pt solid var(--color-border);
}
.containerContent section {
	width: 25%;
	margin: 0 auto;
	padding: 1em;
	overflow-x: clip;    
}
.containerContent section p, 
.containerContent section h2 {
	color: var(--color-main);
}

article/*#articleJoin*/ {
	width: 100%;
	max-width: 700px;
	margin: 1em auto;
	text-align: center;
	margin-top: 2em;
	
}
article p {
	margin: 1em auto; 
	color: var(--default-text-color);
	width: 75%;
	max-width: 550px;
}

/*webring/member section*/
article#memberList {
		width: 100%;
	max-width: 900px;
	margin: 1em auto;
	text-align: center;
}
div.webring-members {
	display: flex;
	flex-direction: row; 	
	justify-content: center;
}

div.webring-members a {font-family: inherit; background-color: unset; font-weight: bold; color: var(--text-hyperlink-member); }

section.memberSec {	
	font-family: "Tw Cen Mt", sans-serif;	
	margin: .5em;
	min-width: 100px;
	max-width: 150px;
	background-color: var(--color-memberSec);
	border: 2pt solid var(--color-accent);
	border-radius: 1em;

	display: inline-block;
	transform: rotate(-4deg);
	
}
section.memberSec p {	line-height: unset;}

footer {margin: 4em auto 10px auto; text-align: center; color: white;}
footer a {transform: unset;}
footer a:hover {transform: unset;}

/* ========================================================================== */


/* ========================================================================== */
/* Media Queries*/
/* ================================ */
@media screen and (max-width: 600px) {
    
	#containerContent {
	display: flex;
	flex-direction: column;
}
#containerContent section {
	width: 80%;
	margin: 2em auto;
	padding: 1em;
	border: 1pt solid black;
}

        
}