:root {
  --accent-color: #CA3342; /*headings, link hovers*/
  --link-color: #e3a1a1; /*links*/
  --link-hover-color: #CA3342; 
  --font-color: #dadada; /*main font color*/
  --light-font-color: #969394; /*alt font color*/
  --bold-color: #FFFFFF; 
  --background-color: #323232;
  --light-background-color: #424242; /*for containerized backgrounds*/
  --contrast-font-color: #dadada;
  --link-underline: none;
}

/*themes https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8 */
[data-theme="dark"] {
  --accent-color: #CA3342; /*headings, link hovers*/
  --link-color: #e3a1a1; /*links*/
  --link-hover-color: #CA3342; 
  --font-color: #d4d4d4; /*main font color*/
  --light-font-color: #9f9f9f; /*alt font color*/
  --bold-color: #FFFFFF; 
  --background-color: #121212;
  --light-background-color: #303030; /*for containerized backgrounds*/
  --contrast-font-color: #9f9f9f;
  --link-underline: none;
}

[data-theme="light"] {
  --accent-color: #CA3342; /*headings, link hovers*/
  --link-color: #000000; /*links*/
  --link-hover-color: #CA3342; 
  --font-color: #333333; /*main font color*/
  --light-font-color: #919191; /*alt font color*/
  --bold-color: #000;
  --background-color: #fefefe;
  --light-background-color: #f5f5f7; /*for containerized backgrounds*/
  --contrast-font-color: #d65c68;
  --link-underline: underline;
  --special-icon-color: var(--icon-color);
}

[data-theme="classic"] {
  --accent-color: #CA3342; /*headings, link hovers*/
  --link-color: #e3a1a1; /*links*/
  --link-hover-color: #CA3342; 
  --font-color: #dadada; /*main font color*/
  --light-font-color: #969394; /*alt font color*/
  --bold-color: #FFFFFF; 
  --background-color: #323232;
  --light-background-color: #424242; /*for containerized backgrounds*/
  --contrast-font-color: #dadada;
  --link-underline: none;
}

body {
  background-color: var(--background-color);
  color: var(--font-color);
  font-size: 18px;
  margin: 0 auto;
  
  /*width: 100%;
  overflow-x:hidden;
  max-width: 100%;
  overflow-wrap: break-word;*/
}

a, a:link, a:active {
  text-decoration: var(--link-underline);
  color: var(--link-color);
}
a:hover {
  color: var(--accent-color);
  /*text-decoration: underline;*/
}

/*Screen width*/
img {
  max-width: 100%
}

#nav_menu a {
  color: var(--contrast-font-color);
}

#nav_menu a:hover {
  color: tomato;
}

.panel {
  /*margin: 0px 10px 0px 10px;*/
}

#title_image {
    /*height:20px;
    max-width:66%;*/
    max-height:30px;
    max-width:66%;
    display: block;
    margin: 0 auto;
    cursor:pointer;
    position:relative;
    left:10px;
}

main {
    width:100%;
    overflow-x: hidden;
    margin: 0 auto;
}

#home_logo {
  margin-bottom: 20px;
}

/* OLD STUFF TO GET THIS TO WORK
*
*
*
*
*/
blockquote {
  margin-left: 15px;
  margin-right: 15px;
  border-left: 3px solid var(--light-background-color);
  padding-left: 10px;
  display: block;
}

tr, td {
  border: 1px solid;
  padding: 5px;
}

table {
  margin-bottom: 15px;
  display:block;
  margin: 0 auto;
  overflow-x:scroll;
  white-space: nowrap;
  /*width: 100%;
  overflow:auto;*/
}

p {
  font-color: var(--font-color);
  overflow-wrap: break-word;
}

pre {
  color: var(--font-color);
  background-color: var(--light-background-color);
  width: 100%;
  overflow:scroll;
  /*width: 100%;
  overflow-x:hidden;
  max-width: 100%;*/
}

code {
  background-color: var(--light-background-color);
}

b, strong {
  color: var(--bold-color);
  font-weight: 900;
}

li {
  overflow-wrap: break-word;
}

/* Social Icons */
.social {
  display: block;
  margin: 20px 0;
}
.social ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.social ul li {
  display: inline-block;
  padding: 0px 7px 0px 7px;
}
.social ul li i {
  color: var(--light-font-color);
}
.social li a {
  font-size: 30px;
}
.social li {
  font-size: 30px;
}
.social li a:hover {
  color: var(--accent-color);
}
a i:hover {
  color: var(--accent-color);
}
.social ul li a i:hover {
  color: var(--accent-color);
}
a i {
  color: var(--light-icon-color);
}
#chevron:hover {
  color: var(--accent-color);
}
.poem {
  background: var(--light-background-color);
}

/*colors*/
.altcolor {
  color: var(--light-font-color);
}
.primarycolor {
  color: var(--accent-color);
}
.secondarycolor {
  color: var(--light-font-color);
}
.fontcolor {
  color: var(--font-color);
}
.primarybg {
  background-color: var(--background-color);
}
.secondarybg {
  background-color: var(--light-background-color);
}
.borderprimary {
  border-color: var(--accent-color);
}
.icon-color {
  color: var(--light-font-color);
}
.link-color {
  color: var(--link-color);
  text-decoration: var(--link-underline);
}

/*CONTAIN BOX!!*/
.containbox {
  padding: 10px 15px 10px 15px;
  background-color:var(--light-background-color); 
  margin-left: 5px; 
  margin-right: 5px; 
  border-radius: 15px;
  width: fit-content;
}
.reddiv {
  border-color: var(--accent-color);
  background-color: var(--light-background-color);
}

/*stuff*/
.pageheader {
  margin-bottom: 20px;
  text-align: center;
  margin-top: -20px;
}

.full-size{
  height:100%;
  width:100%;
  overflow:hidden;
}

.hidden {
  display: none!important;
  visibility: hidden!important;
}

#particles-js {
  position : fixed;
  width:100%;
  height:100%;
  z-index:-1;
  margin:0;
  padding:0;
  top:0;
}

hr {
  margin-top: 30px;
  margin-bottom: 30px;
  border: 0;
  border-top: 1px solid var(--accent-color);
  border-bottom: 1px solid var(--accent-color);
}

small {
  color: var(--light-font-color);
}

span.time, span.categories {
  color: var(--light-font-color);
  margin-bottom: 12px;
}
span.timex {
  color: var(--light-color);
  margin-bottom: 7px;
  font-size: 12px;
}
span.hov:hover {
  color: var(--accent-color);
}
span.red {
  color: var(--accent-color);
  font-weight: 900;
}

h1, h2, h3 {
  color: var(--accent-color);
  font-weight: normal;
  margin-top: 10px;
}
h1 {
  margin-bottom: 10px;
  font-size: 30px;
}
h1.post-title {
  margin-bottom: 10px;
  font-size: 40px;
}
h1.author-name:hover {
  color: var(--accent-color);
}
h2 {
  font-size: 25px;
}
h3 {
  font-size: 20px;
}
h2, h3 {
  margin-bottom: 5px;
}
h4, h5, h6 {
  margin-top: 35px;
}

/*
a, a:link, a:active {
  text-decoration: var(--link-underline);
  color: var(--link-color);
}
a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
*/

/*Statboard*/
a.stealth, a.stealth:link, a.stealth:active {
  text-decoration: none;
}
a.stealth:hover {
  text-decoration: var(--link-underline);
  color: var(--link-color);
}
.data {
  color: var(--font-color);
}
.box {
  border-color: var(--light-font-color);
  background: var(--light-background-color);
}
div.box:hover {
  border-color: var(--accent-color);
}
/*
*
*
*
*
*
*/

/* GRID!!! */

.container {
    display: grid;
    width: 100%;
    padding-right: 1px;
    padding-left: 1px;
    min-height: 100vh; /*Keep footer on the bottom of the page*/
  
    grid-template-areas:
      "heading heading heading"
      "nav content aside"
      "footer footer footer";
  
    grid-template-columns: 250px 1fr 250px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
  
    /*height: 100vh;*/
  }

  .container_item {
    /* border: 1px solid #000000  /* for checking grid borders */
  }

  heading {
    grid-area: heading;

    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-top:20px;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
  }
  
  nav {
    grid-area: nav;
  }
  
  main {
    grid-area: content;
    padding: 0px 25px 0px 25px;
    /*justify-items: center;
    max-width: 2000px;*/
  }
  
  aside {
    grid-area: aside;
  }
  
  footer {
    grid-area: footer;
    margin-top: 20px;
    margin-bottom: 20px;
    
  }

  #hamburger {
    display:none;
  }

  /* TABLET */
  /*
  @media (max-width: 1024px) { 
    .container {

      width:95%;

      grid-template-areas:
        "heading heading heading"
        "nav content content"
        "footer footer footer";

      grid-template-columns: 200px 1fr 1fr;
      grid-template-rows: auto 1fr auto;
      
    }
  
    nav, aside {
      margin: 0;
    }

    aside {
        display:none;
    }
  }
*/

  @media (max-width: 1280px) { /* mobile-lg */
    .container {
      /* grid-template-areas:
        "heading"
        "nav"
        "content"
        "aside"
        "footer"; */
    
      grid-template-areas:
        "heading"
        "content"
        "footer";
  
      grid-template-columns: 1fr;
      grid-template-rows:
        auto /* Heading */
        1fr /* Content */
        auto; /* Footer */
    }

    main {
      padding: 0px 5px 0px 5px;
      width:90%;
    }
  
    nav, aside {
      margin: 0;
      display:none;
    }

    heading {
      margin-left:10px;
      margin-right:10px;
    }

    #hamburger {
      display:block;
    }
    
  }

  @media (max-width: 768px) {
    body {
      font-size: 17px;
      -webkit-text-size-adjust: 100%;
    }
    main {
      padding: 0px 5px 0px 5px;
      width:95%;
    }
  }