body, html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif; }

* {
  box-sizing: border-box; }

a {
  font-weight: normal;
  color: #67a1b8;
  text-decoration: none;
  border-bottom: 1px dotted #67a1b8;
  transition: opacity 300ms ease; }

a:hover {
  opacity: 0.6; }

body {
  background: white;
  background: linear-gradient(180deg, white 7%, whitesmoke 85%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.wrapper {
  width: 100vw;
  height: 75vw;
  max-height: 100vh;
  max-width: 133.33vh;
  margin: auto;
  position: relative; }

.name {
  color: #cecece;
  letter-spacing: 14px;
  top: 19%;
  left: 38%;
  position: absolute;
  display: block;
  opacity: 0;
  transition: 400ms ease-out;
  transform: translateX(-5vw); }

.name.animated-in {
  opacity: 1;
  transform: translateX(0vw); }

.click-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  display: none; }

.click-mask.display {
  display: block; }

.tile {
  position: absolute;
  display: block;
  max-height: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(3vh);
  transition: 250ms cubic-bezier(0.25, 0.1, 0.21, 2.15);
  cursor: pointer; }
  .tile .icon {
    width: 50%;
    height: auto;
    margin: auto;
    max-width: 256px; }
  .tile .title {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: block;
    padding: 0.7vw;
    color: white;
    letter-spacing: 8px;
    font-size: 1.5em; }

.tile.animated-in {
  transform: translateY(0vh);
  opacity: 1; }

.wrapper:not(.in-page) .tile:hover {
  transform: translateY(-5px);
  box-shadow: 0.5vw 0.8vw 19px -12px rgba(0, 0, 0, 0.2) !important; }

.wrapper.in-page .tile {
  transition: 250ms; }

.tile.size-baseline {
  visibility: hidden;
  opacity: 0;
  width: 25%; }

.tile.about-me {
  background: linear-gradient(180deg, #ffa2c4 0%, #fb867b 100%);
  width: 25%;
  padding-bottom: 25%;
  left: 10%;
  top: 14%;
  box-shadow: 0.5vw 0.5vw 19px -12px rgba(0, 0, 0, 0.2); }
  .tile.about-me .icon {
    margin-top: 18%; }

.tile.portfolio {
  background: linear-gradient(45deg, #f3cc85 0%, #f3ee88 100%);
  width: 53%;
  padding-bottom: 16%;
  left: 37%;
  top: 26%;
  box-shadow: 0.5vw 0.5vw 19px -12px rgba(0, 0, 0, 0.2); }
  .tile.portfolio .icon {
    margin-top: 5%;
    width: 16%; }

.tile.share {
  background: linear-gradient(145deg, #c2afe2 0%, #96ded4 100%);
  width: 10%;
  padding-bottom: 10%;
  left: 15%;
  top: 50%;
  box-shadow: 0.5vw 0.5vw 19px -12px rgba(0, 0, 0, 0.2); }
  .tile.share .icon {
    margin-top: 25%; }

.tile.contact {
  background: linear-gradient(45deg, #8defb7 0%, #87e5ee 100%);
  width: 18%;
  padding-bottom: 18%;
  left: 27%;
  top: 50%;
  box-shadow: 0.5vw 0.5vw 19px -12px rgba(0, 0, 0, 0.2); }
  .tile.contact .icon {
    margin-top: 16%; }

.tile.social {
  background: linear-gradient(0deg, #f5bfff 0%, #f5c8b8 100%);
  width: 18%;
  padding-bottom: 28%;
  left: 47%;
  top: 50%;
  box-shadow: 0.5vw 0.5vw 19px -12px rgba(0, 0, 0, 0.2); }
  .tile.social .icon {
    margin-top: 42%; }

.tile.github {
  background: linear-gradient(45deg, #fde8c2 0%, #ffb1b1 100%);
  width: 12%;
  padding-bottom: 12%;
  left: 67%;
  top: 50%;
  box-shadow: 0.5vw 0.5vw 19px -12px rgba(0, 0, 0, 0.2); }
  .tile.github .icon {
    margin-top: 25%; }

.open {
  z-index: 9999;
  cursor: default; }
  .open .icon {
    display: none; }
  .open .title {
    top: 0;
    display: block !important; }

.page {
  width: 98%;
  border: 0px;
  position: absolute;
  margin-left: calc(2% / 2);
  top: 8%;
  height: 91%; }

.wrapper.page-about-me .about-me {
  width: 80%;
  padding-bottom: 52%; }
.wrapper.page-about-me .portfolio {
  left: 92%;
  opacity: 0.5; }
.wrapper.page-about-me .share, .wrapper.page-about-me .contact, .wrapper.page-about-me .social, .wrapper.page-about-me .github {
  top: 86%;
  opacity: 0.5; }

.wrapper.page-portfolio .portfolio {
  width: 80%;
  padding-bottom: 52%;
  left: 10%;
  top: 14%; }
.wrapper.page-portfolio .share, .wrapper.page-portfolio .contact, .wrapper.page-portfolio .social, .wrapper.page-portfolio .github {
  top: 86%;
  opacity: 0.5; }
.wrapper.page-portfolio .about-me {
  left: -17%;
  opacity: 0.5; }

.wrapper.page-share .share {
  width: 80%;
  padding-bottom: 52%;
  left: 10%;
  top: 14%; }
.wrapper.page-share .about-me {
  top: -22%;
  opacity: 0.5; }
.wrapper.page-share .portfolio {
  left: 92%;
  opacity: 0.5; }
.wrapper.page-share .contact {
  left: 92%;
  opacity: 0.5; }
.wrapper.page-share .social {
  left: 112%;
  opacity: 0.5; }
.wrapper.page-share .github {
  left: 132%;
  opacity: 0.5; }

.wrapper.page-contact .contact {
  width: 80%;
  padding-bottom: 52%;
  left: 10%;
  top: 14%; }
.wrapper.page-contact .share {
  left: -2%;
  opacity: 0.5; }
.wrapper.page-contact .about-me {
  top: -22%;
  opacity: 0.5; }
.wrapper.page-contact .portfolio {
  top: -10%;
  opacity: 0.5; }
.wrapper.page-contact .social {
  left: 92%;
  opacity: 0.5; }
.wrapper.page-contact .github {
  left: 112%;
  opacity: 0.5; }

.wrapper.page-social .social {
  width: 80%;
  padding-bottom: 52%;
  left: 10%;
  top: 14%; }
.wrapper.page-social .about-me {
  left: -17%;
  opacity: 0.5; }
.wrapper.page-social .portfolio {
  top: -10%;
  opacity: 0.5; }
.wrapper.page-social .contact {
  left: -10%;
  opacity: 0.5; }
.wrapper.page-social .share {
  left: -22%;
  opacity: 0.5; }
.wrapper.page-social .github {
  left: 92%;
  opacity: 0.5; }

.wrapper.page-github .github {
  width: 80%;
  padding-bottom: 52%;
  left: 10%;
  top: 14%; }
.wrapper.page-github .portfolio {
  top: -10%;
  opacity: 0.5; }
.wrapper.page-github .social {
  left: -10%;
  opacity: 0.5; }
.wrapper.page-github .contact {
  left: -30%;
  opacity: 0.5; }
.wrapper.page-github .share {
  left: -42%;
  opacity: 0.5; }
.wrapper.page-github .about-me {
  left: -17%;
  opacity: 0.5; }

/*# sourceMappingURL=main.css.map */