@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
}

body {
  color: #F9F9F9;
  background-color: #9b2468;
  font: normal 1em/2em 'Lato', monospace, sans-serif;
}

h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

input {
  border: 0;
  outline: 0;
  color: #F9F9F9;
}

a {
  color: #F9F9F9;
  text-decoration: none;
}

.full-height {
  height: 100%;
}

.container {
  width: 100%;
  padding: 0 10px;
  margin-left: auto;
  margin-right: auto;
}

.search-container {
  max-width: 480px;
}

.results-container {
  max-width: 780px;
  position: relative;
}

.search {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDQTFGRUQ1NkRCMTRFMTExQkUwOEE4MkM1RDIzMTk5QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGODY4QTQyNDc0REMxMUUxOTQ3N0UzN0ZFQTUwRjI1NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGODY4QTQyMzc0REMxMUUxOTQ3N0UzN0ZFQTUwRjI1NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNENGNUQ3OEI3NzRFMTExQTA0NTkyQzc5MTI5M0JDQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQTFGRUQ1NkRCMTRFMTExQkUwOEE4MkM1RDIzMTk5QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiBRIyoAAAAiSURBVHjaYvT19d1mZGS0gwEImECMc+fOeYA5IAImABBgAMbvCvEJBYXbAAAAAElFTkSuQmCC') 0% 0%/auto padding-box border-box, url('https://res.cloudinary.com/dtaq6qzm1/image/upload/v1464700725/colorfull_bg_bmmgly.jpg') no-repeat top center/cover padding-box border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-bottom: 10px inset rgba(155, 36, 104, 1);
}

.search-form {
  display: flex;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  margin: 1em 0;
  padding: 5px;
  padding-left: 10px;
}

#search-field {
  width: 74%;
  padding: 5px 0px;
  margin-right: 1%;
  color: rgba(51, 51, 51, 1);
}

#search-btn {
  width: 25%;
  background-color: rgba(155, 36, 104, 0.9);
  border-radius: 3px;
}

#search-btn:hover,
#search-btn:active,
#search-btn:focus {
  background-color: rgba(155, 36, 104, 1);
}

.search-head,
.random-article {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

.results {
  padding-bottom: 10px;
  background-color: rgba(155, 36, 104, 1);
  display: none;
}

.results-header {
  background-color: rgba(130, 28, 86, 1);
  padding: 10px 0px;
  margin-bottom: 10px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.results-head {
  font-size: 1.6em;
}

.results-list {
  list-style: none;
}

.results-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px;
  transition: all .3s;
}

.results-item:hover {
  background-color: rgba(249, 249, 249, 1);
}

.results-item:hover h2,
.results-item:hover p {
  color: rgba(155, 36, 104, 1);
}

.results-close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0.5em;
  top: 0;
  overflow: hidden;
  cursor: pointer;
}

.results-close::before {
  content: ' ';
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  border-radius: 3px;
  opacity: 0.2;
  background-color: #F9F9F9;
  transform: rotate(45deg);
}

.results-close::after {
  content: ' ';
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  border-radius: 3px;
  opacity: 0.2;
  background-color: #F9F9F9;
  transform: rotate(-45deg);
}

.results-close:hover.results-close::before {
  opacity: 1;
}

.results-close:hover.results-close::after {
  opacity: 1;
}

.error {
  text-align: center;
}

@media screen and (min-width: 780px) {
  html {
    font-size: 16px;
  }
  .search-head {
    font-size: 1.8em;
  }
}