/*
Colors used:
Primary Color (Black): #0a0a0a;
Secondary Color (Blue): #2033b0;
Tertiary Color (PocketChange Blue): #0074E8
Super light (Accent grey): #d9d9d9
*/

:root {
  --margin-size: 24px;
  --pocket-change-text-color: #0a0a0a;
  --pocket-change-white: #fff;
  --pocket-change-light-grey: #757575;
  --pocket-change-accent-grey: #d9d9d9;
}

img {
  border-radius: 10px;
}

/* Changing up the standard section-header style that is defined in main.css */
.freeze .section-header {
  font-weight: 500;
  font-size: 2rem;
  color: unset;
}

.freeze h5 {
  font-size: 1rem;
  font-weight: 500;
}


/* Freeze App IntroSection*/
.freeze-intro-section .section-header {
  font-size: 4rem;
}

.freeze-intro-section .intro-container {
  display: flex;
  align-items: center;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 2rem;
}

.freeze-intro-section .intro-container img {
  margin-top: 1.5rem;
  max-width: 20%;
}

.freeze-intro-section p {
  margin-top: 1.5rem;
  font-weight: 300;
}

.freeze-intro-section p:last-of-type {
  font-weight: 500;
}


/* Overview Section */
.overview-section .precipitation-screens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  align-items: center;
}

a.prototype-link {
  font-size: 1.5em;
  color: blue !important;
  
}

/* Design Process Section */
.design-process .steps {
  display: flex;
  column-gap: 3rem;
  align-items: center;
  margin-top: 3rem;
  font-size: 16px;
}

.design-process .step-header {
  font-weight: 300;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.design-process .step-item {
  font-weight: 500;
  font-size: 1.1rem;
}

.design-process .step-item-desc {
  padding-bottom: 1rem;
}

.design-process .steps h2 {
  line-height: normal;
  font-weight: 400;
}

.design-process .steps:not(:last-of-type) {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--pocket-change-accent-grey);
}

.design-process .steps:first-of-type {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--pocket-change-accent-grey);
}


/* Mountain Screens Section (grid of images and search for resorts) */
.mountain-screens .mountain-screen-mockup {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-gap: 2rem;
  align-items: start;
}

.mountain-screens .double-img {
  display: flex;
  grid-gap: 2rem;
  flex-direction: column;
}

.mountain-screens .app-functions {
  margin-top: 30%;
}

.mountain-screens .app-functions li {
  font-size: 1rem;
  list-style: none;
  font-weight: 500;
}

.mountain-screens .app-functions li span {
  font-size: 1rem;
  list-style: none;
  font-weight: 500;
}

.mountain-screens .list-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mountain-screens .list-side .app-functions li {
  font-weight: 300;
}


/* User Flows Section */
.user-flows h2 {
  margin-bottom: 2rem;
}

.create-account {
  margin-top: 2rem;
}

/* Low Fidelity Wireframes */
.low-fidelity-wireframes img {
  margin-top: 2rem;
}


/* Rapid Prototype Testing */
.prototype-testing img {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Dark Mode */
.dark-mode img {
  margin-top: 32px;
}


/*******************************************************************************************************/
/*     Media Queries from here on down                                                                 */
/*******************************************************************************************************/

@media (max-width: 600px) {

  .mountain-screens .mountain-screen-mockup {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    align-items: center;
  }

  .freeze-intro-section .intro-container {
    flex-direction: column;
  }

  .freeze-intro-section .intro-container img {
    margin-top: 1.5rem;
    max-width: 60%;
    align-self: center;
  }
}