/* RESET */
body, body * {
  margin: 0 0;
  padding: 0 0;
  font-size: 0;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
}

a, p {
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.5em;
}

br {
  line-height: 20px;
}

/* SHARED */
.spacer { height: 100%; vertical-align: middle; }
.inline { display: inline-block; }
.clickable { cursor: pointer !important; }
.no-underline { text-decoration: none; }
.is-hidden { opacity: 0 !important; }
.title { opacity: 0.3; margin-bottom: 10px; }
.social-link { margin: 2px 0; display: block; }
.social-link:hover { color: #ff0061; }

/* TEXT ALIGNMENT */
.center-align { text-align: center; }
.left-align   { text-align: left; }
.right-align  { text-align: right; }

/* VERTICAL ALIGNMENT */
.v-middle { vertical-align: middle; }
.v-top    { vertical-align: top; }
.v-bottom { vertical-align: bottom; }

/* FONT FAMILIES */
.playfair     { font-family: 'Playfair Display', serif; }
.rubik        { font-family: 'Rubik', 'Helvetica', sans-serif; }
.inconsolata  { font-family: 'inconsolata', monospace; }


/* FONT SIZES */
.xsmall {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.xlarge {
  font-size: 78px;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1em;
}

/* SECTIONS */
#bio {
  padding: 30px;
  text-align: center;
  background-color: #fff;
}

#bio p {
  max-width: 350px;
  margin: 0 auto 5px;
}

#paintings {
  height: 100%;
  background-color: #fafafa;
  padding: 5%;
  padding-bottom: 10%;
}

.gridfolio--block-content {
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.gridfolio--block-title {
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.gridfolio--block-content:hover .gridfolio--block-title {
  opacity: 1;
}

.tongue           .gridfolio--block-content { background-image: url('./assets/tongue.png'); }
.yellow-smile     .gridfolio--block-content { background-image: url('./assets/yellow-smile.png'); }
.green-pepper     .gridfolio--block-content { background-image: url('./assets/green-pepper.png'); }
.meh-buns  .gridfolio--block-content { background-image: url('./assets/meh-buns.png'); }
.squench       .gridfolio--block-content { background-image: url('./assets/squench.png'); }
.ah       .gridfolio--block-content { background-image: url('./assets/ah.png'); }
.three-little-birds       .gridfolio--block-content { background-image: url('./assets/three-little-birds.png'); }
.hats-for-sale       .gridfolio--block-content { background-image: url('./assets/hats-for-sale.png'); }
.untermyer       .gridfolio--block-content { background-image: url('./assets/untermyer.png'); }
.squantz       .gridfolio--block-content { background-image: url('./assets/squantz.png'); }
.nightfall       .gridfolio--block-content { background-image: url('./assets/nightfall.png'); }
.red-gate       .gridfolio--block-content { background-image: url('./assets/red-gate.png'); }
.still-swimming       .gridfolio--block-content { background-image: url('./assets/still-swimming.png'); }
.stairs      .gridfolio--block-content { background-image: url('./assets/stairs.png'); }
.david      .gridfolio--block-content { background-image: url('./assets/david.png'); }
.still-life      .gridfolio--block-content { background-image: url('./assets/still-life.png'); }
.the-band      .gridfolio--block-content { background-image: url('./assets/the-band.png'); }
.water-lilies      .gridfolio--block-content { background-image: url('./assets/water-lilies.png'); }
.sophie      .gridfolio--block-content { background-image: url('./assets/sophie.png'); }
.smile      .gridfolio--block-content { background-image: url('./assets/smile.png'); }
.davids-doorway      .gridfolio--block-content { background-image: url('./assets/davids-doorway.png'); }
.green-mannequin      .gridfolio--block-content { background-image: url('./assets/green-mannequin.png'); }
.danielle      .gridfolio--block-content { background-image: url('./assets/danielle.png'); }



#painting-preview-wrapper {
  visibility: hidden;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.9);
  opacity: 0;

  cursor: url('./assets/cursor-x.png') 0 0, auto;

  transition: opacity 0.2s ease-in-out, visibility 0.1s ease-in-out;
}

#painting-preview-wrapper.is-visible {
  visibility: visible;
  opacity: 1;
}

.painting-preview {
  width: 80%;
  height: 80%;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto auto;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


/* MEDIA QUERIES */
@media (min-width: 993px) {
  #bio {
    padding: 5%;
    width: 25%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    margin: 0 0;
    text-align: left;
  }

  #paintings {
    width: 75%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
  }
}