html {
  cursor: url("../img/asacoco.cur"), default;
  overflow-y: overlay;
}

main {
  font-size: 10pt;
}

ul {
  width: 520px;
}

li {
  word-wrap: break-word;
}

h2 {
  margin-top: 0;
  text-transform: uppercase !important;
}

body {
  font-family: "Comic Sans MS", Arial, cursive, sans-serif;
  background-color: whitesmoke;
  margin: auto;
}

.hide {
  display: none !important;
  pointer-events: none !important;
}
.hide * {
  display: none !important;
  pointer-events: none !important;
}

#main-container {
  padding-top: 1em;
  margin: auto;
  width: 90%;
}

.footer {
  margin-top: calc(2* 1em);
}

.standard-width {
  width: 520px;
}

.alert-icon {
  height: 128px;
  width: 128px;
  float: left;
  margin-right: 1em;
}

#alert-container {
  display: flex;
  margin-bottom: calc(2*1em);
}

#alert-title {
  margin: 0;
}

#alert-desc {
  max-width: calc(400px + 128px);
  margin-top: calc(1em/2);
}

#video-iframe {
  background-color: whitesmoke;
}

#video-content {
  max-width: 520px;
  height: 315px;
}

#video-background {
  background-color: black;
  z-index: -1;
  font-size: 10em;
  color: #fafb5e;
  width: 100%;
  height: 100%;
}

#video-question-mark {
  animation: anim-float 2s ease-in-out infinite alternate;
}

#list {
  display: block;
  width: 520px;
}

#tags {
  display: block;
  width: 520px;
}

.row {
  flex-direction: row;
  justify-content: center;
  width: 100%;
  display: flex;
  margin-bottom: 1em;
  flex-wrap: wrap;
}

.center-align, .center-align-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.center-align-title {
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  width: 85%;
}

.no-wrap {
  flex-wrap: nowrap;
}

.border-box {
  border: black 2px solid;
  box-sizing: border-box;
}

.buttons, .dropdowns, .inputs {
  background: #ff935f;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  text-align: center;
  height: 38px;
  line-height: 38px;
  font-weight: bold;
  border-radius: 4px;
  border: 2px solid black;
  width: calc(520px/3);
}

#search-button {
  width: calc(520px/4);
}

.inputs {
  border-radius: 0px;
  height: 48px !important;
  line-height: 48px !important;
}

.dropdowns {
  background-color: white;
}

.scrolling-bg {
  overflow: hidden;
  overflow-y: hidden;
  opacity: 0.1;
  z-index: -100;
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/tile_2.png");
  animation: anim-scroll 16s linear infinite;
}

#random-button {
  z-index: 5;
}

#random-button:hover {
  animation: anim-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
  transform: translate3d(0, 0, 0);
  background-image: url("../img/gata.png");
  background-color: white;
  perspective: 1000px;
}

#feedback-form {
  width: 100%;
}

#feedback-desc {
  width: 520px;
  height: calc(520px/1.5);
}

@keyframes anim-shake {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -16px -16px;
  }
  10%, 90% {
    transform: translate3d(-3px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(3px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-6px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(6px, 0, 0);
  }
}
@keyframes anim-scroll {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -256px -256px;
  }
}
@keyframes anim-float {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(15deg);
  }
}