/*Fonts imported from google fonts*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&family=Open+Sans:wght@600&family=Oswald:wght@700&display=swap');

/* Removing browser defaults. Code taken form Love Running project*/
* {
    border: none;
    margin: 0;
    padding: 0;
}

/*Generic style rules to avoid repetition and remove <br> tags from HTML code*/
a:hover {
    cursor: pointer;
}

.line-break-below {
    padding-bottom: 0.875rem;
}

.line-break-top-bottom {
    padding: 0.875rem 0;
}

.line-break-above {
    padding-top: 0.875rem;
}

.primary-bg-color{
    background-color: #06304b;
}

.center-text {
    text-align: center;
}

.text-left {
    text-align: left;
}

/*set defaults for the page body and header working from a default of 320px width to scale up from*/
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color:#fff;
    background-color: #06304b;
}

/*header style rules*/
header {
    padding: 10px 0 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #06304b;
    padding-bottom: 0.5rem;
}

.title-container {
    display: flex;
    padding-bottom: 10px;
    justify-content: space-evenly;
    flex-direction: row;
    align-content: stretch;
    align-items: center;
}

.title-anchor {
    text-decoration: none;
}

.title {
    font-family:'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 130%;
    padding: 0 0.3125rem;
    
}

.header-image-left {
    height: 4.375rem;
    width: 4.375rem;
    display: none;
}

.header-image-right {
    height: 4.375rem;
    width: 4.375rem;
}

/*Navigation bar style rules*/
.nav-wrap {
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728,#fbf5b7 );
}

.nav-menu {
    font-family: 'DM Sans', sans-serif;
    display: flex;
    justify-content: center;
    font-size: 70%; 
    list-style-type: none;  
    height: 2.1875rem;
    align-items: center;
    text-transform: uppercase;
}

.nav-button {
    padding: 0.5625rem 0.5rem 0.4875rem;
    text-decoration: none;
    color: #000;
    border: 0.125rem solid transparent;
}

/*shows active page and style's menu button when interacted with*/
.active, .nav-button:hover {
    background-color: #06304b;
    color: #fff;
    border: 0.125rem solid #fff;
}

/*Container for all hero images*/
.hero-image-container {
    height: 400px;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.5rem;
}

/*Adds hero images to each page*/
.index-hero-image {
    background: url('../images/geshe-la-outside-temple.jpg') no-repeat center center;
}

.teachings-hero-image {
    background: url('../images/geshe-kelsang-gyatso-hero-image.jpg') no-repeat center center;
}

.community-hero-image {
    background: url('../images/community-hero-image.jpg') no-repeat center center;
    background-position-y: 100%;
}

.contact-hero-image {
    background: url('../images/contact-banner.jpg') no-repeat center center;
}

/*sets the rules for all hero images and links the keyframe rules to them*/
.hero-animation {
    height: 65%;
    width: 100%;
    background-size: cover;
    animation-name: hero-image-zoom;
    animation-duration: 5s;
    animation-fill-mode: forwards;    
}

/* creates the level of zoom for hero image */
@keyframes hero-image-zoom {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.1);
    }
}

/*Add a text overly to the hero images*/
.quote-background {
    display: grid;
    font-size: 55%;
    letter-spacing: 0.0625rem;
    height: 35%;
    font-family: 'DM Sans', sans-serif;
    color: #000;
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728,#fbf5b7);
    justify-content: center;
    align-content: space-evenly;
    padding: 0.3125rem 0.625rem;
    }

.quote {
    text-align: left;
    text-transform: capitalize;
}

.quote-author {
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}

/*styles for any text on the main text content*/
.main-heading {
    font-family: 'DM Sans', sans-serif;
    text-transform: capitalize;
    text-decoration: underline;
    padding-left:7%;
    padding-right: 7%;
}

.sub-heading {
    font-family: 'DM Sans', sans-serif;
    text-transform: capitalize;
}

.content {
    background-color: #cfebfd;
    color: #000;
    padding: 1.25rem 0;
}

.content p {
    padding: 1rem 7% 2rem;
    text-align: justify;
    max-width: 87.5rem;
    margin: 0 auto;
}

/*used ID to center last p tag on teachings page to override the .content p class*/
#center-p-on-teach-page {
    text-align: center;
}

/*second ID created for the same reason as above but on the about page*/
#center-p-on-about-page {
    text-align: center;
}

/*rules for anchor tag which are children ".content"*/
.content a {
    color:#000;
}

.content a:hover {
    color: #b38728;
}

/*content rules on form feedback-page*/
#form-feedback-content {
    background-color: #cfebfd;
    color: #000;
    padding: 1.25rem 0;
}

#form-feedback-content p {
    padding: 1rem 5% 2rem;
    text-align: center;  
}

#form-feedback-content a {
    color: #000;
}

/*figure elements, and their children on teachings page*/
#buddha-shakyamuni-fig, #guru-sumanti-fig, #buddha-maitreya-fig {
    height: 18.75rem;
    width: 18.75rem;
    margin: 0 auto;
}

#guru-sumanti-img {
    height: 18.375rem;
    width: 18.75rem;
    margin: 0 auto;
}

#buddha-shakyamuni-img {
    height: 17.375rem;
    width: 18.75rem;
    margin: 0 auto;
}

#buddha-maitreya-img  {
    height: 18.125rem;
    width: 18.75rem;
    margin: 0 auto;
}

.teaching-pg-figcap {
    font-size: 80%;
    font-style: italic;
    margin-top: 0.1875rem;
    text-transform: capitalize;
}

.teaching-pg-figcap {
    font-size: 80%;
    font-style: italic;
    margin-top: 0.1875rem;
    text-transform: capitalize;
}

/*figure elements and their children on community page*/
#temple-fig {
    height: 10%;
    width: 86%;
    margin: auto;
    border-radius: 1.875rem;
    max-width: 42.875rem;
    max-height: 27.9375rem;
}

#temple-img {
    height: 80%;
    width: 90%;
    margin-top: 0.9375rem;
    border-radius: 0.9375rem;
    max-width: 38.625rem;
    max-height: 24.8125rem;
}

#int-fest-fig, #work-hol-fig {
    height: 20%;
    width: 86%;
    margin: auto;
    border-radius: 1.875rem;
    max-width: 87.0625rem;
    max-height: 54.875rem;
}

#int-fest-img, #work-hol-img {
    height: 85%;
    width: 90%;
    margin-top: 1.4375rem;
    border-radius: 0.9375rem;
    max-width: 78.3125rem;
    max-height: 52.0625rem;
}

#fig-caption-temple, #fig-caption-fest, #fig-caption-work {
    font-size: 65%;
    color: #fff;
    font-weight: bold;
    text-transform: capitalize;
    padding-bottom: 5px;
}

/*images relating to external media/downloads*/
#modern-buddhism-vid {
    width: 85%;
    max-width: 35rem;
    height: 19.688rem;
    border-radius: 1.875rem;
    padding: 0.625rem;
}

#modbudd-ebook {
    width: 18.75rem;
    height: 12rem;
}

#tyl-download {
    width:18.75rem;
    height: 15.625rem;
    margin-bottom: 2rem;
}

/*Styling for the form on contact.html"*/
#contact-form {
    display: grid;
    justify-content: center;
    color: #fff;
    width: 85%;
    margin: 0 auto;
    border-radius: 1.875rem;
    padding: 1.875rem 0.75rem;
    font-weight: bold;
    max-width: 31.25rem;
    border: 0.25rem solid #bf953f;
}

#name, #email, #message {
    line-height: 1.875rem;
    width: 100%;
    margin: 0 auto;
    font-size: 100%;
    font-family: 'Open Sans', sans-serif;
    border-radius: 0.625rem;
    text-align: center;
}

#p-in-form {
    padding: 1.5rem 0;
    font-size: smaller;
    text-align: center;
}

.mailing-list-options {
    font-size: smaller;
}

/*Form submit button and hover styling*/
#submit-btn {
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728,#fbf5b7);
    border-radius: 1.75rem;
    font-weight: 300;
    font-family: 'Open sans', sans-serif;
    font-size: larger;
    padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
    cursor: pointer;
    border: 0.0625rem solid #b38728;
}

#submit-btn:hover {
    background: linear-gradient(to right, #fcf6ba,#b38728,#fbf5b7,#bf953f);
}

/*Styling for the page footers*/
footer {
    color: #fff;
}

footer h3 {
    font-size: 1.67em;
    padding: 1rem;
}

footer h4 {
    font-size: 0.7rem;
    padding: 1rem;
}

/*style for the social media links*/
.social-media li {
    display: inline;
    list-style-type: none;
}

.social-media i {
    font-size: 160%;
    margin: 1%;
    color: #fff;
    padding: 0.3125rem;
}

/* Media queries */
/*for screen sizes over 360px and under 540px wide*/
@media (min-width: 360px) {
    
    /*style changes to the header*/ 
    header {
        justify-content: space-around;
    }

    /*Style changes to nav bar*/
    .nav-menu {
        font-size: 75%;
    }

    .nav-button {
        padding: 0.5rem 0.6875rem 0.4375rem;
    }

    /*Style changes to the contact form*/
    #contact-form {
        color: #fff;
        width: 85%;
        border: 5px solid #bf953f;
        font-size: 120%;
    }
    
    #name, #email, #message {
        line-height: 40px;
    }

    #p-in-form {
        font-size: 100%;
    }
}

/*for screen sizes over 540px and under 767px wide*/
@media (min-width: 540px) {

    /*Style changes to the header*/ 
    header {
        justify-content: space-evenly;
    }

    .header-image-left {
        display: inline;
    }

    .title {
        letter-spacing: 0.25rem;
        font-size: 165%;
    }

    /*Style changes to Navbar*/
    .nav-menu {
        font-size: 100%;
    }

    .nav-button {
        padding: 0.3125rem 0.9375rem;
    }

    /*Style changes to the hero-image container on each page*/
    .hero-image-container {
        height: 28.125rem; 
    }

    .index-hero-image {
        height: 95%;
    }

    .teachings-hero-image {
        height: 95%;
    }

    .community-hero-image {
        height: 95%;
    }

    .contact-hero-image {
        height: 95%;
    }

    /*style changes to the quote overlay on the hero image*/
    .quote-background {
        height: 25%;
        font-size: 70%;
        position: absolute;
        background: linear-gradient(to bottom, rgba(191, 149, 63, 0.7), rgba(252, 246, 186, 0.95), rgba(179, 135, 40, 0.95),rgba(251, 245, 183, 0.7) );
        bottom: 0.625rem;
        right: 0;
        padding: 0 0.625rem;
    }

    .content {
        padding-bottom: 1.5625rem;
    }

    .content p {
        padding: 1rem 5% 1.5625rem;
        text-align: left;

    }

    /*Style change to figures and the contained images on the community page*/
    #temple-fig {
        width: 90%;
    }

    #geshe-brazil, #at-work {
        height: 16.625rem;
        width: 25rem;
        padding: 2.1875rem;
    }

    /*Style changes to the contact form*/
    #contact-form {
        border: 0.375rem solid #bf953f;
        padding: 1.875rem 0;
        max-width: 31.25rem;
        width: 100%;
    }

    #name, #email, #message {
       line-height: 2.5rem; 
    }
}

/*for screen sizes over 768px and under 979px wide*/
@media (min-width: 768px) {
    
    /*Style changes to the hear*/
    .header-image-left {
        height: 5.625rem;
        width: 5.625rem;
    }

    .title {
        font-size: 250%;
    }

    .header-image-right  {
        height: 5.625rem;
        width: 5.625rem;
    }

    /*style changes to the nav bar*/
    .nav-menu {
        font-size: 105%;
    }

    .nav-button {
        padding: 0.2813rem 2.5rem;
    }

    /*style changes to the hero image container*/
    .hero-image-container {
        height: 500px;  
    }

    .index-hero-image {
        height: 100%;
    }

    .teachings-hero-image {
        height: 100%;
    }

    .community-hero-image {
        height: 100%;
    }

    .contact-hero-image {
        height: 100%;
    }

    /*Style changes to the main content of the pages*/
    .content > p {
        padding: 1rem 13% 1.5625rem;
    }

    #ways-to-connect {
        display: block;
        justify-content: center;
        flex-wrap: wrap;
    }

    #sect-cont-work-fest-articles {
        display: flex;
        align-items: stretch
    }

    #working-hol, #int-festival {
        width: 45%;
        margin: 0 auto;
        border-radius: 1.875rem;
        background-color: #fff;
        padding-top: 1.25rem;
        max-width: 101.25rem;
    }

    /*Style changes to figure elements and their children on community page*/
    #temple-fig {
        width: 74%;
    }

    #int-festival p, #working-hol p {
        padding: 1rem 7% 1.5625rem;
    }

    #int-fest-fig, #work-hol-fig {
        margin: auto;
    }

    #int-fest-img, #work-hol-img {
        border-radius: 0.9375rem;
    }

    #fig-caption-community {
        font-size: 65%;
        color: #fff;
        font-weight: bold;
    }
}

/*for screen sizes over 979px and under 1200px wide*/
@media (min-width: 980px) {
    
    /*style change to the header*/
    .header-image-left {
        height: 6.25rem;
        width: 6.25rem;
    }

    .title {
        font-size: 300%;
    }

    .header-image-right {
        height: 6.25rem;
        width: 6.25rem;
    }

    /*Style changes to the nav bar*/
    .nav-menu {
        font-size: 135%;
    }

    .nav-button {
        padding: 0.0938rem 3.75rem;
    }

    /*style changes to the main content on the pages*/
    .content > p {
        padding: 1rem 15% 1.5625rem;
    }

    #temple-fig {
        width: 70%;
    }

    #fig-caption-fest, #fig-caption-work {
        font-size: 78%;
    }
}

/*for screen sizes over 1200px wide*/
@media (min-width: 1200px) {
    
    /*Style change to hero-container size*/
    .hero-image-container {
        height: 36.875rem;
    }

    /*style change to quote overlay*/
    .quote-background {
        position: absolute;
        right: 0;
    }

    /*style change to the navbar*/
    .nav-menu {
        font-size: 150%;
    }

    .nav-button {
        padding: 0px 5rem;
    }
}

@media (min-width: 1400px) {

    /*style change to the navbar*/
    .nav-menu {
        font-size: 150%;
    }
}