/*** app.css */

/*
The Pallet:
  Background Options:
    #252525ff
    
  Text Options:
    Same color as logo border
    #b3b3b3ff

  New Pallat:
  #F7F4F5 Light shades (text or background)
  #75B5CA Light accents (yellow orangish) OR 85BED3 (pastel blue
  #138AD3 Main brand color
  #D35C13 Dark Accent
  #222336 Dark Shades (text or background) or #1c2e46

*/

/*** CSS variables */
:root {
  /* Global Colors */
  --primary: #85bed3;

  /*** Custom Variable used for Body's font family */
  --fontFamilyBody: "Rubik", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  /* 
  TODO: Must properly implement variable fonts for body font
  This is currently handled for the default inter font in their custom style sheet. 

  See the example of how they do it here 
  https://rsms.me/inter/inter.css

  Google Documentation on variable fonts 
  https://developers.google.com/fonts/docs/css2
  */
  --fontFamilyBodyVar: "Rubik", "HelveticaNeue", "Helvetica Neue", Helvetica,
    Arial, sans-serif;

  /* As above, this will need to have variable fonts properly implemented
  */

  --fontFamily: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  --fontFamilyVar: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica,
    Arial, sans-serif;

  --fontSize: 1.6rem;
  --h1Size: 4.5rem;
  --h2Size: 3.6rem;
  --h3Size: 3rem;
  --h4Size: 2.5rem;
  --h5Size: 2.2rem;
  --h6Size: 1.7rem;

  /*
  Use heavier weight for h6 so it differs from standard text
  h6 is unlikely to be used but just in case. 
  */
  --h6Weight: 700;

  /*
  Slightly increase line space for all h tags 
  Default is 1.5
  */
  --hLine: 1.6;

  --hrMargin: 4rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 3rem;
}

h6,
.h6 {
  font-weight: var(--h6Weight);
}

/* If Variable fonts are supported, use them 
@supports (font-variation-settings: normal) {
  :root {
    --fontFamily: var(--fontFamilyVar);
    --fontFamilyBody: var(--fontFamilyBodyVar);
  }
}
*/

/* remove underline from links */
a,
a:hover {
  text-decoration: none;
}

/* ------------------
  Putting Global stuff here for now
------------------ */

/*
Navbar stuff
*/

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: -1.1rem;
}

.navbar {
  width: 100%;
  height: 4.3rem;
  z-index: 99;
  background: var(--bgColor);
  border-top: 1px solid rgba(129, 177, 192, 0.8);
  border-bottom: 1px solid rgba(129, 177, 192, 0.8);
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.logo {
  width: 65%;
  margin-top: 2.5%;
}

.heropic {
  max-width: 65%;
  height: auto;
  margin-bottom: 3%;
  margin-top: 2%;
}

.herobox {
  /*border: 1px solid var(--color);*/
  background-color: rgba(129, 177, 192, 0.2);
  padding-top: 1%;
  padding-bottom: 1%;
}

.quotebox {
  border: 1px solid var(--color);
  background-color: rgba(129, 177, 192, 0.2);
  padding-top: 1%;
  padding-bottom: 1%;
  margin-bottom: 1%;
}

.qbpad {
  padding-right: 2rem;
}

.nopicture {
  background: rgb(131, 58, 180);
  background: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  height: 1920px;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}

body {
  font-family: var(--fontFamilyBody);
  font-weight: 400;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

footer {
  border-top: 1px solid var(--color);
  margin-top: 3.2rem;
}

pre > code {
  height: auto;
  max-height: 20rem;
  max-width: 100%;
  white-space: pre-wrap;
}

:not(pre) > code {
  max-width: 500px;
  min-width: 500px;
  white-space: pre-line;
}

/* ------------------
  media query
------------------ */
@media (prefers-reduced-motion: reduce) {
} /* User prefers NO motion-based animation */

/*** Detect OS Dark/Light mode */
@media (prefers-color-scheme: dark) {
  body {
    --bgColor: #2a3950;
    --color: #f6f4f4;
    --colorInverse: #f6f4f4;
    --hColor: var(--color);
  }
} /* if OS in DARK mode */
@media (prefers-color-scheme: light) {
  body {
    --bgColor: #f6f4f4;
    --color: #2a3950;
    --colorInverse: #f6f4f4;
    --hColor: var(--color);
  }
} /* if OS in LIGHT mode */

/*** Responsive */
/** Skelet. BREAKING POINTS */
@media (max-width: 600px) {
  :root {
    --fontSize: 1.8rem;

    --h1Size: 3.8rem;
    --h2Size: 3.2rem;
    --h3Size: 3rem;
    --h4Size: 2.5rem;
    --h5Size: 2.2rem;
    --h6Size: 1.7rem;

    --hLine: 1.3;
  }
} /* Grid SMALL becomes active */
@media (min-width: 601px) and (max-width: 1024px) {
} /* Grid MEDIUM becomes active */
@media (min-width: 1599px) {
  x-grid {
    max-width: 960px;
  }
} /* Grid LARGE becomes active */

/** General breaking points */
/* Device = Most of Mobile (Portrait) | Screen = b/w 0 to 480px */
@media (max-width: 480px) {
}
/* Device = Low Resolution Tablet, Mobile (Landscape) | Screen = b/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
}
/* Device = Tablet, iPad (landscape) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}
/* Device = Tablet, iPad (portrait) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
}
/* Device = Laptop, Desktop | Screen = b/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
}
/* Device = Desktop | Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {
}
/* Device = Desktop | Screen = 1599px huge resolution desktops */
@media (min-width: 1599px) {
}