/*common and same for all pages*/
body {
          background-color: #F8EDA2;                      /*egg white*/
          margin: 0px 0px;
          font-family: 'Roboto Mono', monospace, serif;
}


/*logo link to home page style for index page and the other pages*/
#logo_index {
          width: 160px;
          height: 160px;
          position: absolute;
          float: left;
          display: block;
          margin-left: 20px;
}

#logo {
          width: 130px;
          height: 130px;
          float: right;
          margin-top: 50px;
          margin-right: 70px;
}

@media screen and (max-width: 919px) {      /*to adjust the logo based on the width of the page*/
         #logo {
                    width: 90px;
                    height: 90px;
         }
}

/*side navigation bar common to all blue&pink pages*/
aside nav {                         /*start of side navigation bar style*/
         position: fixed;
         z-index: 1000;
         top: 0;
         bottom: 0;
         width: 210px;
         height: 100%;
         background-color: #F29C50;                   /*light orange*/
         transform: translate3d(-210px, 0, 0);
         transition: transform 0.4s ease;
}
                
.active-nav nav {
         transform: translate3d(0, 0, 0);
}
                
nav ul {
         list-style: none;
         margin-top: 50px;
         font-size: 20px;                 
         padding: 8px 8px 8px 32px;
}
                
nav ul li a {
         text-decoration: none;
         display: block;
         color: #F8EDA2;
         padding: 10px 0;
         transition: 0.3s;
}
                
nav a:hover {
         color: #444;
}

nav a.active {
         color: #444;
} 
                
.nav-toggle-btn {
         display: block;
         position: absolute;
         left: 210px;
         width: 30px;
         height: 150px;
         margin-top: 150px;
         background-color: #F29C50;
         color: #F8EDA2;
         border: none;
         padding-left: 5px;
         padding-right: 5px;
         padding-top: 20px;
         text-decoration: none;
         text-align: justify;
         font-size: 25px;
         text-align:center;
         border-radius: 4px;
}
                
.nav-toggle-btn:hover {
         background-color: #444;
         color: #F8EDA2;           /*to keep the text egg white while hovering*/
}
                
.content {
         transition: transform 0.4s ease;
}
                
.active-nav .content {
         transform: translate3d(200px, 0, 0); 
}
                
@media screen and (max-height: 450px) {
         nav {padding-top: 10px;}
         nav a {font-size: 15px;}
}
/*end of side nav bar styling*/


/*index heading and blue&pink pages' headings + the h1 and h2*/
#index_heading {                                  /*the whole 'selfcare' + subtitle part*/
          height: 450px;
          background-color: #8999DB;
          color: #F8EDA2;
          text-align: center;
          padding-top: 40px;
          position: relative;
}

@media screen and (max-width: 1036px) {
         #index_heading {
                    height: 460px;            /*slight increase in height to leave space for the arrow with a slightly smaller window*/
         }
}

#page_heading_pink {                                  /*the whole page title + subtitle part*/
         height: 25%;
         color: #F8EDA2;
         padding-left: 60px;
         padding-bottom: 6%;
         padding-top: 3%;
         background-color: #F57B68;
}

#page_heading_blue {                                  /*the whole page title + subtitle part*/
         height: 25%;
         color: #F8EDA2;
         padding-left: 60px;
         padding-bottom: 6%;
         padding-top: 3%;
         background-color: #8999DB;
}



/*h1 style*/
h1 {                   /*index, blue&pink pages title style*/
          font-size: 110px;
          margin-bottom: 20px;
}

@media screen and (max-width: 588px) {      /*to adjust the writing 'selfcare' to a smaller window*/
         #index_heading h1 {
                    font-size: 70px;
         }
}

@media screen and (max-width: 756px) {      
         #page_heading_pink, #page_heading_blue h1 {
                    font-size: 70px;
         }
}

/*h2 style*/
h2 {                   /*page heading subtitle style*/
         padding-top: 30px;
}

/*back to top button of the blue&pink pages*/
#back_to_top_pink {
         clear: both;
         display: block;
         width: 110px;
         padding: 5px;
         text-decoration: none;
         color: #F8EDA2;
         background-color: #FF7575;     /*pink*/
         margin-left: auto;
         margin-right: auto;
}

#back_to_top_blue {
         clear: both;
         display: block;
         width: 110px;
         padding: 5px;
         text-decoration: none;
         color: #F8EDA2;
         background-color: #8999DB;     /*light blue*/
         margin-left: auto;
         margin-right: auto;
} 

#back_to_top_pink:hover {                             /*hovering effect on the button*/
         background-color: #444;  /*dark grey*/
}

#back_to_top_blue:hover {
         background-color: #444;  /*dark grey*/
}


/*footers of the index page and the other pages based on color*/
#footer_index {                  
          text-align: center;
          padding: 20px;
          color: #F8EDA2;            
          background-color: #8999DB;                     /*light blue*/
}

#footer_blue {
          text-align: center;
          padding: 30px;
          color: #F8EDA2;            
          background-color: #8999DB;                     /*light blue*/
          clear: both;
}

#footer_pink {
          text-align: center;
          padding: 30px;
          color: #F8EDA2;            
          background-color: #F57B68;                     /*pink*/
          clear: both;
}


/*start of solely index page styling*/
/*start of scroll down arrow styling*/
#arrow {
          width: 80px;
          height: 80px;
          
}

@media screen and (max-width: 1036px) {
         #arrow {
                    width: 50px;
                    height: 50px;
         }
}
/*end of scroll down arrow styling*/

.index_page_gallery {                                /*start of css of animated gallery with images that link to pages*/
            display: flex;
            width: 100%;
            padding: 4% 2%;
            box-sizing: border-box;
            height: 100vh;
          }
        
.box {
            flex: 1;
            overflow: hidden;
            transition: .5s;
            margin: 0 2%;
            box-shadow: 0 20px 30px rgba(0,0,0,.1);
            line-height: 0;
          }
          
.box img {
            width: 200%;
            height: calc(100% - 10vh);
            object-fit: cover; 
            transition: .5s;
          }
          
.box span {                                      /*images' headings or descriptions*/
            font-size: 3.8vh;
            display: block;
            text-align: center;
            height: 10vh;
            line-height: 2.6;
            clear:both;
            background-color: #F8EDA2;
            color: #8999DB;
          }
          
.box a {
          color: black;
          text-decoration: none;
}
          
.box:hover { flex: 1 1 50%; }                /*gallery animation*/
.box:hover > img {
            width: 100%;
            height: 90%;
          }                              /*end of gallery css*/
          
/*end of index page css*/


/*start of meditation & comfort music page's styling*/
/*styling of sections floating on the left*/
.odd {
         float: left;         
         display: block;
         width: 80%;
         margin-top: 20px;
         margin-bottom: 15px;
         margin-left: 5%;
         min-width: 450px;
}

.odd h3 {
         padding-left: 5%;
         padding-top: 10px;
         padding-bottom: 15px;
         font-size: 30px;
}


.odd .viddescription {
         padding: 10px;
         background-color: #F29C50;   /*light orange*/
         color: #F8EDA2;                  /*egg white*/
         display: block;
         width: 450px;
         margin-left: 10px;
         float: right;
         margin-top: 10px;
}

.odd iframe {              /*youtube video style*/
         padding-left: 10%;
         float: left;
         border: none;
}

/*styling of sections floating on the right*/
.even {
         float: right;                
         display: block;
         width: 80%;
         margin-top: 10px;
         margin-bottom: 10px;
         margin-right: 5%;
         min-width: 450px;
}

.even h3 {
         text-align: right;
         padding-right: 5%;
         padding-top: 10px;
         padding-bottom: 15px;
         font-size: 30px;
}

.even iframe {              /*youtube video style*/
         padding-right: 10%;
         float: right;
         border: none;
}

.even .viddescription {
         padding: 10px;
         background-color: #F29C50;
         color: #F8EDA2;
         display: block;
         width: 450px;
         float: left;
         margin-top: 10px;
}
/*end of meditation page's styling*/



/*start of comfort movies page's styling*/
.movie {
         float: left;
         display: block;
         width: 40%;
         margin-top: 20px;
         margin-bottom: 15px;
         margin-left: 7%;
         padding-bottom: 10px;
         min-width: 450px;
}

.movie h3 {
         padding-top: 10px;
         padding-bottom: 15px;
         font-size: 30px;
         text-align: center;
}


.movie .viddescription {
         background-color: #F29C50;
         color: #F8EDA2;
         display: block;
         width: 400px;
         margin-top: 10px;
         margin-left: 55px;
         margin-bottom: 10px;
         float: left;
         padding: 5px;
}

.movie iframe {              /*youtube video style*/
         padding-left: 80px;
         float: left;
}
/*end of comfort movies page's styling*/




/*start of teas page's styling*/
.teaodd {
         float: left;
         display: block;
         width: 80%;
         margin-top: 20px;
         margin-bottom: 15px;
         margin-left: 5%;
         padding-bottom: 10px;
         padding-top: 10px;
         min-width: 450px;
}

.teaodd h3 {
         width: 350px;
         display: block;
         margin-left: 10px;
         float: right;
         margin-top: 10px;
         margin-right: 10%;
         margin-bottom: 5px;
         padding-left: 10px;
         font-size: 30px;
}

.teaodd .teadescription {
         padding-left: 10px;
         background-color: #F29C50;   /*light orange*/
         color: #F8EDA2;                  /*egg white*/
         display: inline-block;
         width: 350px;
         margin-left: 10px;
         margin-right: 10%;
         float: right;
         margin-top: 5px;
}

.teaeven {
         float: right;
         display: block;
         width: 80%;
         margin-top: 20px;
         margin-bottom: 15px;
         margin-right: 5%;
         padding-bottom: 10px;
         padding-top: 10px;
         min-width: 450px;
}

.teaeven h3 {
         width: 350px;
         display: block;
         margin-left: 10%;
         margin-top: 10px;
         margin-bottom: 5px;
         padding-left: 10px;
         padding-right: 10px;
         font-size: 30px;
         text-align: left;
}

.teaeven .teadescription {
         padding-left: 10px;
         background-color: #F29C50;   /*light orange*/
         color: #F8EDA2;                  /*egg white*/
         display: block;
         width: 360px;
         float: left;
         margin-left: 10%;
         margin-top: 5px;
         margin-right: 10px;
}

/*image carousel css ahead*/
.carousel-container1, .carousel-container2, .carousel-container3, .carousel-container4, .carousel-container5, .carousel-container6 {
         width: 256px;
         overflow: hidden;
         position: relative;
}

.carousel-container1, .carousel-container3, .carousel-container5 {
         float: left;
         margin-left: 80px;
}
 
.carousel-container2, .carousel-container4, .carousel-container6 {
         float: right;
         margin-right: 80px;
}

.carousel-slide1, .carousel-slide2, .carousel-slide3, .carousel-slide4, .carousel-slide5, .carousel-slide6 {
         display: flex;
         width: 100%;
         height: 256px;
}
                
#prevBtn1, #prevBtn2, #prevBtn3, #prevBtn4, #prevBtn5, #prevBtn6 {
         position: absolute;
         top: 50%;
         z-index: 10;
         left: 10%;
         font-size: 30px;
         color: black;
         opacity: 0.7;
         cursor: pointer;
}
#nextBtn1, #nextBtn2, #nextBtn3, #nextBtn4, #nextBtn5, #nextBtn6 {
         position: absolute;
         top: 50%;
         z-index: 10;
         right: 5%;
         font-size: 30px;
         color: black;
         opacity: 0.7;
         cursor: pointer;
} 
/*end of teas page's styling*/




/*start of oils page's styling*/
.oil {
         float: left;
         display: block;
         width: 40%;
         margin-top: 20px;
         margin-bottom: 15px;
         margin-left: 7%;
         padding-bottom: 10px;
         min-width: 450px;
}

.oil h3 {
         padding-top: 10px;
         padding-bottom: 15px;
         font-size: 30px;
         text-align: center;
}


.oil .description {
         background-color: #F29C50;
         color: #F8EDA2;
         display: block;
         width: 400px;
         margin-top: 10px;
         margin-left: 55px;
         margin-bottom: 10px;
         float: left;
         padding: 5px;
}

.oil img {              /*oil image style*/
         padding-left: 80px;
         float: left;
}
/*end of oils page's styling*/