:root {
  --clr-text: #fff;
  /* https://colorcodes.io/gray/rich-gray-color-codes/ */
  --clr-bg-gray: #1F2022;
  --clr-bg-gray2: #15141A;
  --clr-bg-gray3: #5B5B66;
  --clr-btn-menu: #a1a1aa;
  /* --clr-link: #3e8e41; */
  --clr-link: #297952;
  --clr-h1: brown;
  --clr-h2: chocolate;

  /* Inter font: https://rsms.me/inter/ */
  --font-sans: 'Inter', sans-serif;
}

body {
  background-color: var(--clr-bg-gray);
  color: var(--clr-text);
  font-family: var(--font-sans);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

/* Don't style links to images */
a:not(.gallery a) {
  color: var(--clr-text);
  height: auto;
  width: auto;
  text-align: inherit;
  background-color: var(--clr-link);
  padding: 0.3em;
  border-radius: 0.3em;
  margin: 0.5em;
  -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.3);
  box-shadow: 0 1px 2px 1px rgba(0,0,0,.3);
}

a:active, a:hover {
  background-color: var(--clr-text);
  color: var(--clr-link);
}

/* TODO: Sort out button and colors */
/* div.btn-menu {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

div.btn-menu:active {
  background-color: var(--clr-link);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
div.btn-menu:hover {
  background-color: var(--clr-link)
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
} */

h1 {
  color:var(--clr-h1);
}

h2 {
  color:var(--clr-h2);
}

/*
 * Image gallery
 * SRC: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive
 */

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}