h1 {
  font-weight: 700;
}

ul, ol {
  list-style: none;
}

li {
  display:inline;
  margin-left:10px;
  margin-right:10px;
}
input {
  border: 2px solid var(--accent-background);
  border-radius: 3px;
  background-color: var(--dark-gray);
  color: var(--accent-text);
  margin-bottom:10px;
}

/* 3 collumns at large screen size */
.flexbox > div {
  width:28%;
  margin-left:1%;
  margin-right:1%;
  display:inline-block;
  padding-top: 0;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

}

/* 2 collumns at smaller screen size */
@media only screen and (max-width: 1000px) {
  .flexbox > div {
    width:45%;
  }
}

/* 1 collumn at small screen size */
@media only screen and (max-width: 650px) {
  .flexbox > div {
    width:100%;
  }
}

div.hidden {
  display: none;
}



div img {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;  
}

div.article {
  margin-bottom:30px;
}