@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow');
@import url('https://fonts.googleapis.com/css?family=Staatliches');

body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
nav, header {
  color: rgb(255, 255, 255);
  -webkit-box-shadow: 3px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 0px 5px 0px rgba(0,0,0,0.75);
  /* background-color: rgb(56, 223, 125) !important; */
  background-color: hsl(108, 66%, 40%) !important;
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/* middle font and text */
.material-icons.md-middle {
  vertical-align: middle;
  padding-bottom: 3px;
}
body {
  background-color: #1f1f1b;
  color: white;
}

hr {
  width:50px;
  border:5px solid rgb(42, 214, 56)
}

#render h2 {
  margin-left: 0.5em;
}
#render hr {
  margin-left: 0.8em;
}
#gallery {
  margin-left: 0.4em;
}
#galeria {
  display: block;
  border: 1px solid white;
  padding: 0.2em;
}

#galeria h2 {
  font-family: 'Poppins', sans-serif;
  margin: 0.6em;
  font-weight: bold;
  text-decoration: lavender;
  font-size: 1.2em;
}

#galeria hr {
  margin: 0.4em 0.8em 1em 1em;
  width: 75px;
  border: 3px solid rgb(42, 214, 56);
  display: block;
  border-radius: 3px;
}

#galeria img {
  border: 1px solid white;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.flexbox .column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.flexbox .column-3 {
  flex: 33.33333%;
  max-width: 33.33333%;
  padding: 0 4px;
}

.column img, .column-3 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

footer {
  width: 100%;
  padding: 2px;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .flexbox .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .flexbox .column, .flexbox .column-3 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}