/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */

:root {
  --color-bg: #252525;
  --color-text-main: #ffffff;
  --color-primary: #ffffff;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
h1 {
  font-size: 60px;
  font-family: "roc-grotesk", serif;
  line-height: 60px;
}
h2 {
  font-size: 30px;
  font-weight: 600;
}

p,
li {
  font-family: "Source Serif Pro", Serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 26px;
}
p b {
  font-weight: 600;
}
a {
  text-decoration: underline;
  color: var(--color-text-main);
}
.caudex {
  font-family: Caudex, serif;
}

.subhead {
  font-family: roc-grotesk, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600 !important;
}
[hidden] {
  display: none !important;
}

/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: "roc-grotesk", serif;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  margin: 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}

/********* INDEX PAGE STYLES ******/

.intro {
  width: 50vw;
  padding: 50px;
}

.intro .description {
  font-weight: 300;
  font-size: 42px;
}

.read-more {
  font-size: 13px;
  letter-spacing: 1px;
  font-family: Helvetica, sans-serif;
}

.projects {
  padding-top: 50px;
  border-top: 1px solid black;
}

.projects-title {
  margin-left: 50px;
  font-weight: normal;
}

.project-title h2 {
  font-size: 24px;
  font-weight: 400;
}
.project-grid {
  margin: 30px 0 0 1vw;
}

.project {
  width: 48.5vw;
  margin: 0 1vw 1vw 0;
  height: 30vw;
  float: left;
  background-size: cover;
  background-position: center center;
}

.project-right-on-page {
  background-image: url("https://cdn.glitch.global/937961c7-776e-4d49-b247-959e695958f7/2022-03-17%2016%3A50%3A20.799.JPG?v=1647612061027");
}

.project-onboarding-page {
  background-image: url("https://cdn.glitch.global/937961c7-776e-4d49-b247-959e695958f7/Group%20776.png?v=1674587256625");
}

.project-kiln-page {
  background-image: url("https://cdn.glitch.global/937961c7-776e-4d49-b247-959e695958f7/kiln-browser.png?v=1674595796395");
}

.project-comparison-slider-page {
  background-image: url("https://cdn.glitch.global/937961c7-776e-4d49-b247-959e695958f7/slidermockup.png?v=1674595063845");
}
/* .project-about {
  background-image: url(https://cdn.glitch.global/937961c7-776e-4d49-b247-959e695958f7/2022-01-15%2016%3A35%3A39.303.jpg?v=1648432881570);
} */

.project-4 {
  background: yellow;
}

.project-link {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
  text-decoration: none;
  font-size: 32px;
  font-family: "roc-grotesk", serif;
  font-weight: normal;
  color: white;
}

.light-theme .project-link {
  color: white;
}
.project-about .project-link {
  opacity: 1;
  background: none;
  color: #252525;
}


.project-link:hover {
  opacity: 1;
}


.project-about .project-link:hover {
  color: blue;
}

/* INDEX MOBILE STYLES */

@media (max-width: 1024px) {
  .intro {
    width: 90vw;
    margin: 0px auto 20px auto;
    max-width: none;
    padding: 0;
  }
  .intro .description {
    line-height: 48px;
  }
  .projects-title {
    margin-left: 20px;
    width: 90vw;
    margin: 0px auto;
  }
  .project-grid {
    margin: 30px 0 0 0;
  }
  .project {
    width: 100vw;
    height: 60vw;
    float: none;
  }
  .project-link {
    opacity: 1;
    font-size: 24px;
    padding: 0 20px;
  }
}

/********* PROJECT PAGE STYLES ******/

.index-link {
  position: fixed;
  top: 4px;
  left: 10px;
  font-size: 48px;
  z-index: 2;
  text-decoration: none;
}
.index-link span {
  transition: transform 200ms ease, opacity 200ms ease;
  display: block;
  line-height: 50px;
  width: 49px;
  height: 57px;
  padding-left: 1px;
}
.index-link span:hover {
  transform: rotate(-30deg);
  transform-origin: center;
}

.white-border {
  width: 100vw;
  height: 1px;
  border-top: 1px solid white;
  display: block;
}

.project-title {
  text-align: center;
  border-bottom: 1px solid white;
  width: 100%;
  z-index: 1;
  height: 70px;
  position: absolute;
  top: 0;
}
.index-page .project-title {
  position: relative;
}

.project-page-project {
  width: 100vw;
  margin: 0 auto;
}

.project-hero-image {
  padding-bottom: 50px;
  width: 100%;
}

.project-hero-image img {
  /*   opacity: 0.5; */
  width: 100%;
}
.project-hero-image.marketing-hero-image img {
  opacity: 1;
}

.section-title {
  width: 100vw;
  border-bottom: 1px solid white;
  padding: 2vw;
  text-align: left;
}

.project-roles,
.image-block-description {
  margin: 30px 0 0 30px;
  position: relative;
}
.team-members {
  display: flex;
  justify-content: space-between;
}
.team-members.onboarding-team {
  justify-content: flex-start;
  gap: 48px;
}
.image-block-description {
  text-align: center;
}
.image-block-description.connection-steps {
  width: 50vw;
  margin: 30px auto;
  font-family: "Source Serif Pro", Serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 26px;
}

.project-copy-block {
  width: 50vw;
  margin: 0 auto;
  padding: 10vw 0;
}

@media (min-width: 1600px) {
  .project-copy-block {
    width: 40vw;
  }
}

.project-image-block {
  width: 100vw;
}

.project-image-block img {
  width: 100%;
  display: block;
}

.project-demo-block {
  width: 100vw;
  padding: 10vw 0;
}

.project-image-block.roomy,
.project-image-block.less-roomy {
  padding: 10vw 0;
}

.project-image-block.roomy img {
  width: 70vw;
  margin: 0 auto;
  display: block;
}

.project-image-block.less-roomy img {
  width: 90vw;
  margin: 0 auto;
  display: block;
}

.project-copy-and-image-block {
  display: flex;
  width: 100vw;
}
.image-block,
.copy-block {
  width: 50vw;
  min-height: 50vw;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.image-block {
  background: #daa393;
  align-items: center;
}
.image-block img {
  width: 100%;
}

.image-block-small img {
  width: 75%;
}

img.has-border {
  border-radius: 4px;
  border: 1px solid #e7e7e7;
}

.project-image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 10vw;
}

.image-grid-item {
  width: 40vw;
  padding: 2vw;
}

.image-grid-item img {
  display: block;
  align-self: center;
  width: 100%;
}
.image-grid-description {
  font-family: Monospace;
  font-size: 16px;
  margin-left: 5px;
  font-style: italic;
}

.footer {
  display: flex;
  width: 100vw;
  margin-top: 5vw;
  padding: 5vw;
  justify-content: space-between;
  border-top: 1px solid #ffffff;
}

.footer a {
  text-decoration: none;
  font-size: 50px;
  /*   font-family: Helvetica, sans-serif; */
  transition: opacity 300ms ease;
}

.footer a:hover {
  opacity: 0.5;
}

/* Right on specific */

.project-right-on,
.project-right-on .project-image-block {
  background: #593e3c;
}

.right-on-logo {
  background: #9b6e6b;
  padding: 20vw 0;
}

.right-on-logo img {
  width: 60vw;
  margin: 0 auto;
  display: block;
  opacity: 0.8;
}

/* Kiln Specific */
.project-kiln-theme {
  background: #593e3c;
}
.light-theme .project-image-block.kiln-designs {
  background: aliceblue;
}

.light-theme.project-onboarding .project-image-block {
  background: #1c1c1c;
}
.light-theme.project-onboarding .project-image-block p {
  color: white;
}

.project-demo-block.kiln-sliders {
  background: aliceblue;
}
.kiln-sliders {
  display: flex;
  justify-content: center;
}
.slider-wrap {
  display: flex;
  margin: 0 2vw;
  justify-content: space-between;
  width: 40vw;
  max-width: 700px;
  padding-bottom: 2vw;
}
.slider-wrap p {
  margin-right: 2vw;
  color: #593e3c;
  font-size: 20px;
  font-weight: bold;
}
.slider .logo-wrap {
  display: inline-block;
  font-size: 50px;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  color: #000000;
  position: absolute;
  top: 40px;
  left: 28px;
}
.slider .logo-wrap span {
  display: inline-block;
}
.slider-browser {
  width: 40vw;
  max-width: 700px;
  position: relative;
  margin: 0 2vw;
}
.slider-browser img {
  width: 100%;
}
.slider-word,
.slider-character {
  transform: rotate(-11deg);
}

.range-slider {
  width: 300px;
}

.format-homepage img {
  width: 70vw;
  padding: 5vw 0;
  margin: 0 auto;
}

/* SLIDER SPECIFIC */

.comparison-slider-sketches {
  width: 80vw;
  margin: 0 auto;
}

.cp_embed_wrapper {
  width: 626px;
}

.slider-final-designs-section .project-copy-block {
  padding: 10vw 0 5vw 0;
}

.slider-final-designs-section .project-image-block.roomy {
  padding: 3vw 0;
}

.slider-final-designs-section .project-image-block.roomy img {
  width: 55vw;
}

.slider-first-image-block.project-image-block {
  padding-top: 0px;
}

.slider-live-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.slider-live-demo iframe {
  width: 1200px;
  height: 1050px;
  border-radius: 3px;
  border: 1px solid #252525;
}
/* PROJECT MOBILE STYLES */

@media (max-width: 1024px) {
  h1 {
    font-size: 52px;
  }
  .index-link {
    position: absolute;
  }
  .project-title {
    position: relative;
  }
  .project-roles,
  .image-block-description {
    margin: 20px 0 0 20px;
    width: 80vw;
  }
  .project-roles {
    text-align: left;
  }
  .team-members {
    display: block;
  }
  .project-copy-block {
    width: 90vw;
  }
  .project-hero-image {
    border-bottom: 1px solid white;
    padding-bottom: 20px;
    height: auto;
  }
  .project-hero-image img {
    opacity: 1;
  }
  .project-image-block.roomy img {
    width: 90vw;
  }
  .project-copy-and-image-block {
    display: block;
  }
  .image-block,
  .copy-block {
    width: 100vw;
    min-height: 50vw;
    padding: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .image-block-description.connection-steps {
    width: 90vw;
  }
  .image-grid-item {
    width: 90vw;
  }
  .right-on-logo img {
    width: 80vw;
  }
  .kiln-sliders {
    flex-direction: column;
    align-items: center;
  }
  .kiln-sliders .slider {
    padding-bottom: 10vw;
  }
  .comparison-slider-sketches {
    width: 100vw;
  }
  .slider-browser {
    background: white;
    width: 80vw;
  }
  .slider-wrap {
    width: 80vw;
    max-width: 700px;
  }
  .footer a {
    font-size: 20px;
  }
  .slider-final-designs-section .project-image-block.roomy img {
    width: 90vw;
  }
  .slider-final-designs-section .image-block-description {
    margin: 20px;
    text-align: center;
    width: 100vw;
  }
}

/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

/* LIGHT THEME PAGES */
.light-theme {
  background: white;
  color: #252525;
}

.light-theme a {
  color: #252525;
}

.light-theme p,
.light-theme li {
  font-weight: 400;
}

.light-theme .project-title {
  border-bottom: 1px solid #252525;
}
.light-theme .image-block {
  background: aliceblue;
}

.light-theme .project-image-block {
  background: white;
}

.light-theme .footer {
  border-top: 1px solid #252525;
}