/*
coding by DAG
make swanky code!
-
Global CSS for styles that don't change between light and dark layouts
fonts from: https://gwfh.mranftl.com/fonts/shippori-antique?subsets=latin
*/

:root 
{
    --bg-colour: rgba(0,0,0,0.8);
    --accent-colour: #6600ff;
    --text-colour: #c0c0c0;
    --alert-colour:#ff0000;
    --link-colour: #00aeff;
    --vlink-colour: #a690b4; /* visited link */
    --accent-dark: #000000;
    --accent-light: #ffffff;
    --alpha-gray: rgba(255,255,255,0.2);
    --alpha-light: rgba(255,255,255,0.7);
    --alpha-dark: rgba(0,0,0,0.3);
}

* 
{
/* only put non-inherited properties here */  
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* special-elite-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/special-elite-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* shippori-antique-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Shippori Antique';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/shippori-antique-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* press-start-2p-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/press-start-2p-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v53-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* homenaje-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Homenaje';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/homenaje-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* freeman-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Freeman';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/freeman-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-extra-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/fira-sans-extra-condensed-v10-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



html
{
/* font-family: 'Rubik', 'Open Sans', sans-serif; */
/* saw Merriweather and had to try it out... I think this is a great looking font! */
font-family: "Fira Sans Extra Condensed", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
font-variation-settings: "wdth" 100;
}

/***********************
body
**************************/

body
{
    /*
    using the random b&w from unsplash
    background-image: url('../img/23purple2.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    */
    margin:0;
    padding:0;
    color: var(--text-colour);
}


b {
  color: #7B68EE;
}

/* bold and white  - used on archives */
.wtext
{
  font-weight: bold;
  color: white;
}

/***********************
main
**************************/

main 
{
    padding: 0.5em;
    margin: 0.5em;
    border:0;
    background-color: none;
    width: 100%;
    /*
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    */
}

/***********************
header
**************************/

header
{
    padding:0;
    background: none;
    text-align: center;
    width:70%;
    margin:1em auto;
} 

/***********************
links
**************************/

a:link, a:visited, a:active
{
    color: var(--vlink-colour);
    text-decoration:underline;
    -o-transition:.7s;
    -ms-transition:.7s;
    -moz-transition:.7s;
    -webkit-transition:.7s;
    transition:.7s;
    border:0;
    padding:0;
    margin: 0;
    display:inline-flex;
}


a:hover
{
    background-color: var(--accent-colour);
    color: var(--accent-light);
}


/***********************
paragraph li 
**************************/

p
{
  margin: 0.5em;
  color:var(--text-colour);
  font-size: 1.5em;
  line-height: 1.4em;
}

li, ul, ol 
{
    margin: 1em;
    color:var(--text-colour);
}

/***********************
links inside the p tag - main 
**************************/

p a, p a:visited, p a:active
{
    color: var(--vlink-colour);
    text-decoration:underline;
    -o-transition:.7s;
    -ms-transition:.7s;
    -moz-transition:.7s;
    -webkit-transition:.7s;
    transition:.7s;    
}

p a:hover
{
    color: var(--accent-light);
    background-color: var(--accent-colour);
}

/***********************
strong
**************************/

strong 
{
  color: var(--accent-colour);
  font-weight: bold;
}


/***********************
footer
**************************/

footer
{
  background-color: none;
color: var(--text-colour);
text-align: center;
padding: 1em;
margin: 0em auto;
width: 100%;
border-top:4px dotted var(--text-colour);
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}


/***********************
NAV
**************************/

nav
{
padding: 1em;
margin: 0em;
text-align: center;
display: block;	
background-color: none;
width:100%;
font-weight: bold;
border-bottom:4px dotted var(--text-colour);
/*
border:1px solid var(--accent-colour);
border-top-left-radius:20px;
border-top-right-radius:20px;
*/
}



nav a:visited
{
  color: var(--vlink-colour);
  -o-transition:.7s;
  -ms-transition:.7s;
  -moz-transition:.7s;
  -webkit-transition:.7s;
  /* ...and now for the proper property */
  transition:.7s;

}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 0;
    display: flex; /* Display list items horizontally */
    flex-wrap: wrap; /* Enable word wrap when needed */
    align-items: center;
    justify-content: center;
    line-height:0em;
}

nav li {
  padding: 0;
  border: 0;
  margin-right: 1em; /* Add spacing between links */
}

nav a:link {
    text-decoration: underline;
    color: var(--text-colour);
    padding: 0;
    border: 0;
    margin: 0;
    display: inline-block;
    -o-transition:.7s;
    -ms-transition:.7s;
    -moz-transition:.7s;
    -webkit-transition:.7s;
    /* ...and now for the proper property */
    transition:.7s;

}

.navbutton
{
  font-size:1.5em;
  text-decoration: none;
}

nav a:hover, a:active
{
  background-color: var(--accent-colour);
  color: var(--accent-dark);
}




/**************
IMG
***************/
img {
	width: clamp(300px,100%,800px); /* ideally use 100% of image which is 800px, no more than 800px, resize lower as screen changes down to 300px minimum */
	max-height: 100%;
    height: auto;
    margin:0 auto;
    display: block;
    object-fit: contain;
    font-style: italic;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
}

/****************
BLOCKQUOTE
*****************/

blockquote p 
{
  color: var(--accent-light);
}

blockquote {
    font-size: 1em;
    width:80%;
    margin:.5em auto;
    font-family:Open Sans;
    font-style:italic;
    color: var(--text-colour);
    padding:1.2em 30px 1.2em 75px;
    border-left:8px solid var(--accent-colour);;
    line-height:1.4;
    position: relative;
    background: var(--alpha-dark);
  }
  
  blockquote::before{
    font-family:Arial;
    content: "\201C";
    color: var(--accent-colour);
    font-size:4em;
    position: absolute;
    left: 10px;
    top:-10px;
  }
  
  blockquote::after{
    content: '';
  }
  
  blockquote span{
    display:block;
    color: var(--text-colour);
    font-style: normal;
    font-weight: bold;
    margin-top:1em;
  }

/************************************** 
banner classes
**************************************/

  
.banner
{
/* top: A Place to Bury Thoughts */
font-size:4em;
font-weight: bold;
color: var(--text-colour);
font-family: 'Special Elite', cursive;
background: none;
text-decoration:none;
padding: 0;
border: 0;
margin: 0;
display: inline-block;
-o-transition:.7s;
-ms-transition:.7s;
-moz-transition:.7s;
-webkit-transition:.7s;
/* ...and now for the proper property */
transition:.7s;
text-stroke: 1px #6600ff; 
-webkit-text-stroke: 1px #6600ff;
} 

.banner:hover,.banner:visited, .banner:active
{
  color: #000;
  background-color: none;
  text-decoration: none;
  text-stroke: 1px #ffffff; 
  -webkit-text-stroke: 1px #ffffff;
}





/****************************************************** 
formatting for the blog search input field 
******************************************************/

.bsearch
{
  border: 2px solid var(--accent-colour);
  margin: 1em;
  padding: 0.25em;
  font-size: 1.25em;
  color: var(--accent-dark);
  background-color: var(--alpha-light);
  text-decoration: none;
}



  /* 
************************************************************************************************
created ids 
************************************************************************************************
*/


#rndPost
{
    background-color: rgba(40,0, 100, 0.9);  
    font-weight: bold;
    letter-spacing: 1px;
}
    
#rndPost:hover 
{
      background-color: rgba(255,255, 255, 0.7);  
      font-weight: bold;
      letter-spacing: 1px;
}


/************************************** 
creates the main container 
**************************************/

.container
{
display: flex;
flex-direction: column;
gap: 0;
padding: 0.5em 0;
width:70%;
margin: 2em auto;
background-color: var(--bg-colour);
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border: 1px solid #6600ff;
}


/************************************** 
format of the content WITHIN the container
**************************************/
.content
{
  display: flex;
  flex-direction: column;
  gap: 0;
  width:100%;
  margin:0 auto;
 padding-left: 1em;
 padding-right: 1em;
 padding-top: 2em;
 padding-bottom:0em;
 font-size: 1em;
 line-height: 1.5em;
}

/************************************** 
comment classes
**************************************/

.formItem
{
padding:1em;
margin:1em;
border: 1px solid #6600ff;
font-family: 'Rubik', 'Open Sans', sans-serif;
font-optical-sizing: auto;
font-style: normal;
background-color: #c0c0c0;
color:#000000;
}

.textEdit
{
padding:1em;
margin:1em;
border: 1px solid #6600ff;
font-family: 'Rubik', 'Open Sans', sans-serif;
font-optical-sizing: auto;
font-style: normal;
background-color: #c0c0c0;
color:#000000;
width:90%;
}


.commentButton
{
  padding:1em;
  margin:1em;
  border: 2px solid #ffffff;
  font-family: 'Rubik', 'Open Sans', sans-serif;
font-optical-sizing: auto;
font-style: normal;
background-color: #6600ff;
color:white;
font-weight: bold;
}



/************************************** 
centered text 
**************************************/
.ctext
{
	text-align: center;
	margin: 0;
	font-weight: bold;
	font-size: 1.25em;
	padding: 0;
	width:100%;
	display: block;
}

/************************************** 
purple text 
**************************************/
.ptext
{
  color: var(--accent-colour);
  font-weight: bold;
}


/************************************** 
posts
**************************************/
.posts
{

    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the links horizontally */
}



/******************************************************
caption 
******************************************************/

.caption
{
font-size:1em;
margin:1em auto 1.5em auto;
font-family: 'Oswald', sans-serif;
border-bottom: 2px dashed var(--text-colour);
text-align: center;
display: block; 
padding:0.5em;
width: clamp(76%, 800px, 76%); 
color: var(--text-colour);
background-color: var(--alpha-gray);
}

/************************************** 
title image
**************************************/
.titleimg
{
text-align: center;
display: block; 	
margin: 1em auto;
padding:0.5em;
border: 1px solid var(--text-colour);
/* clamp : The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. */
width: clamp(76%, 800px, 76%); 
height: auto;
}


/************************************** 
custom li emoji 
**************************************/
ul li::marker
{
  content: '🔹';
  font-size:1em;
}


.meta
{
font-size:0.75em;
margin:0 auto;
text-align: center;
display: block; 
padding:.5em;
width:50%;
font-weight: bold;
}

/************************************** 
blog entry title
**************************************/


.entrytitle 
{
font-family: 'Freeman', 'Bebas Neue', sans-serif;
font-size:4em;
font-weight: bold;
text-align: center;
display: block; 
padding:.5em;
color: var(--text-colour);
margin:.10em;
padding: 0;
text-stroke: 0.5px #6600ff; -webkit-text-stroke: 0.5px #6600ff;
} 


/************************************** 
update h6 text
**************************************/
h6, .update
{
font-family: 'Freeman', 'Bebas Neue', sans-serif;
font-size: 2em;
animation: textclip 5s linear infinite;
display: inline-block;
border:0.5px;
color: #fff;
margin: 0;
padding-top:0.5em;
padding-bottom:0.5em;
padding-left:0.25em;
padding-right:0;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 2px;
line-height:1.2;
text-align: center;;
}

/*
h6::after, .update::after {
  content: ':';
}
*/

/*
h6::before, .update::before {
  content: '📝 ';
}
*/

@keyframes textclip {
  0%   {background-color:#ffffff;text-stroke: 0.5px #000000; -webkit-text-stroke: 0.5px #000000;}
  20%  {background-color:#c0c0c0;text-stroke: 0.5px #333333; -webkit-text-stroke: 0.5px #333333;}
  40%  {background-color:#6600ff;text-stroke: 0.5px #ffffff; -webkit-text-stroke: 0.5px #ffffff;}
  60%  {background-color:#6495ED;text-stroke: 0.5px #c0c0c0; -webkit-text-stroke: 0.5px #c0c0c0;}
  80% {background-color:#483D8B; text-stroke: 0.5px #333333; -webkit-text-stroke: 0.5px #333333;}
  100%   {background-color:#ffffff;text-stroke:0.5px #000000;-webkit-text-stroke: 0.5px #000000;}
}

.cssStyle
{
    font-family: 'Bebas Neue', sans-serif;
    padding:5px;
    margin:5px;
    border: 1px solid var(--vlink-colour);
    background-color: var(--bg-colour);
    color: var(--vlink-colour);
}


/*************************************
LIGHT MODE
************************************/

.bodyLight
{
    background-image: url('../img/23light01.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: none;
    /* margin:0;
    padding:0; */
    color: var(--accent-dark);
}

.bodyLight .entrytitle 
{
  color: var(--accent-light);
} 


/*************************************
NAV LIGHT MODE
************************************/

.navLight
{
  color: var(--accent-dark);
  background-color: none;
}

.navLight p
{
  color: var(--accent-dark);
}

.navLight a:link, a:hover, a:active, a:visited
{
  color: var(--accent-dark);   
}

.navLight .ctext
{
  color: var(--accent-dark);
}



/*************************************
MAIN LIGHT MODE
************************************/

.mainLight
{
  background-color: none;
    color: var(--accent-dark);
}

.mainLight p 
{
  color: var(--accent-dark);
}

.mainLight .entrytitle
{
  color: var(--accent-dark);
}

.mainLight
{
  color: var(--accent-dark);
}

.mainLight .caption
{
    color: var(--accent-dark);
    background-color: var(--alpha-light);    
}

.mainLight footer
{
  color: var(--accent-dark);
}

/*************************************
HEADER LIGHT MODE
************************************/
.headerLight 
{
  color: var(--accent-dark);
}


/*************************************
for mobile 
************************************/

/* 981px and above break */

@media only screen and (min-width: 981px) {
  img {
    width: 100%; /* ideally use 100% of image which is 800px, no more than 800px, resize lower as screen changes down to 300px minimum */
    max-height: 100%;
      height: auto;
      margin:1em auto;
      display: block;
  }

}

/* 980px to 741px  break */

@media only screen and (max-width: 980px) {
    img {
      width: 100%; /* ideally use 100% of image which is 800px, no more than 800px, resize lower as screen changes down to 300px minimum */
      max-height: 100%;
        height: auto;
        margin:1em auto;
        display: block;
    }
  
  .banner 
  {
  margin-top: 1em;
  font-size:3em;
  font-family: 'Special Elite', cursive;
  } 
  
  }
  
  /* 740px break */
  
  @media only screen and (max-width: 740px) {
  .banner 
  {
  margin-top: .75em;
  font-size:2em;
  font-family: 'Special Elite', cursive;
  text-decoration: none;
  } 
  .entrytitle
  {
    font-size:2em;
    padding-left:0.20em;
    padding-right:0.20em;
  }
  .container
  {
    margin:0.1em;
    width:100%;
    margin-bottom: 2em;
 }
 .titleimg
 {
  width:80%;
 }

  }