* {
    margin: 0;
    padding: 0;
}

/* smooth scrolling via CSS; replaces smooth-scroll library */
html {
    scroll-behavior: smooth;
}
/* DEV NOTE: height of nav-bar is automatically set to 74px by Bootstrap, must adjust scroll margins to compensate for smooth scroll */
.components-white{scroll-margin-top: 74px;}
.components-grey {scroll-margin-top: 74px;}

body {
    /* DEV NOTE, CORRELATION #PCR1001: bootstrap-5.2.0.min.css overrides font-family in style_pre.css, must move to style_post.css */
    /* font-family: sans-serif; */
    background-color: #888;
    -webkit-font-smoothing: antialiased;
}

/* Navigation Bar, Keep Sticky At Top Of Page & Set Background Gradient To Match Page */
#nav-bar {
    position: sticky;
    top: 0;
    z-index: 10;
}

.navbar {
    background: linear-gradient(to right, #1723b1,#58f0ff);
    padding: 0 !important;
}

/* Boostrap-Specific Vertical Alignment */
.vertical-center {
    display: flex; 
    align-items: center; 
    flex-wrap: wrap;
}

/* Rounded Corners, Allows Smaller JPG Files Instead Of Transparent PNG Files */
.round {
    border-radius: 50%;
}

.rounded-all {
    border-radius: 50px;
}

.rounded-lean-left {
    border-radius: 40px 120px 40px 120px;
}

.rounded-lean-right {
    border-radius: 120px 40px 120px 40px;
}

/* Minimally Intrusive Copyright & Trademark Notices */
.copyright-notice {
    color: #cccccc;
    text-decoration: none;
    font-style: italic;
    font-size: 75%;
}

/* no special color or underline-on-hover for links inside copyright-notice spans/divs */
.copyright-notice a:link, .copyright-notice a:visited {
    color: #cccccc;
    text-decoration: none;
}

/* Quotes */
a.fortune:link,
a.fortune:visited,
a.fortune:hover,
a.fortune:active { color: white; text-decoration: none; font-size: 150%; }

.quote{font-style: italic;}
a.credit:link,
a.credit:visited,
a.credit:hover,
a.credit:active { color: white; text-decoration: none; }

/* Logo Resize */
.navbar-brand img{height: 4rem;padding-left: 3rem;}
.navbar-nav{margin-right: 3rem;}
.navbar-nav li{padding: 0 1rem;}
.navbar-nav li{padding: 0 1rem;}
/* DEV NOTE, CORRELATION #PCR1000: "float: right" causes navbar hover dropdown to appear over top of original nav-item instead of below */
.navbar-nav .nav-item .nav-link{color: #fff !important; font-weight: 600; /* float: right; */ text-align: left; }
.navbar-nav .nav-item .nav-link:hover{color: #1723b1!important;}
.fa-bars{color: #fff !important; font-size: 25px !important;}
.navbar-toggler{outline: none !important;}

/* Banner */
.banner{background: linear-gradient(to right, #1723b1,#58f0ff);color: #fff; padding-top: 0%;}
.promo-title{font-size: 3rem; font-weight: 600; margin-top: 0.5em;}
.join-title{font-size: 1.44rem;}
.link-play{text-decoration: none;}
.link-play:hover{color: #58f0ff;text-decoration: none!important;}
.play-btn{width: 45px;margin: 20px 0;margin-right: 2em;text-decoration: none !important;transition: transform 1.2s;}
.play-btn:hover{color: #444;text-decoration: none!important;transform: scale(1.2);}
.banner a{color: #fff; text-decoration: none!important;}
.lowered{margin-top: 4rem;}
.lowered-2rem{margin-top: 2rem;}
.lowered-1rem{margin-top: 1rem;}
.unlowered-1rem{margin-top: -1rem;}
.bottom-img{width: 100%;}

/* Overview Section */
#overview{padding: 50px 0;}
.overview-img{width: 130px; margin-top: 2rem;}
.overview{padding: 20px;}
.overview h4{padding: 0.5em; margin: 5px 0px 0px 0px; text-transform: uppercase;}
.title::after{
  content: '';
  background: linear-gradient(to right, #1723b1,#58f0ff);
  height: 8px;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 70px;
  transform: translateY(23px);}
#overview .btn-primary{
  box-shadow: none;
  padding: 8px 25px;
  border: none; border-radius: 20px;
  background: linear-gradient(to right, #1723b1,#58f0ff);
  transition: transform 1.2s;
}
#overview .btn-primary:hover{transform: scale(1.2);}

/* Component Sections */
.components-white{                           padding-bottom: 3rem; padding-top: 3rem;}
.components-grey {background-color: #f8f9fa; padding-bottom: 3rem; padding-top: 3rem;}
.components-title{font-size: 1.6em; margin-top: 1.5em; font-weight: 600; text-align: center;}
.components-content{font-size: 1.2em; margin-top: 0.5em; font-weight: 600; text-align: center;}
.components ul li{margin: 10px 0;}
.components ul{margin-left: 20px;}

/* Endorsements Section */
#endorsements{margin: 30px 0;}
.endorsements{border-left: 3px solid #1723b1; margin: 50px 0px 10px 0px;}
.endorsements img{height: 60px;width: 60px;border-radius: 50%; margin: 0 10px;}
.user-details{display: inline-block; font-size: 12px;}

/* Footer */
#footer{background: linear-gradient(to right, #1723b1,#58f0ff); color: #fff;}
.footer-img{width: 100%;}
.footer-box{padding: 20px;}
.footer-box img{width: 4rem; margin-bottom: 20px;}
.footer-box .fa{
  margin-right: 8px;
  font-size: 25px;
  height: 40px;
  width: 40px;
  text-align: center;
  padding-top: 7px;
  border-radius: 2px;
  display: inline-block;
}
.footer-box .form-control{box-shadow: none !important; border: none; border-radius: 0; margin: 20px 0;}
.footer-box .btn-primary{
  box-shadow: none !important;
  width: 8rem;
  border: none; border-radius: 50px;
  background: linear-gradient(to right, #1723b1,#58f0ff);
  color: #fff;transition: transform 1.2s;
}
.footer-box .btn-primary:hover{transform: scale(1.2); color: #fff;}

/* Social Media Icons */
#social p{font-weight: 600; font-size: 16px; margin-top: 20px;}
#social .social-icons .svg-icons img{width: 23px;transition: transform .7s;margin-right: 1rem;}
#social .social-icons .svg-icons img:hover{transform: scale(1.2);}
.copyright{padding-top: 2%; font-size: 15px;}
.copyright a{text-decoration: none;color: #fff;}
.copyright a:hover{text-decoration: none;color: #1723b1;}

/* Rounded Tables */
.table_rounded th, .tb td { padding: 5px; }

/* header text centered */
.table_rounded th { background-color: lightblue; text-align: center; }

/* vertical (column) zebra stripes */
.table_rounded td:nth-child(odd) { background-color: #99F6FF; }
.table_rounded td:nth-child(even) { background-color: #CCFAFF; }

/* rounded corners only */
.table_rounded th:first-of-type { border-top-left-radius: 10px; }
.table_rounded th:last-of-type { border-top-right-radius: 10px; }
.table_rounded tr:last-of-type td:first-of-type { border-bottom-left-radius: 10px; }
.table_rounded tr:last-of-type td:last-of-type { border-bottom-right-radius: 10px; }