@import url('https://fonts.googleapis.com/css2?family=Share+Tech&family=Silkscreen:wght@400;700&display=swap');
@font-face {
    font-family: "Dead Stock Demo";
    src: url("/fonts/DeadStockDemo.ttf") format("truetype"); /*Font from: https://www.dafont.com/dead-stock.font*/
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/*The above is for loading a set of fonts for the website.*/
/* FOR THE GREATER GLORY OF GOD */
/* +JMJ+ */
/* BLKBK, if you're reading this, I really like the Dead Stock font, and I am not making any money from this. I hope you don't mind my using the demo version for this website...*/
/* --- */
/*The following are my website's colors. I generated a color palette using 
https://color.adobe.com/create/image and https://www.realtimecolors.com/. */
/* :root {
  --text: #f5edf7;
  --background: #021d40;
  --primary: #8c0303;
  --secondary: #2940c7;
  --accent: #1cb9ca;
} */
 /*This version of the palette allows me to move up and down on the gradient depending on the situation, 
 while maintaining the names of the five basic categories of the palette. I only need to adjust the number next to it.
 (ie. text-50 --> text-400*/
:root {
--text-50: #f5edf7;
--text-100: #ebdcef;
--text-200: #d8b9df;
--text-300: #c495d0;
--text-400: #b072c0;
--text-500: #9d4fb0;
--text-600: #7d3f8d;
--text-700: #5e2f6a;
--text-800: #3f2046;
--text-900: #1f1023;
--text-950: #100812;

--background-50: #e6f1fe;
--background-100: #cee2fd;
--background-200: #9cc6fc;
--background-300: #6ba9fa;
--background-400: #398cf9;
--background-500: #0870f7;
--background-600: #0659c6;
--background-700: #054394;
--background-800: #032d63;
--background-900: #021631;
--background-950: #010b19;

--primary-50: #fee6e6;
--primary-100: #fecdcd;
--primary-200: #fd9b9b;
--primary-300: #fc6969;
--primary-400: #fb3737;
--primary-500: #fa0505;
--primary-600: #c80404;
--primary-700: #960303;
--primary-800: #640202;
--primary-900: #320101;
--primary-950: #190101;

--secondary-50: #eaecfb;
--secondary-100: #d5daf6;
--secondary-200: #aab4ee;
--secondary-300: #808fe5;
--secondary-400: #566adc;
--secondary-500: #2b45d4;
--secondary-600: #2337a9;
--secondary-700: #1a297f;
--secondary-800: #111b55;
--secondary-900: #090e2a;
--secondary-950: #040715;

--accent-50: #e9fafc;
--accent-100: #d2f5f9;
--accent-200: #a5ebf3;
--accent-300: #78e1ed;
--accent-400: #4bd7e7;
--accent-500: #1fcde0;
--accent-600: #18a4b4;
--accent-700: #127b87;
--accent-800: #0c525a;
--accent-900: #06292d;
--accent-950: #031516;

--special-link-hover: palegoldenrod; /*Added mainly for the sidebar and the "Back to top" navigation links.*/
}

html,
body {
    min-height: 100%;
}

html {font-size: 112.5%;} /* 18px */

body {
  font-family: "Share Tech", Arial, monospace;
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("/images/nightsky.jpeg")
    center / cover
    no-repeat
    fixed;
  color: var(--text-100);
  /* background-image: url("/images/nightsky.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; */
}

h2, h3, h4, h5 {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  text-shadow: -4px 5px 0 rgb(0 0 0 / 50%);
}

img {
    border: 2px solid var(--secondary-500);
}

h1 {
  font-family: "Dead Stock Demo", "Silkscreen", sans-serif;
  font-size: 6rem;
  color: var(--primary-600);
  text-align: center;
  margin: 0 auto;
  text-shadow: -10px 10px 0 rgb(0 0 0 / 50%);
}

h1:hover {
        text-shadow:
        -4px 0 0 rgb(200 4 4 / 60%),
        4px 0 0 rgb(200 4 4 / 60%),
        -10px 10px 0 rgb(0 0 0 / 50%);
      }

h2 {
  font-size: 3.158rem;
  text-align: center;
  text-decoration: underline;
  color: var(--secondary-500);
  margin: 10px auto;
}

h3 {
  font-size: 2.369rem;
  text-align: center;
}

h4 {
  font-size: 1.777rem;
  text-align: center;
  margin: 0 auto;
}

h5 {font-size: 1.333rem;}

small {font-size: 0.750rem;}

/*Keep linked headings other than <h1> looking like normal.*/
.heading-link,
.heading-link:visited,
.heading-link:hover {
        color: inherit;
        text-decoration: none;
      }
/* --- */
/*This modifies the appearance of most links.*/
a {color: var(--accent-500);}
a:hover {color: var(--accent-100);}
a:visited {color:var(--primary-300);}
a:visited:hover {color:var(--accent-50);}
/* --- */
/*This is for the website's layout. I'm using a grid.*/
.page-grid {
        display: grid;
        grid-template-areas:
        ". header ."
        "sidebar main-content ."
        ". footer .";
        grid-template-columns: 1fr 800px 1fr;
        gap: 20px;
      }

.page-grid div {
        padding: 10px;
        /*border: 5px dashed green;*/ /*Added this for use when editing the website so that I can better visualize the grid box layout.*/
      }

.page-grid div.header {
        grid-area: header;
        text-align: center;
        padding: 0;
      }
/*I set this up so that the website's header would be clickable and would lead to the homepage, all without looking like a typical hyperlink.*/
.page-grid div.header h1 a, div.header h1 a:visited, div.header h1 a:hover {
        color: inherit;
        text-decoration: none;
      }

.page-grid div.main-content {
        grid-area: main-content;
        /*text-align: justify;*/
        padding: 0 50px;
      }

.page-grid div.sidebar {
  grid-area: sidebar;
  font-family: 'Silkscreen';
  text-align: center;
  justify-self: end;
  padding-top: 50px;
  max-width: 167px;
}

.page-grid div.sidebar a {
  display: inline-block;
  text-decoration: none;
  color: var(--primary-500);
  text-shadow: -2px 3px 0 rgba(152, 148, 148, 0.5);

  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.7s ease;
}

.page-grid div.sidebar a:hover {
  color: var(--special-link-hover);
  text-decoration: none;

  transform: translateY(-5px);
  text-shadow:
    -2px 8px 4px rgba(152, 148, 148, 0.35);
}

.page-grid div.footer {
        grid-area: footer;
        text-align: center;
        text-shadow: -1.5px 1px 0 rgb(152, 148, 148);
      }

.page-grid div.footer a {text-decoration: none; color:var(--primary-500)}

.page-grid div.footer a:hover {color:var(--special-link-hover);}

p.back-to-top {
    text-align: center;
    color: var(--primary-500);
}
.back-to-top a {
    text-decoration: none;
    color: inherit;
}
.back-to-top a:hover {color:var(--special-link-hover);}
/* --- */
/* The following is meant for changing any specified word ("before" word)
into another word ("after" word) when the cursor is hovered over it.
I use a <span> tag with the `magic-word` class to wrap both the "before" and "after" words,
which are also each wrapped in their respective `before` class and `after` class <span> tags.
Check out the webpage's HTML to see how it was set up.
Long story short: `magic-word`, `before`, and `after` are all classes that function together for this purpose. */

.magic-word {
        color: crimson;
        /* background-color: transparent; */
      }

/* This makes it so that the "after" word doesn't appear by default. */
.magic-word .after {
        display: none;
        padding: 0 5px;
      }

/* This style will be applied to the "after" word. */
.magic-word:hover {
        color: ghostwhite;
        background-color: maroon;
      }

/* Next, when hovering over the "before" word, it will instantly disappear... */
.magic-word:hover .before {
        display: none;
      }

/* ... and in its place, the "after" word will appear (and in bold). */
.magic-word:hover .after {
        display: inline;
        font-weight: bold;
      }
/* --- */
/*To make some text behave look and behave like the website title does.*/
.cool-word {
  font-family: "Dead Stock Demo";
}
.cool-word:hover {
  text-shadow:
    -1px 0 0 rgb(248 248 255 / 50%),
     1px 0 0 rgb(248 248 255 / 50%);
}
/* --- */
/*The `text-box` class will create a translucent box to contain text and make it more legible.*/
div.text-box {
        background-color: rgba(26, 25, 25, 0.497);
        /* border: 3px solid cornflowerblue; */
        border: 3px solid var(--secondary-500);
        border-radius: 15px;
        margin: 15px 0 25px 0;
        padding: 10px 20px 0px 0;
        box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.884);
      }
div.text-box h4 {margin:5px 0 0 20px;}
div.text-box--blog {padding: 10px 20px 10px 20px;} /*Slight modification of the box for use in the site's Blog index section.*/
div.text-box--other {padding: 10px 30px 10px 30px;} /*Modification, for use in other areas.*/