/*----------Spacing, Typography and Images----------*/

/*Font*/
body {
  font-family: "Times New Roman", Times, serif;
}

/*Color scheme*/
:root {
  /*--textpanels-color: rgba(51, 51, 51, 0.85); Original*/
  --textpanels-color: rgba(42, 42, 42, 0.85);
  --bgdefault-color: #0d0d0d;
  --text-color:white;
}
/*Background fade in speed*/
:root {
  --fadein-speed: 0.25s;
}

/* desktop */
:root {  
  --space: 40px;
  --padding: 18px;

  --font-h1: 48px;
  --font-h2: 36px;
  --font-h3: 28px;

  --font-nav:22px;
  --font-body: 18px;
  --font-small: 15px;

  --line-height-tight: 1.15;
  --line-height-body: 1.55;
}
/* tablet */
@media (max-width: 900px)  {
  :root {
    --space: 32px;
    --padding: 17px;

    --font-h1: 40px;
    --font-h2: 32px;
    --font-h3: 26px;

    --font-nav:21px;
    --font-body: 17px;
    --font-small: 15px;

    --line-height-tight: 1.2;
    --line-height-body: 1.55;
  }
}
/*mobile*/
@media (max-width: 600px)  {
  :root {
    --space: 24px;
    --padding: 16px;

    --font-h1: 32px;
    --font-h2: 26px;
    --font-h3: 22px;

    --font-nav:20px;
    --font-body: 16px;
    --font-small: 14px;

    --line-height-tight: 1.25;
    --line-height-body: 1.6;
  }
}
/*micromobile*/
@media (max-width: 400px)  {
  :root {
    --space: 16px;
    --padding: 15px;

    --font-h1: 28px;
    --font-h2: 24px;
    --font-h3: 20px;

    --font-nav:20px;
    --font-body: 15px;
    --font-small: 13px;

    --line-height-tight: 1.3;
    --line-height-body: 1.6;
  }
}
/*Apply fonts*/
h1 {
  font-size: var(--font-h1);
  line-height: var(--line-height-tight);
}
h2 {
  font-size: var(--font-h2);
  line-height: var(--line-height-tight);
}
p, li {
  font-size: var(--font-body);
  line-height: var(--line-height-body);
}
small {
  font-size: var(--font-small);
}
a {
  font-size: var(--font-nav);
  line-height: var(--line-height-tight)
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 8px;
}
/*Background Image*/
:root{
--bg-image: url('../Images/roman1.jpg');
--bg-welcome: url('../Images/ren2.jpg');
--bg-bikes: url('../Images/roman1.jpg');
--bg-salesforce: url('../Images/ren3.jpg');
--bg-aipowered: url('../Images/ren7.jpg');
--bg-howitworks: url('../Images/ren4.jpg');
--bg-aboutme: url('../Images/train.jpg');
}

/*----------Universal Settings----------*/
body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/*Link Settings*/

a {
  color:var(--text-color); 
  text-decoration: none; /*removes underline */
  transition: text-shadow .25s ease-in;
  transition: text-shadow .4s ease-out;
}
a:hover {
  text-shadow:
  0 0 6px rgba(255, 255, 255, .30),
  0 0 20px rgba(19, 75, 143, 1),
  0 0 35px rgba(19, 75, 143, 1),
  0 0 50px rgba(19, 75, 143, .75);
}

/*Opacity Switch*/
body.bg-loaded::before {
  opacity: 1;
}

/*----------Full Page Classes----------*/
.welcome-page {
  background-color: var(--bgdefault-color);
  --bg-image: var(--bg-welcome); /*default background image*/
  z-index: 0;
  min-height: 100vh;
  padding-top: var(--space);
  width: 100%;
  overflow-y: hidden;
}

.bikes {
  background-color: var(--bgdefault-color);
  --bg-image: var(--bg-bikes); /*default background image*/
  z-index: 0;
  min-height: 100vh;
  padding-top: var(--space);
  width: 100%;
  overflow-y: hidden;
}

.howitworks-page {
  background-color: var(--bgdefault-color);
  --bg-image: var(--bg-howitworks); /*default background image*/
  z-index: 0;
  min-height: 100vh;
  padding-top: var(--space);
  width: 100%;
  overflow-y: hidden;
}

.salesforce-page {
  background-color: var(--bgdefault-color);
  --bg-image: var(--bg-salesforce); /*default background image*/
  z-index: 0;
  min-height: 100vh;
  padding-top: var(--space);
  width: 100%;
  overflow-y: hidden;
}

.aipowered-page {
  background-color: var(--bgdefault-color);
  --bg-image: var(--bg-aipowered); /*default background image*/
  z-index: 0;
  min-height: 100vh;
  padding-top: var(--space);
  width: 100%;
  overflow-y: hidden;
}

.about-me {
  background-color: var(--bgdefault-color);
  --bg-image: var(--bg-aboutme); /*default background image*/
  z-index: 0;
  min-height: 100vh;
  padding-top: var(--space);
  width: 100%;
  overflow-y: hidden;
}

.page-content {
  display: flex;
  flex-direction: column;
  justify-content: top;  
  /*height set by javascript*/
  padding-top: var(--space);
  padding-bottom: var(--space);
  box-sizing: border-box;
  padding-left: var(--space);
  padding-right: var(--space);
  overflow: hidden;
}
@media (max-width: 700px) {
  .page-content {
    padding-top: var(--space);
    padding-bottom: var(--space); 
    margin: 0px auto; /* center */
    align-items: flex-start;
    flex-direction: row;
  }
}

/*----------ToolBar Classes----------*/
/*Both desktop and mobile*/
.nav {
  width: 100%;
}

/*Desktop toolbar*/
.nav-links {
  list-style-type: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  background-color: var(--textpanels-color);
  /*background-color: rgba(51, 51, 51, 0.75);*/
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
  width: 100%;
}

.nav-links li a {
  display: block;
  color: var(--text-color);
  text-align: center;
  padding: var(--padding) var(--padding);
  text-decoration: none;
}

/*Mobile Menu*/
/*Mobile Menu Container*/
.nav-header {
  width:100%;
  align-items: center;
  padding: 14px 2.8vw;
  display: none; /*Hidden by default (desktop)*/
  background-color: var(--textpanels-color);
  backdrop-filter: blur(2px);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1),
  0 0 6px rgba(0, 0, 0, 0.8);
}
/*Menu Header*/
.nav-title {
  color: white;
  font-weight: bold;
  font: 80px;
}
/*Hamburger Button*/
.nav-toggle {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
}

/*Mobile Switch*/
@media (max-width: 700px) {

  .nav-header {
    display: flex; /* show hamburger */
  }

  .nav-links {
    display: none; /* hide links by default */
    position: absolute;
    flex-direction: column;
    margin-left:.25vw;
    gap: 12px;
    background-color: rgba(40, 70, 110, .85);
    /*
    outline-color: rgba(51, 51, 51, 1);
    outline-width: .25vw;
    outline-style: solid;*/
    outline-color: rgba(40, 70, 110, .85);
    outline-width: .25vw;
    outline-style: solid;
    max-width: 60vw;
    z-index: 10;
    backdrop-filter: blur(2px);
    box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
  }
  .nav-links.show {
    display: flex; /* show when toggled */
  }
}

/*----------Page Specific Classes----------*/

/*Welcome Page*/
.welcome-page::before {
  background-color: var(--bgdefault-color);
  opacity: 0;
  transition: opacity var(--fadein-speed) ease-in;
  content: "";
  position: fixed;
  inset: 0;
  background:
    var(--bg-image) center/cover no-repeat fixed;
  z-index: -1;
}

.welcome-text-box {
  display: flex;
  background-color: var(--textpanels-color);
  padding: var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  max-width: 475px;
  text-align: left;
  line-height: 1.25;
  backdrop-filter: blur(1px);
  flex-direction: column;
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
}

@media (max-width: 980px) {
  .welcome-text-box {
    margin: var(--space) var(--space); /* mobile */
  }
}

.welcome-text-box h1 {
margin-top: 0;
}

/*-----ML Predictions Page-----*/
.bikes::before {
  background-color: var(--bgdefault-color);;
  opacity: 0;
  transition: opacity var(--fadein-speed) ease-in;
  content: "";
  overflow: hidden;
  position: fixed;
  inset: 0;
  background:
    var(--bg-image)  center/cover no-repeat;
  z-index: -1;
}

.bike-layout {
  display: flex;
  gap: var(--space); /* space between left and right columns */
  overflow: hidden;
  height: 100%;
  max-width: 100%;
}

.bike-toc {
  width: 25%;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  background-color: var(--textpanels-color);
  padding: var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  /*max-width: 900px;*/
  text-align: left;
  line-height: 1.25;
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
}
@media (max-width: 700px) {
  .bike-toc {
    display: none;
    width: 0;        
    padding: 0;
  }
}
/*Indents subsection in table of contents*/
.subsection {
    display: block;
    margin-left: 20px;     
    margin-top: 4px;       
}

.bike-content {
  scroll-padding-top: 80px;
  width: 65%;
  overflow-y: auto;
  background-color: var(--textpanels-color);
  padding: var(--padding) var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  height:100%;
  text-align: left;
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);

}
@media (max-width: 700px) {
  .bike-content {
    width: 100%;       
  }
}

/*-----AI Powered Marketing-----*/
.aipowered-page::before {
  background-color: var(--bgdefault-color);;
  opacity: 0;
  transition: opacity var(--fadein-speed) ease-in;
  content: "";
  position: fixed;
  inset: 0;
  background:
  /*linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),*/
    var(--bg-image) center/cover no-repeat fixed;
  z-index: -1;
}
body.bg-loaded::before {
  opacity: 1;
}

.aipowered-layout {
  display: flex;
  gap: var(--space); /* space between left and right columns */
  overflow: hidden;
  height: 100%;
  max-width: 100%;
}

.aipowered-toc {
  width: 25%;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  background-color: rgba(40, 70, 110, .85);
  padding: var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  /*max-width: 900px;*/
  text-align: left;
  line-height: 1.25;
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
}
@media (max-width: 700px) {
  .aipowered-toc {
    display: none;
    width: 0;        
    padding: 0;
  }
}
/*Indents subsection in table of contents*/
.subsection {
    display: block;
    margin-left: 20px;     
    margin-top: 4px;       
}

.aipowered-content {
  scroll-padding-top: 80px;
  width: 65%;
  overflow-y: auto;
  background-color: var(--textpanels-color);
  padding: var(--padding) var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  height:100%;
  text-align: left;
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);

}

@media (max-width: 700px) {
  .aipowered-content {
    width: 100%;       
  }
}

/*PDF Scroller*/
.pdf_scroller {
  display: flex;
  justify-content: center;
}

.download-btn {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/*-----Salesforce Rev Ops-----*/
.salesforce-page::before {
  background-color: var(--bgdefault-color);
  opacity: 0;
  transition: opacity var(--fadein-speed) ease-in;
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-image) center/cover no-repeat fixed;
  z-index: -1;
}

.Salesforce-layout {
  display: flex;
  gap: var(--space); /* space between left and right columns */
  overflow: hidden;
  height: 100%;
  max-width: 100%;
}

.Salesforce-toc {
  width: 25%;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  background-color: var(--textpanels-color);
  padding: var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  /*max-width: 900px;*/
  text-align: left;
  line-height: 1.25;
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
}
@media (max-width: 700px) {
  .Salesforce-toc {
    display: none;
    width: 0;        
    padding: 0;
  }
}
/*Indents subsection in table of contents*/
.subsection {
    display: block;
    margin-left: 20px;     
    margin-top: 4px;       
}

.salesforce-content {
  scroll-padding-top: 80px;
  width: 65%;
  overflow-y: auto;
  background-color: var(--textpanels-color);
  padding: var(--padding) var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  height:100%;
  text-align: left;
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);

}

@media (max-width: 700px) {
  .salesforce-content {
    width: 100%;       
  }
}

/*-----How It Works Page-----*/
.howitworks-page::before {
  background-color: var(--bgdefault-color);
  opacity: 0;
  transition: opacity var(--fadein-speed) ease-in;
  content: "";
  position: fixed;
  inset: 0;
  background:
    var(--bg-image) center/cover no-repeat fixed;
  z-index: -1;
}

.howitworks-text-box {
  display: flex;
  background-color: var(--textpanels-color);
  padding: var(--padding);
  border-radius: 8px;
  color: var(--text-color);
  max-width: 475px;
  text-align: left;
  line-height: 1.25;
  backdrop-filter: blur(2px);
  flex-direction: column;
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
}
@media (max-width: 700px) {
  .howitworks-text-box {
    margin: var(--space) var(--space);
  }
}

.howitworks-text-box h1 {
margin-top: 0;
}
/*About Me Page*/
.about-me::before {
  background-color: var(--bgdefault-color);
  opacity: 0;
  transition: opacity var(--fadein-speed) ease-in;
  --bg-image: var(--bg-aboutme);
  content: "";
  position: fixed;
  inset: 0;
  background:
    var(--bg-image) center/cover no-repeat;
  z-index: -1;
}

.about-layout {
    display: flex;
    gap: var(--space);
    height: 100%;
    width: 100%;
    overflow:hidden;
}
@media (max-width: 700px) {
  .about-layout {
    flex-direction: column;
    overflow: auto;
  }
}

.about-text-box {
  background-color: var(--textpanels-color);
  padding: 24px;
  border-radius: 8px;
  color: var(--text-color);
  text-align: left;
  backdrop-filter: blur(2px);
  box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.35),
  0 0 12px rgba(255, 255, 255, 0.06);
}
@media (max-width: 700px) {
  .about-text-box {
    overflow-y: auto;
  }
}
.about-image {  

    margin-top: auto;
    margin-bottom: auto;
    align-self: center;
}
.about-image img {  
    border-radius: 12px;  
    display: block;
    outline: 4px solid rgba(51, 51, 51, 0.85);
    outline-offset: -4px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
    margin-top: auto;
    margin-bottom: auto;
    align-self: center;
}
@media (max-width: 700px) {
  .about-image img {
  max-height: 35vh;
  width: auto;
  margin: 0 auto;
    }
}

.about-header {
  margin-top: 0;
  margin-bottom: 8px;
}