/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
  --background: #2f3e2e;   /* Deep evergreen */
  --text: #f4f1ee;         /* Weathered parchment */
  --accent: #7b5e57;       /* Iron-rich soil / rust */
  --highlight: #a3b18a;    /* Mossy green */
  --link: #5c9ead;         /* Cool northern lake blue */
  --shadow: 9px 4px 4px rgba(0,0,0,0.6);
}

* {
  box-sizing: border-box;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #a3f2e1;
}

p {
  color: var(--text);
  text-shadow: 9px 4px 4px rgba(0,0,0,0.6);
  line-height: 1.6;
  letter-spacing: 0.3px;
}

h1 {
  color: var(--text);
  text-shadow: 9px 4px 4px rgba(0,0,0,0.6);
}

h2 {
  color: var(--text);
  text-shadow: 9px 4px 4px rgba(0,0,0,0.6);
}

h3 {
  color: var(--text);
  text-shadow: 9px 4px 4px rgba(0,0,0,0.6);
}

body {
  font-family: Arial;
  padding: 20px;
  /*background-color: #11170a;*/
  background-image: radial-gradient(farthest-corner at 5% 5%, #112110, black);
  text-shadow: text-shadow: 9px 4px 4px rgba(0,0,0,0.6);
}

/* Generic container to build columns */
.container {
  display: flex;
  justify-content: center;
  padding-left: 10%;
  padding-right: 10%;
}

/* Color box to fill with gradient before loading in other cards/elements */
.gradient-border {
  display: inline-block;
  padding: 5px;
  border-radius: 10px;
  width: 100%;
  margin-top: 10px;
  background-image: linear-gradient(to bottom right, var(--accent), black);
}

/* Header/Blog Title */
.header {
  font-size: 2em;
  text-align: center;
  background-image: radial-gradient(farthest-corner at 25% 50%, var(--background), #001000);
  /*border: 5px solid transparent;*/
  border-radius: 10px;
  padding: 5px;
  /*box-sizing: border-box;*/
  
}

/* Column stuff*/

.column-left {
  flex: 1;
}

.column-center {
  flex: 3;
  padding-left: 1rem; 
  padding-right: 1rem;
}

.column-right {
  flex: 1;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  /*background-color: var(--background);*/
  background-image: radial-gradient(farthest-corner at 25% 50%, var(--background), #001000);
  padding: 5px;
  /*margin-top: 20px;*/
  /*border: 5px solid var(--accent);*/
  border-radius: 10px;
}

/* Footer */
.footer {
  text-align: center;
  background: var(--background);
  margin-top: 20px;
  padding-left: 5rem;
  padding-right: 5rem;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-left, .column-right {
    display: none;
  }
  
  .container {
    padding-left: 1em;
    padding-right: 1em;
  }
  .column-center {
    flex: 1;
    padding: none;
  }
}