:root {
  --palette-page-bg:#DDCFC4;
  --palette-content-bg:#E8E2DC;
  --palette-grey-dark:#383838;
  --palette-brown-dark:#C1B6AE;
  --palette-brown-darker:#796B62;
  --palette-highlight:#F5F1ED;

  font-family: 'Roboto', sans-serif;
  font-size:16px;
  color: var(--palette-grey-dark);
}

* {
  margin:0px;
  border:0px;
  padding:0px;

  box-sizing:border-box;
}

body {
  background-color: var(--palette-page-bg);
  background-image: url("../assets/dec-mountains.svg");
  background-size: contain;
  background-position:bottom center;
  background-repeat:no-repeat;

  min-height:80vh;
}

a {
  text-decoration:none;

  transition: .2s all;

  color:var(--palette-brown-darker);
  font-weight:bold;
  font-size:1.02rem;
}

a:hover {
  color:var(--palette-brown-dark);
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom:2rem;
}

h1 {
  font-size:2rem;
}

blockquote {
  background-color: var(--palette-highlight);
  padding:1rem;
  border-left: solid 1rem var(--palette-page-bg);

  position:relative;
}

.closeable .closeBtn {
  position:absolute;
  top:0rem;
  right:-3rem;

  color:var(--palette-brown-dark);
  font-size:1.5rem;
  background-color:var(--palette-highlight);
  padding:.5rem;
  padding-top:.25rem;
  padding-bottom:.25rem;
}

.closeable .closeBtn:hover {
  background-color:var(--palette-content-bg);
  color:var(--palette-highlight);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  display:block;
  padding:1rem;

  margin-bottom:2rem;

  width:100%;
  max-width:48rem;

  font-size:1rem;
}

textarea {
  font-family:inherit;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {

}

input[type=button],
input[type=submit],
input[type=reset],
.link-button {
  padding:1rem;
  background-color:var(--palette-brown-dark);
  font-weight:bold;
  font-size:1.02rem;
  color:white;

  transition:background-color .05s;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  cursor:pointer;

  background-color:var(--palette-brown-darker);
}

.link-button:hover {
  background-color:var(--palette-brown-darker);
  color:var(--palette-highlight);
}

input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled
a.link-button:disabled {
  cursor:default;

  background-color:var(--palette-page-bg);

  color:var(--palette-brown-dark);
}

/* Custom HR Divider with text in the middle (give a div the hrTxt class and put a span inside for the text)*/

.hrTxt {
  display:block;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  margin-top:2rem;
  margin-bottom:2rem;
}

.hrTxt > span {
  position:relative;
  display:inline-block;
  color: var(--palette-brown-dark);
  font-weight:bold;
  font-size:1.4rem;
}

.hrTxt > span:before,
.hrTxt > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: .15rem;
    background: var(--palette-brown-dark);
}

.hrTxt > span:before {
    right: 100%;
    margin-right: 15px;
}

.hrTxt > span:after {
    left: 100%;
    margin-left: 15px;
}

#hireForm {
  position:relative;
}

#hireForm .success {
  display:none;

  position:absolute;
  top:0;
  left:0;
  background-color:var(--palette-content-bg);
  width:100%;
  height:100%;
}

#hireForm .success a {
  display:block;
  margin-top:2rem;

  text-align:center;
  max-width:48rem;
}

.login {
  position:absolute;
  top:1rem;
  left:1rem;

  color:#FFF;
  opacity:.5;

  font-weight:bold;
  text-transform:uppercase;

  transition:all .2s;
}

.login:hover {
  opacity:1;
}

.logo {
  position:absolute;
  top:1rem;
  left:50%;


  width:70%;
  height:auto;

  transform:translateX(-50%) translateY(-25%);

  transition:all .2s;
}

.menu .space-logo {
  min-width:9rem;
}

.content {
  background-color: var(--palette-content-bg);
  width:80vw;
  min-height:calc(25vh - 4.1rem);
  margin:auto;
  margin-bottom:30vh;
  padding:4vw;
}

.menu {
  position:sticky;
  top:0;

  display:flex;
  margin:auto;
  margin-top:15vh;

  width:80vw;
  list-style:none;
}

.menu li {
  position:relative;
  flex: 1 1 auto;
  text-align:center;
}

.menu a {
  display:block;
  padding-top:1.5rem;
  padding-bottom:1.5rem;

  color:var(--palette-grey-dark);
  font-size:1.1rem;
  font-weight:bold;
  text-transform:uppercase;
}

.menu a:hover {
  background-color:var(--palette-content-bg);
}

.menu .space-logo a:hover {
  background-color:var(--palette-page-bg);

  opacity:.5;
}

.menu .active a {
  background-color:var(--palette-content-bg);
}

.menu .active a:hover {
  cursor:default;
}

.menu.isSticky .space-logo a:hover {
  background-color:var(--palette-content-bg);
}

.menu.isSticky {
  background-color:var(--palette-content-bg);
  border-bottom:.125rem solid var(--palette-brown-dark);

  z-index:2;
}

.menu.isSticky a:hover {
  background-color:var(--palette-page-bg);
}

.menu.isSticky .logo {
  top:50%;

  height:60%;
  width:auto;

  transform:translateX(-50%) translateY(-50%);
}

.menu.isSticky .active a {
  background-color:var(--palette-page-bg);
  color:var(--palette-highlight);
}

button {
  padding:.5rem;
  background-color:var(--palette-highlight);
  color:var(--palette-grey-dark);
  margin:.5rem;
}

button:hover {
  cursor:pointer;
  background-color:var(--palette-brown-dark);
  color:var(--palette-highlight);
}

/* Modal Styling */
.modalWrap {
  display:none;
  position:fixed;
  top:0;
  left:0;

  width:100vw;
  height:100vh;

  background-color:rgba(193, 182, 174, .9);

  z-index:1002;
}

.modalWrap .modal-item {
  margin-left:auto;
  margin-right:auto;
  display:block;
  max-width:85vw;
  max-height:90vh;

  margin-top:50vh;
  position:relative;
  background-color:var(--palette-highlight);
  padding:1rem;

  border:solid var(--palette-highlight) 1rem;

  transform:translateY(-50%);
}

.modal-item .date {
  position:absolute;
  bottom:.5rem;
  right:1rem;
}

.modal-item img {
  padding:2rem;
  width:100%;
  height:100%;
  max-height:75vh;
  background-color:var(--palette-grey-dark);
  margin-bottom:1.5rem;
  object-fit:contain;
}

.modal-item::after {
  content: attr(data-desc);
  position:absolute;

  color: var(--palette-grey-dark);

  bottom:0px;
  left:10vw;

  z-index:2
}

.modalWrap .closeModal {
  position:absolute;
  top:4rem;
  right:4rem;

  color:white;
  font-size:4vw;
  font-weight:bold;

  transition:.2s all;
}

.modalWrap .closeModal:hover {
   opacity:.7;
   transform:scale(1.2);
   cursor:pointer;
}

/* ===PAGE STYLES=== */

/* LOGIN */
.login-wrap {
  margin:auto;
  width:80vw;
  height:70vh;
  max-width:25rem;

  padding-top:30vh;
}

.login-wrap input {
  width:100%;
  padding:.5rem;
  margin:.5rem;
}

/* HOME */

.wrap-home {
  display:flex;
  flex-wrap:wrap;

  width:100%;
}

.wrap-home .work-wrap {
  flex:2 1 36rem;

  padding-right:2rem;
  display:block;
}

.wrap-home .menu-socials {
  flex:1 2 22rem;
  min-width:20rem;
}

.menu-socials ul {
  list-style:none;
}

.menu-socials ul li {
  display:block;
}

.menu-socials .link-button{
  display:block;
  width:100%;
  border-top:.5rem solid var(--palette-content-bg);
  border-bottom:.5rem solid var(--palette-content-bg);

  font-size:1.1rem;
}

.link-button i {
  font-size:1.5rem;
  margin-right:1rem;
}

/* WORK */
.work-title-wrap{
  display:block;
  position:relative;
}

.work-wrap {
  margin:0px;
  padding:0px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem,1fr));
  grid-gap: 1rem;
  grid-auto-flow:dense;
  width:100%;
  align-items: start;
}

.work-item {
  position:relative;
  background-color:var(--palette-highlight);
  padding:1rem;

  border:solid var(--palette-highlight) 1rem;

  transition:all .2s;
}

.work-item:hover {
  cursor:pointer;
  border:solid white 1rem;
  background-color: #FFF;
}

.work-item .date {
  position:absolute;
  bottom:.5rem;
  right:1rem;
}

.work-item img {
  padding:2rem;
  width:100%;
  height:auto;
  background-color:var(--palette-grey-dark);
  margin-bottom:1.5rem;
}

.ig-wrap {
  background-color:var(--palette-highlight);
  padding:2rem;
}

.work-filters {
  padding:1rem;
  padding-left:0;
  background-color:var(--palette-highlight);
  position:absolute;
  top:0; 
  right:0;
}

.work-filters ul{
  list-style:none;
}

.work-filters ul li {
  float:left;
  margin-left:1.5rem;
  position:relative;
}

.work-filters ul li label {
  padding:.5rem;
  padding-left:2rem;
  border-radius:.25rem;
}

.work-filters ul li label:hover {
  background-color:var(--palette-brown-dark);
  cursor:pointer;
}

.work-filters .checkmark {
  position: absolute;
  top: .075rem;
  left: .5rem;
  height: 1rem;
  width: 1rem;
  background-color: var(--palette-highlight);
  border:.125rem solid var(--palette-brown-dark);
}

.work-filters input[type="checkbox"] {
  display:none;
  opacity:0;
}

.work-filters input[type="checkbox"]:checked ~ .checkmark {
  background-color: var(--palette-brown-darker);
  border:.125rem solid var(--palette-brown-darker);
}

.work-filters label:has(input[type="checkbox"]:checked) {
  background-color: var(--palette-brown-dark);
}


/* ABOUT */
.wrap-about {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}

.about-pic {
  flex: 1 4 15rem;

  margin-right:2rem;
  margin-bottom:2rem;

  width:100%;
  height:auto;
}

.about-desc {
  flex: 4 1 24rem;
  display:block;
}

.wrap-about .menu-socials {
  flex:none;
  display:block;
  width:auto;
}

/* HIRE */
.wrap-hire {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:2rem;
}


.hire-desc {
  flex: 1 1 20rem;
  display:block;

  max-width:27rem;
}

.menu-hire {
  flex: 10 1 auto;
  display:inline-block;

  max-width:41rem;

  list-style:none;

  background-color:var(--palette-highlight);
  padding:2rem;
  padding-bottom:1rem;
}

.menu-hire ul li {
  display:inline-block;
  float:left;
}

.menu-hire ul li a {
  display:inline-block;
  margin-left:1rem;
  margin-bottom:1rem;
}

.menu-hire .active {
  background-color:var(--palette-highlight);

  color:var(--palette-brown-dark);
}

.menu-hire .active:hover {
  cursor:default;
}

.msg-wrap {
  flex: 1 1 auto;
  background-color:var(--palette-highlight);
  padding:2rem;
}

.msg-wrap textarea {
  resize:none;
}

.hire-pic img {
  width:100%;
  height:auto;
  max-width:35rem;

  display:none;
}

.frame-wrap {
  position:relative;
}

iframe {
  display:none;
}

.jf-hide {
  background-color:var(--palette-content-bg);

  width:100%;
  height:3rem;

  position:absolute;
  bottom:0px;
  left:0px;

  display:none;
}

/* SHOP */
.wrap-shop {

}

/* Styles the frame around product category sets */
.shopify-buy-frame--productSet {

}

/* Selects the frame for etsy reviews */
#eapps-etsy-reviews-1546f928-3ed7-4629-ac6c-126214365c35 {

}

/* Adds an after element to hide the advertisement button */
#eapps-etsy-reviews-1546f928-3ed7-4629-ac6c-126214365c35::after {
  content:"";
  width:13rem;
  height:4rem;
  background:var(--palette-content-bg);
  position:absolute;
  bottom:-.5rem;
  left:50%;
  transform:translateX(-50%);
  z-index:9999999;
}

#eapps-instagram-feed-1::after {
  content:"";
  width:13rem;
  height:4rem;
  background:var(--palette-highlight);
  position:absolute;
  bottom:-.5rem;
  left:50%;
  transform:translateX(-50%);
  z-index:9999999;
}