body {
  font-family: Arial, sans-serif;
}

nav {
  display: flex;
  justify-content: flex-end;
}

.navlist {
  display: flex;
  width: auto;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  list-style-type: none;
}

li {
  margin: 20px;
  cursor: pointer;
}

li:hover {
  border-radius: 5px;
}

li:active {
  border: 1px solid blue;
}

.popups {
  border-radius: 5px;
  position: absolute;
  right: 49px;
  width: 340px;
}

.iconsarea {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid black;
  padding: 20px;
  background: #fff;
  margin-top: 50px;
  width: 100%;
  height: 220px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.iconsarea:target {
  overflow: scroll;
  height: 350px;
}

img.popimg {
  width: 50px;
  height: 100%;
  margin: 10px;
}

#show,
#popup {
  display: none;
}
#show:checked ~ #popup {
  display: block;
}

input:focus {
  border: 1px solid blue;
}

.innericons {
  display: flex;
  flex-direction: column;
  width: 90px;
  justify-content: center;
  align-items: center;
  height: 90px;
  padding: 10px;
}

a:focus {
  border: 1px solid blue;
}

a:link {
  text-decoration: none;
}

.innericons:hover {
  border: 1px solid gray;
}

.icondescr {
  margin-top: -5px;
}

.more {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  background-color: lightgray;
  height: 30px;
  border: 1px solid black;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#popupimage {
  top: 200px;
}