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

.header-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;

  background: #180128;
  border-bottom: 3px solid #eab512;
  cursor: pointer;
  text-decoration: inherit;
}

.header-text {
  position: absolute;
  top: 5px;
  width: 100%;

  color: #e0ddd5;
  text-align: center;
  font-size: 3.25em;
  font-weight: bold;
}

.main-content {
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  bottom: 60px;

  background: linear-gradient(#201659, #2e0f51, #1f0133);
}

.main-tile-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60px;
  right: 60px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 40px;
  overflow-y: auto;
}

.main-tiles {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(60, 1fr);
  row-gap: 20px;
  column-gap: 30px;
  justify-content: center;
}

.tile {
  height: 200px;
  padding: 8px;
  background-color: #e0ddd5;
  border-radius: 3px;
  transition: height 0.5s, margin 0.5s, padding 0.5s, border-radius 0.5s;

  display: grid;
  grid-auto-flow: row dense;
  row-gap: 0;
  justify-content: center;
  justify-items: center;

  color: #1f0133;
  font-size: 1.5em;
  cursor: pointer;
  text-decoration: inherit;
}

.tile:hover {
  margin: -4px;
  padding: 12px;
  border-radius: 4px;
}

.tile img {
  height: 120px;
}


.website-tile {
  height: 80px;
  grid-column-end: span 15;
  background-color: #e0ddd520;
}

.website-tile img {
  height: 80px;
}


.wtmsd-tile {
  grid-column-end: span 40;
}


.blog-tile {
  height: auto;
  grid-column-end: span 30;
  font-size: 2.5em;
}

.stories-tile {
  height: auto;
  grid-column-end: span 30;
  font-size: 2.5em;
}

.forum-tile {
  height: 150px;

  grid-auto-flow: column dense;
  grid-column-end: span 40;
  column-gap: 45px;
  align-content: center;
  align-items: center;

  font-size: 3em;
}

.story-info-tile {
  height: auto;

  grid-auto-flow: row dense;
  grid-column-end: span 30;
  row-gap: 18px;
  align-content: center;
  align-items: center;
  text-align: center;

  padding: 16px 24px;

  font-size: 1em;
}

.story-info-tile:hover {
  margin: -4px;
  padding: 20px 28px;
  border-radius: 4px;
}

.story-info-title {
  font-size: 2.15em;
}

.story-info-tags {
  font-size: 0.75em;
}



.search-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 16px;

  text-align: center;
  font-size: 1em;
}

#search-bar-container {
  position: absolute;
  top: 20px;
  left: 10%;
  right: 10%;
}

#search-bar {
  padding: 8px 12px;
  flex-basis: 50%;
  background-color: #e0ddd5;
  border-radius: 3px;
  border-style: none;

  text-align: inherit;
  font-size: inherit;
}

.search-button {
  padding: 8px 12px;
  background-color: #eab512;
  border-radius: 3px;
  border-style: none;
  cursor: pointer;
  color: inherit;
  text-decoration: inherit;
}

.search-option-container {
  display: flex;
  flex-flow: row wrap;
  row-gap: 20px;
  column-gap: 30px;
  justify-content: center;
  align-content: center;
}

.search-option-button {
  position: relative;
  padding: 8px 12px;
  background-color: #e0ddd5;
  border-radius: 3px;
  border-style: none;
  cursor: pointer;
  user-select: none;
}
.search-option-button:before {
  content: "\2A00  ";
}

.search-option-button.include-option {
  background-color: #2fb364;
}
.search-option-button.include-option:before {
  content: "\2A01  ";
}

.search-option-button.exclude-option {
  background-color: #cd3077;
}
.search-option-button.exclude-option:before {
  content: "\2A02  ";
}


.link-bar {
  position: absolute;
  bottom: 0;
  height: 60px;
  left: 0;
  right: 0;
  background-color: #1f0133;

  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(auto-fit, 1fr);
  column-gap: 30px;
  justify-items: center;
  justify-content: center;
}

.link a {
  color: #e0ddd5;
  text-decoration: none;

  font-size: 1.8em;
  transition: margin 0.5s, font-size 0.5s;
}

.link a:hover {
  margin: -1em;
  font-size: 1.9em;
}


.main-text {
  color: #e0ddd5;
  text-align: center;
  font-size: 1.3em;
  
  padding-left: 20%;
  padding-right: 20%;
}

.main-text a {
  color: #eab512;
  text-decoration: none;
}


#hover-info {
  display: none;
  position: absolute;
  top: 90%;
  min-width: 300px;
  padding: 0px 12px;
  border: 4px solid #180128;
  border-radius: 5px;
  background-color: #eab512;
  z-index: 1;
  user-select: none;
}