:root {
    --lightRed: #FF877D;
    --darkRed: #D34E59;
    --darkestRed: #B42D38;
    --lightTan: #FDF6F7;
    --brightRed: #CC3541;

    --outlineColor: var(--lightRed);
    --outlineSize: 3px;
    --outlineSizeNegative: calc(var(--outlineSize) * -1);
    --backgroundColor: white;

    --navBarHeight: 10vh;
    --logoHeight: 4.5vh;

    --buttonHeight: 10vh;
    --buttonWidth: calc(var(--buttonHeight) * 2.4);
}

html {
    background-color: var(--darkRed);
}

body {
    margin: 0;
    font-family: "Jost", sans-serif;
}

h1 {
    font-weight: 400;
 }

.redOutline {
    font-size: 128px;
    font-family:'Playfair Display',serif;
    color: transparent;
    paint-order: stroke fill;
    -webkit-text-stroke: 4px var(--lightRed)
    /*text-shadow:*/
    /*        var(--outlineSizeNegative) var(--outlineSizeNegative) 0 var(--outlineColor),*/
    /*        var(--outlineSize) var(--outlineSizeNegative) 0 var(--outlineColor),*/
    /*        var(--outlineSizeNegative) var(--outlineSize) 0 var(--outlineColor),*/
    /*        var(--outlineSize) var(--outlineSize) 0 var(--outlineColor);*/
}

svg {
    height: 25vh;
    width: 100%;
}

.firstImg {
    width: 100%;
    height: auto;
}

.lastImg {
    width: 100%;
    height: auto;
    max-height:57vh;
}

/*Custom Classes*/
.VSection {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.HSection {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flameImage {
    height: 35vh;
    width: auto;
}

/*Custom Flex Classes*/
.spaceBetween {
    justify-content: space-between;
}

.spaceAround {
    justify-content: space-around;
}

/*Custom Color Classes*/
.lightRed {
    background-color: var(--lightRed);
}

.darkRed {
    background-color: var(--darkRed);
}

.darkestRed {
    background-color: var(--darkestRed);
}

.brightRed {
    background-color: var(--brightRed);
}

.lightTan {
    background-color: var(--lightTan);
}

.whiteToNoneGradient {
    width: 100%;
    height: 100%;
    fill: linear-gradient(0deg, #FDF6F7 0%, rgba(255, 255, 255, 0.00) 49.84%);
}

.redToDarkRedGradient {
    background: linear-gradient(0deg, rgba(207, 77, 85, 0.00) 0%, #812028 100%);
}

/*Div elements for multilayer*/
.imageContainer {
    position: relative;
    width: 100%;
}

.imageContainer img {
    display: block;
    width: 100%;
    height: auto;
}

.whiteGradientOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%; /* Adjust gradient height as needed */
    background: linear-gradient(0deg, var(--lightTan) 0%, rgba(255, 255, 255, 0.00) 49.84%);
}

/*Custom buttons for section two*/
.custom-button {
    background-color: var(--darkRed); /* Green */
    width: var(--buttonWidth);
    height: var(--buttonHeight);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:none;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 10px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    /*The text inside button*/
    color: white;
    font-family: "Jost", sans-serif;
    font-size: 3.7vh;
    font-style: normal;
    font-weight: 300;
    line-height: normal;

}

/*Changes button color on hover*/
.custom-button:hover {
    background-color: var(--darkestRed);
}

/*Triangle Section stuff*/

.triangle {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.navBar {
    height: var(--navBarHeight);
    padding: 0;

    position: fixed;
    top: 0;

    z-index: 1;


}

.navBar .left {
    display: flex;
    flex-direction: row;
}

.navBar .right {
    float: right;
}

.navBar img {
    padding: 10px 10px 10px 10px;
    max-height: var(--logoHeight);
    width: auto;
}

.navBar button {
    background-color: transparent; /* Change to transparent */
    width: calc(var(--navBarHeight));
    height: var(--navBarHeight);

    /*Display text inside*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:none;
    flex-shrink: 0;
    cursor: pointer;

    /*The text inside button*/
    color: white;
    font-family: "Jost", sans-serif;
    font-size: 2.5vh;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.navBar button:hover {
    background-color: white;
    color: var(--darkestRed);
}

/*Remove blue lines from links*/
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

/*Tithely Image*/
.tithelyImage {
    width: 35%;
    height: auto;
    padding: 20px;
    max-height: 39vh;
    max-width: 39vh;
}

/*Styles for the video on the watch.html page*/
.video-container {
    max-width: 800px;
    margin: 20vh auto 0;
    background-color: var(--lightTan);
    color: white;
    /* Makes it a rounded rect*/
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.video-title {
    padding: 16px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: var(--lightRed);
}
.video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-description {
    padding: 16px;
    font-size: 0.9em;
    color: #333;
}
#loading {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #666;
}

/*Link button share*/
.linkbutton::after {
    content: url("svg/link-out-arrow.svg");
    padding-left: 2px;
	position: relative;
	top: 2px;
	/* no easy way to resize image? */
}

/*Maps*/
.map {
    border: 10px double var(--lightRed);
}
  
/*Collage Image*/
.collageImage {
    width: 50%;
    height: 100%;
}

.pastorImage {
    width: 75%;
    height: auto;
    padding: 20px;
    border-radius: 45px;
}

#beliefsSection #pastorImage{
    width: 50%;
}

#beliefsSection #beliefText{
    width: 50%;
}

#doubleButton #button1 {
    order: -1;
}

@media screen and (max-width: 768px) {
    /* Adjust root variables for mobile */
    :root {
        --navBarHeight: 8vh;
        --logoHeight: 4vh;
        --buttonHeight: 8vh;
        --buttonWidth: calc(var(--buttonHeight) * 2);
    }

    /* Adjust text sizes */
    .redOutline {
        font-size: 64px; /* Reduce the large outlined text size */
    }

    /* Adjust image sizes */
    svg {
        height: 20vh; /* Slightly smaller SVGs on mobile */
    }

    .flameImage {
        height: 20vh; /* Reduce flame image size */
    }

    /* Adjust custom buttons */
    .custom-button {
        margin: 10px 0; /* Add some vertical spacing between stacked buttons */
        font-size: 3vh;
    }

    /* Navbar adjustments */
    .navBar button {
        font-size: 2vh;
    }

    /* Image adjustments */
    .tithelyImage {
        width: 60%; /* Larger relative width on mobile */
        padding: 10px;
    }

    .pastorImage {
        width: 90%; /* Larger relative width on mobile */
        padding: 10px;
        border-radius: 25px; /* Slightly smaller border radius */
    }

    .collageImage {
        width: 100%; /* Full width on mobile */
    }

    /* Video container adjustments */
    .video-container {
        margin: 10vh auto 0;
        width: 100%; /* Almost full width on mobile */
    }

    /* Map adjustments */
    .map {
        border-width: 5px; /* Thinner border on mobile */
        width: 95%; /* Almost full width */
    }

    /* Gradient overlay adjustment */
    .whiteGradientOverlay {
        height: 50%; /* Adjust gradient height for mobile */
    }

/*    Fix the second section*/
    #doubleButton {
        flex-direction: column;
    }
    #doubleButton img {
        order: -1;
    }

/*    Fix the time section*/
    #timeSection {
        flex-direction: column;
    }

    #timeSection img {
        order: -1;
    }

    #timeSection .VSection {
        margin: 0;
    }
    /*Fix the beliefs section*/
    #beliefsSection {
        flex-direction: column;
    }

    #beliefsSection #pastorImage{
        width: 100%;
    }

    #beliefsSection #beliefText{
        width: 100%;
    }

/*    Get rid of the gradient on mobile*/
    .redToDarkRedGradient {
        background: linear-gradient(0deg, rgba(207, 77, 85, 0.00) 0%, #812028 100%);
    }

    .VSection {
        padding: 16px;
    }

}