html, body {
  height:100%;
  width:100%;
}

body {
  background: rgb(37, 55, 80);
}

a {
  color:black;
  text-decoration:none;
}

ul{
  width: 100%;
  list-style: none;
  padding:0;
}

h6 {
  color:white;
  font-weight: 400;
}

li {
  background-color: rgb(185, 185, 185);
  color: black;
  border-radius: 3px;
  padding: 4px;
  margin: 5px auto;
  width: 100%;
}

a:hover {
  color:brown;
  text-decoration:none;
}

.random {
  color: white;
}

.row.justify-content-center{
  height: 100%;
  min-height: 100%;
}

.align-items-center {
  height: 100%;
  min-height: 100%;
}

.outer-special {
  padding: 20%;
  transition: linear .8s;
}

.special {
  margin: auto;
  /* width: 100px; */
  /* height: 100px; */
}

#articleList {
  margin-top: 50px;
}

#searchBox {
  background:none;
  border: none;
  color:orange;
}

#searchBox:focus {
  outline:none;
  margin-top: 3px;
}

.magnifying-glass:focus-within {
  transform: rotate(360deg);
  width: 200px;
}

.magnifying-glass{
  border-radius: 20px;
  background: rgb(37, 55, 80);
  border: 4px solid orange;
  height: 40px;
  position:absolute;
  padding-left: 10px;
  text-align: left;
  color: orange;
  width: 40px;
  transition: 0.2s;
  opacity: 1;
}

.magnifying-glass::after {
  content:"";
  display:block;
	width: 20px;
	height: 4px;
	position: absolute;
	top:35px;
	left:26px;
	background: orange;
	transform: rotate(45deg);
  opacity: 2;
  transition: .2s linear;
}

.clicked::after {
   width: 0px;
}