* {
  margin: 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a {
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out;
}

a:visited {
  color: rgba(255, 255, 255, 0.8);
}

a:hover {
  color: white;
}

body {
  width: 100vw;
  height: 100vh;
}

canvas {
  position: absolute;
  margin: 0;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  z-index: 555;
}

#main-header {
  width: 300px;
  height: 100px;
  background-color: white;
  position: absolute;
  left: calc(50% - 150px);
  top: 100px;
  z-index: 999;
}

#main-container {
  position: absolute;
  top: 0;
  margin: 0px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#leporelle-logo {
  position: fixed;
  opacity: 0.2;
  pointer-events: none;
}

#main-content {
  width: 80vw;
  height: 40vh;
  min-height: 400px;
  position: absolute;
  left: 10%;
  -webkit-transition: top 340ms ease-in-out;
  transition: top 340ms ease-in-out;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 48%;
  -webkit-column-gap: 2%;
          column-gap: 2%;
  row-gap: 4%;
  z-index: 999;
}

.main-content-open {
  top: 20%;
}

.main-content-closed {
  top: -110%;
}

.profile-thumbnail,
.info-thumbnail {
  position: relative;
  width: 100%;
  -webkit-transition: all 130ms ease-in-out;
  transition: all 130ms ease-in-out;
  border-radius: 4px;
  background-color: #ff7078;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2em;
  font-family: "Ubuntu", sans-serif;
  -webkit-box-shadow: 6px 10px 0px rgba(255, 255, 255, 0.23);
          box-shadow: 6px 10px 0px rgba(255, 255, 255, 0.23);
  /* filter: drop-shadow(6px 10px 0px rgba(255, 255, 255, 0.23)); */
  z-index: 888;
  overflow: hidden;
}

.profile-text-container {
  padding: 1em;
  overflow: hidden;
}

.profile-text-container p {
  padding-top: 1em;
  height: 50%;
  z-index: 888;
  pointer-events: none;
  word-wrap: break-word;
}

.profile-tagline {
  font-size: 0.7em;
  font-weight: 100;
}

.profile-thumbnail:hover,
.info-thumbnail:hover,
.profile-thumbnail:hover .profile-image-container {
  cursor: pointer;
  opacity: 1;
}

.profile-thumbnail:hover,
.info-thumbnail:hover {
  color: white;
  z-index: 999;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow: 3px 3px 0px rgba(255, 255, 255, 0.33);
          box-shadow: 3px 3px 0px rgba(255, 255, 255, 0.33);
}

.profile-image-container {
  position: absolute;
  width: 102%;
  height: 102%;
  top: -1%;
  left: -1%;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.profile-image-container img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.profile-image-container .profile-thumbnail p,
.info-thumbnail p {
  text-align: center;
}

.mobile-padding {
  display: none;
}

#detail-content {
  width: 80%;
  height: 80%;
  position: absolute;
  left: 10%;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-transition: top 400ms ease-in-out;
  transition: top 400ms ease-in-out;
  z-index: 999;
  word-wrap: break-word;
}

.detail-content-closed {
  top: 110%;
}

.detail-content-open {
  top: 2%;
}

#profile-image {
  width: 180px;
  height: 180px;
  position: absolute;
  top: 5%;
  left: 5%;
  overflow: hidden;
  z-index: 999;
  border-radius: 4px;
}

#detail-description {
  position: absolute;
  width: 60%;
  top: 10%;
  left: 30%;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(40, 40, 40, 0.78);
  border-radius: 4px;
  padding: 1em;
  font-size: 1.5em;
  font-family: "Ubuntu", sans-serif;
}

#profile-image,
#detail-description {
  -webkit-box-shadow: 6px 6px 0px rgba(211, 211, 211, 0.33);
          box-shadow: 6px 6px 0px rgba(211, 211, 211, 0.33);
}

#close-button {
  width: 34px;
  height: 34px;
  background-color: #ff7078;
  position: absolute;
  right: -12px;
  top: -12px;
  border-radius: 10%;
  z-index: 999;
  -webkit-transition: -webkit-transform 130ms ease-out;
  transition: -webkit-transform 130ms ease-out;
  transition: transform 130ms ease-out;
  transition: transform 130ms ease-out, -webkit-transform 130ms ease-out;
}

#close-button img {
  margin: 18%;
  height: 64%;
  width: 64%;
}

#close-button:hover {
  cursor: pointer;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

#profile-image img {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
}

#detail-background-container {
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.89);
  border-radius: 4px;
  overflow: hidden;
}

#detail-background-container video,
#detail-background-container img {
  width: 60%;
  height: 80%;
  position: relative;
  left: 40%;
  top: 48%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-aspect-ratio: 1 / 1) {
  #detail-background-video video {
    width: 100%;
  }
}

@media (max-aspect-ratio: 1 / 1) {
  #detail-background-video video {
    height: 100%;
  }
}
/*# sourceMappingURL=main.css.map */