@font-face {
    font-family: 'Darlington Demo';
    src: url('/fonts/signaturefont.ttf') format('ttf'),
         url('/fonts/DarlingtonDemo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html {
  scroll-behavior: smooth;
}

body {
	background-color: #FFF8E6;
	margin: 0;
    padding-left: 3%;
    padding-right: 3%;
    height: 100vh;
}
a{
	text-decoration: none;
	color: inherit;
}
.headertitles {
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.75em;
    position: relative;
	padding-bottom: 3px;
    overflow: hidden;
    z-index: 1000;
}
footer span .headertitles {
	padding-bottom: 2px;
	
}
.spaced {
	letter-spacing: 0.20em;
}
.menu {
	float:right;
}
.headertitles::before{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%; /* this makes the line start from the left and expand to the right */
    background: #000; /* thick black line */
    height: 0.2em; /* thickness of the line */
    transition: right 0.3s ease; /* animation effect */
}
footer span .headertitles::before{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%; /* this makes the line start from the left and expand to the right */
    background: #000; /* thick black line */
    height: 0.15em; /* thickness of the line */
    transition: right 0.3s ease; /* animation effect */
}
.headertitles:hover::before {
    right: 0; /* when hovered, the line covers the full width */
}
.headertitles.spaced:hover::before {
    right: 0.2em; /* when hovered, the line covers the full width */	
}
header {
    position: fixed;
    top: 4%;
    z-index: 1000; /* Ensures the footer is on top of other content */
	justify-content: space-between; /* space elements apart */
	display:flex;
    width: 94%;
}
footer {
    position: fixed;
    bottom: 4%;
    z-index: 1000; /* Ensures the footer is on top of other content */
	font-family: 'Libre Baskerville', serif;
	font-size: 0.75em;
	font-weight: 200;
	justify-content: space-between; /* space elements apart */
	display:flex;
    width: 94%;
}

.content {
    text-align-last: center;
    align-items: center;
    justify-content: center;
    margin-bottom: auto; /* this helps push content down if it exceeds viewport */
	padding-top: calc(50vh - 12.5vw);
}
.centre-heights {
	height: 25vw;
}
.centre {
    position: relative;  /* Sets a reference point for the absolutely positioned child elements */
    display: inline-block;  /* Allows the container to size to its content */
	margin: auto 0;
}

.backdrop {
    font-family: 'Darlington Demo', sans-serif;
    opacity: 5%;
    font-size: 15vw;
    z-index: -1;  /* Ensures the text is behind the image */
}

.centered-image {
    position: absolute;  /* Takes the image out of the document flow */
    top: 50%;  /* Aligns the top edge of the image to the center of the container */
    left: 50%;  /* Aligns the left edge of the image to the center of the container */
    transform: translate(-50%, -50%);  /* Offsets the image's position to truly center it */
    z-index: 0;  /* Ensures the image is above the text but still below any potential foreground content */
	width: 25vw;
}
.start-text{
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-size:1em;
}
.scroll-lottie {
	width: 1%; height: 1%; 
}
.first-text {
	margin:0 0 0em 0;
}
.hidden {
	display:none;
}
.thirdIntro {
	top: -5vw;
}
.content2 {
	text-align-last: center;
    align-items: center;
    justify-content: center;
    margin-bottom: auto; /* this helps push content down if it exceeds viewport */
	padding-top: calc(50vh - 1.5vh);
}
@media (max-width: 1366px) {
		
	.scroll-lottie {
		width: 1.6%; height: 1.6%; 
	}
}
@media (max-width: 768px) {
    footer {
        flex-direction: column;  /* stack children vertically */
        align-items: center; /* align to the start (left) */
		justify-content: center;
    }
    header {
        flex-direction: column;  /* stack children vertically */
        align-items: center; /* align to the start (left) */
		justify-content: center;
    }
	.menu {
		display:none;
	}
	.spaced {
		position:fixed;
		top: 3%;
		
	}
	.backdrop{
		font-size: 25vw;
	}	
	.scroll-lottie {
		width: 3%; height: 3%; 
	}
	.centered-image {
		width: 50vw;
	}
	.first-text {
		margin:1.5em 0 0 0;
	}
	.content {
		padding-top: calc(50vh - 25vw);
	}
	.centre-heights {
		height: 50vw;
	}
	.mobile-width {
		width: 85%;
	}
	.thirdIntro {
		top: -20vw;
	}
}
#round {
	width:3vh;
	height:3vh;
	background-color: #de4f41;
	border-radius: 50%;
	display: inline-block;
	-webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.image, .italic-light, footer, header, .fade {

    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #000 #FFF8E7;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 13px;
  }

  *::-webkit-scrollbar-track {
    background: #FFF8E7;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 13px;
    border: 2px solid #ffffff;
  }