/*
Theme Name: Sarah Meadows 2
Author: Oskar
Author URI: http://oskar.zone
Description: Simple portfolio site theme
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, featured-images


*/

@font-face {
  font-family: 'Iosevka';
  src: url(/wp-content/themes/sarah-meadows-wp/fonts/iosevka/iosevka-light.ttf) format('truetype'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/iosevka/iosevka-light.woff) format('woff'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/iosevka/iosevka-light.woff2) format('woff2');
  font-weight: normal;
}

@font-face {
  font-family: 'Iosevka';
  src: url(/wp-content/themes/sarah-meadows-wp/fonts/iosevka/iosevka-lightoblique.ttf) format('truetype'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/iosevka/iosevka-lightoblique.woff) format('woff'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/iosevka/iosevka-lightoblique.woff2) format('woff2');
  font-style: italic;
}

@font-face {
  font-family: 'Lunchtype25';
  src: url(/wp-content/themes/sarah-meadows-wp/fonts/Lunchtype25/lunchtype25-light_condensed-webfont.ttf) format('truetype'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/Lunchtype25/lunchtype25-light_condensed-webfont.woff) format('woff'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/Lunchtype25/lunchtype25-light_condensed-webfont.woff2) format('woff2');
  font-weight: normal;
}

@font-face {
  font-family: 'Authentic Sans';
  src: url(/wp-content/themes/sarah-meadows-wp/fonts/AuthenticSans/AUTHENTICSans-60.ttf) format('truetype'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/AuthenticSans/AUTHENTICSans-60.woff) format('woff'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/AuthenticSans/AUTHENTICSans-60.woff2) format('woff2');
  font-weight: 300;
}

@font-face {
  font-family: 'Authentic Sans';
  src: url(/wp-content/themes/sarah-meadows-wp/fonts/AuthenticSans/AUTHENTICSans-90.ttf) format('truetype'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/AuthenticSans/AUTHENTICSans-90.woff) format('woff'),
  url(/wp-content/themes/sarah-meadows-wp/fonts/AuthenticSans/AUTHENTICSans-90.woff2) format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Wreckage';
  src: url(/wp-content/themes/sarah-meadows-wp/fonts/Wreckage/Wreckage-GrotesqueOne.otf) format('opentype');
}

:root {
  --yellow:       #F9C22E;
  --black:        #181818;

  --font-mono:    'Iosevka', 'Courier New', Courier, monospace;
  --font-sans:    'Authentic Sans', Helvetica, Arial, sans-serif;
  --font-display: 'Wreckage', var(--font-sans);
}

body {
  margin: 0 1rem 5rem;
}

header {
  margin-bottom: 7rem;
}

@media (min-width: 800px) {
  header {
    margin: 3.5rem 0 4rem 3rem;
  }
}

header h1 {
  width: 203px;
  margin: 20px 0 0;
}

header h1 a {
  font-family: var(--font-display);
  text-decoration: none;
  font-weight: 100;
  font-size: 3rem;
  letter-spacing: .05em;
  margin: 0px;
  color: white;
  text-shadow:
   -1px -1px 0 #000,
    1px -1px 0 #000,
   -1px 1px 0 #000,
    1px 1px 0 #000;
}

@media (min-width: 800px) {
  header h1 a {
    font-size: 4rem;
  }
}

header .menu {
  font-family: var(--font-mono);
  font-weight: 500;
  list-style: none;
  margin: 5px 0 0;
  padding: 0px;
}

header .menu ul {
  padding: 0;
}

header .menu li {
  display: inline;
  margin-right: 30px;
}

header .menu li a {
  color: var(--yellow);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1rem;
}

header .menu li a:visited {
  color: var(--yellow);
}

header .menu li.current-menu-item a, header .menu li:hover {
  text-shadow: 0px 0px 4px var(--yellow);
}

.portfolio-item, .link {
  max-width: 200px;
  margin: 0 auto 80px;
}

@media (min-width: 500px) {
  .portfolio-item, .link {
    position: absolute;
    margin: 0;
  }
}

.link {
  top: 100px;
  right: 100px;
}

@media (min-width: 800px) {
  .link {
    top: 150px;
  }
}

.post-title {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--yellow);
  font-style: italic;
  margin: 8px auto 0;
  word-wrap: break-word;
}

@media (min-width: 500px) {
  .post-title {
    opacity: 0;
  }
}

@media (min-width: 500px) {
  .portfolio-item:hover .post-title {
    opacity: 1;
  }

  .portfolio-item:hover img {
    box-shadow: 0 1px 6px #ABABAB;
  }
}

@media (min-width: 500px) {
  #post1 {
    left: 300px;
    top: 400px;
  }

  #post2 {
    left: 900px;
    top: 400px;
  }

  #post3 {
    left: 1500px;
    top: 200px;
  }

  #post4 {
    left: 1950px;
    top: 300px;
  }

  #post5 {
    left: 100px;
    top: 1000px;
  }

  #post6 {
    left: 650px;
    top: 850px;
  }

  #post7 {
    left: 1200px;
    top: 950px;
  }

  #post8 {
  left: 2000px;
  top: 750px;
}

  #post9 {
    left: 1650px;
    top: 1350px;
  }

  #post10 {
    left: 2100px;
    top: 1100px;
  }

  #post11 {
    left: 200px;
    top: 1450px;
  }

  #post12 {
    left: 800px;
    top: 1750px;
  }

  #post13 {
    left: 1000px;
    top: 1300px;
  }

  #post14 {
    left: 1600px;
    top: 1900px;
  }

  #post15 {
    left: 2150px;
    top: 1800px;
  }

  #post16 {
    left: 100px;
    top: 2700px;
  }

  #post17 {
    left: 300px;
    top: 2100px;
  }

  #post18 {
    left: 900px;
    top: 2600px;
  }

  #post19 {
    left: 1800px;
    top: 2500px;
  }

  #post20 {
    left: 2200px;
    top: 2900px;
  }
}

main {
  margin: 0 auto;
  max-width: 900px;
}

.portfolio-title, .page-title {
  font-family: var(--font-sans);
  font-size: 3rem;
  margin: 0 auto 30px;
  text-align: center;
  font-weight: lighter;
}

@media (min-width: 800px) {
  .portfolio-title, .page-title {
    font-size: 4rem;
  }
}

.portfolio-image img {
  width: 100%;
}

.portfolio-image {
  align-self: center;
}

.portfolio-gallery {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  padding-bottom: 80px;
  margin: 0 auto;
  max-width: 2700px;
}

.portfolio-gallery.one-up {
  grid-template-columns: 1fr;
  max-width: 900px;
}

@media (min-width: 1000px) {
  .portfolio-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1600px) {
  .portfolio-gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .portfolio-gallery.two-up {
    grid-template-columns: 1fr 1fr;
    max-width: 1800px;
  }
}

.image-description {
  font-family: var(--font-mono);
  font-weight: 500;
  font-style: italic;
  font-size: 16px;
  max-width: 90%;
  margin: 9px auto 0;
  text-align: center;
}

p a, .image-description a {
  color: var(--yellow);
  text-decoration: none;
}

p a:hover, .image-description a:hover {
  text-shadow: 0px 0px 4px var(--yellow);
}

.page-content p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
}

.page-content p strong {
  font-size: 2rem;
  font-weight: 300;
}

/*studio page*/

.studio-post {
  margin-bottom: 60px;
  font-family: var(--font-sans);
}

.studio-title {
  font-family: var(--font-mono);
  color: var(--yellow);
  max-width: 90%;
}

.studio-post img {
  width: 100%;
  height: auto;
}

.studio-post p {
  font-size: 18px;
  line-height: 1.3em;
}

@media (min-width: 800px) {
  .studio-post p {
    font-size: 22px;
  }
}

.studio-content-wrapper p a img {
  display: block;
  margin: 20px 0px 0px;
}

.studio-time {
  text-align: center;
  font-size: 24px;
  font-weight: 200;
}

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