:root {
   --primary-sky: #7DB9E8;
   --secondary: #6EC1C2;
   --accent: #FF7F50;
   --light-gray: #F2F2F2;
   --white: #FFFFFF;
   --lavender: #C3AED6;
   --main-line-color: hsl(234, 62%, 86%);
   --side-line-color: hsl(350, 100%, 91%);
   --paper-color: hsl(0, 15%, 95%);
   --ink-color: hsl(0, 0%, 12%);
   --line-thickness: 3px;
   --top-space: 20px;
 }
 html, body {
   overflow-x: hidden;
 }
 body {
   background: linear-gradient(to bottom, var(--primary-sky), var(--white));
 }
 .btn-primary {
   background: var(--accent);
   border-color: var(--accent);
 }
 main {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
 main .pgCnt {
   flex-grow: 2;
 }
 h3 {
   font-size: 20px;
 }
 /* Header CSS */
 .navbar {
   background-color: var(--white);
 }
 .navbar-brand {
   display: flex;
   align-items: center;
 }
 .headLogo {
   height: 50px;
   width: auto;
 }
 .navTtl {
   font-size: 28px;
   font-weight: bold;
   margin-left: 15px;
   color: var(--primary-sky);
 }
 /* Dashboard CSS */
 .spiritCard {
   position: relative;
   background: linear-gradient(180deg, rgba(110, 193, 194, 1) 0%, rgba(255, 127, 80, 1) 100%);
   border-radius: 10px;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   transition: ease all 1s;
 }
 .spiritCard:hover {
   background: linear-gradient(180deg, rgba(110, 193, 194, 1) 0%, rgba(110, 193, 194, 1) 100%);
 }
 .spiritCnt {
   position: relative;
   background: #fff;
   margin-left: 8px;
 }
 .spiritImg {
   height: 300px;
   overflow: hidden;
 }
 @media screen and (min-width:1440px) {
   .spiritImg {
     height: 500px;
   }
 }
 #white-wave {
   margin-top: -100px;
 }
 .hero {
   padding: 30px 0;
 }
 .image-preview {
   display: flex;
   flex-wrap: wrap;
 }
 .image-preview img {
   max-width: 120px;
   margin: 5px;
 }
 .spiritTtl {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 15px;
   text-align: center;
   font-size: 18px;
   text-decoration: none;
   background: rgba(0, 0, 0, 0.5);
   font-weight: 700;
   color: #fff;
 }
 .spiritActions {
   position: absolute;
   top: 0;
   right: 0;
   padding: 10px;     
   background: rgba(0, 0, 0, 0.33);
   border-radius: 8px;
 }
 .spiritActions a {
   color: #fff;
   margin-left: 8px;
 }
 .spiritActions a:hover {
   color: #FF7F50;
 }
 /* Spirit Profile Styles */
 .profileImgs {
   position: relative;
   background: linear-gradient(180deg, rgba(110, 193, 194, 1) 0%, rgba(255, 127, 80, 1) 100%);
   border-radius: 10px;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   transition: ease all 1s;
   cursor: pointer;
   height: 100%;
 }
 .profileImgs:hover {
   background: linear-gradient(180deg, rgba(110, 193, 194, 1) 0%, rgba(110, 193, 194, 1) 100%);
 }
 .profileImg {
   position: relative;
   background: #fff;
   margin-left: 8px;
   width: 100%;
   height: 100%;
 }
 .profileImg img {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
 .popupHolder {
   position: fixed;
   top: 0;
   left: 150%;
   width: 100%;
   height: 100%;
   z-index: 999;
   background: rgba(0, 0, 0, 0.8);
   display: none;
   transition: ease all 1s;
 }
 .popupHolder.active {
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .popImg {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 /*Mobile Nav */
 .mobileNav {
   display: flex;
   justify-content: space-around;
   list-style: none;
   margin: 0;
   padding: 0;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: #fff;
   border-top: 1px solid #ccc;
 }
 .mobileNav li {
   width: 25%;
 }
 .mobileNav li.wide {
   width: 50%;
 }
 .mobileNav li a {
   padding: 15px 0;
   display: block;
   text-transform: uppercase;
   border-right: 1px solid #ccc;
   text-align: center;
   font-weight: 700;
   color: #333;
   text-decoration: none;
 }
 .mobileNav li a:first-of-type {
   border-left: 1px solid #ccc;
 }
 /* Footer CSS */
 footer {
   background-color: var(--primary-sky);
   color: var(--white);
   margin-bottom: 55px;
 }
 .formFlex {
   display: flex;
   flex-wrap: nowrap;
 }
 .formFlex input {
   margin-right: 15px;
   width: 80%;
 }
 .formFlex .btn {
   margin-bottom: 0;
   height: 100%;
 }
 .success {
   padding: 12px;
   margin: 30px 0;
   background: #06cc48;
   color: #fff;
   text-align: center;
   font-size: 18px;
   font-weight: bold;
 }
 .error {
   padding: 12px;
   margin: 30px 0;
   background: #db0f0f;
   color: #fff;
   text-align: center;
   font-size: 18px;
   font-weight: bold;
 }
.sProfile{
    position:relative;
}
.sProfile h2{
    margin-bottom:1rem;
}
.paper {
  background: var(--paper-color);
    border-radius:2px;
    padding: 1.5rem 1rem 1rem 1.5rem;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-color);
    background-image: /* the red line */ linear-gradient(90deg, transparent, transparent 1rem, var(--side-line-color) 1rem, var(--side-line-color) 1.25rem, transparent 1.25rem), /* The top space */ linear-gradient(var(--paper-color), var(--paper-color) var(--top-space), transparent var(--top-space)), /* the blue lines */ repeating-linear-gradient(transparent, transparent calc(1lh - var(--line-thickness)), var(--main-line-color) calc(1lh - var(--line-thickness)), var(--main-line-color) 1lh, transparent 1lh);
    box-shadow: 0 0 1rem rgb(0 0 0 / 0.25);
    margin-bottom:2rem;
}
.paper p{
    margin-bottom:0;
}
.paper h3{
    margin-bottom:3px
}