@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+NSW:wght@100..400&family=Quicksand:wght@300..700&display=swap');


html{
	height: 100%;
/*	max-width: 1600px; */
}

body {
		display: flex;
		min-width: 20rem;
		height: 100%;
		width: 100%;
		font-family: 'Quicksand', sans-serif;
		flex-direction: column;
		margin: 0;
	}
	
content div{
			padding-bottom: 30px;
	}
content a{
		color: rgb(0,0,0);
		text-decoration: none;
	}	
	
	a:hover{
		color: #c90000;
	}
	
	a:visited{
		color: rgb(161, 10, 10)
	}	
	
	.center-image{
		text-align: center;
	}
	
	.quote{
		font-family: 'Playwrite+AU+NSW';
		font-size: 1.3rem;
		font-style: italic;
	}
	
	.frame {
		width: auto;
		height: auto;
		border: 3px solid #666; /* Border style, width, and color */
		background: #fff;       /* Background color */
		margin: auto;           /* Center the frame */
		padding: 15px 10px;     /* Padding inside the frame */
	}
	
	.frame img {
		width: 100%;            /* Make the image fit the frame */
		height: 100%;
		padding: 100px 100x;
	}
	
	header {
		width: 100%;
		height: auto;
	}		
		
	/* Hero styles */
	/* Ensure the container is positioned relatively */
	
	.hero-index {
	  position: relative;
	  height: 300px; /* Full viewport height */
	  background-color: white;
	  padding-bottom: 0px;
	  z-index: 0;
	}
	
	.top-padding{
		padding-top: 50px;
	}
	
	
	
	/* Style for the first image that moves */
	.move-image-size{
		width: 100px;
	}
	
	.move-image {
	  position: relative;
	  top: 0;
	  left: 0;
	  animation: moveImage 2s ease forwards; /* First animation */
	  z-index: 2;
	}
	
	.facebook-link {
	  display: inline-block;
	  padding-left: 24px; /* Space for the icon */
	  background: url('/images/social-30/facebook-link.png') no-repeat left center;
	  transition: background-image 0.2s;
	  width: 40px;
	  height: 40px;
	}
	
	.facebook-link:hover {
	  background-image: url('/images/social-30/facebook-hover.png');
	}
	
	.facebook-link:visited {
	  background-image: url('/images/social-30/facebook-visited.png');
	}
	
	.instagram-link {
	  display: inline-block;
	  padding-left: 24px; /* Space for the icon */
	  background: url('/images/social-30/instagram-link.png') no-repeat left center;
	  transition: background-image 0.2s;
	  width: 40px;
	  height: 40px;
	}
	
	.instagram-link:hover {
	  background-image: url('/images/social-30/instagram-hover.png');
	 // background-color: #ebebeb;
	}
	
	.instagram-link:visited {
	  background-image: url('/images/social-30/instagram-visited.png');
	}
	
	.tiktok-link {
	  display: inline-block;
	  padding-left: 24px; /* Space for the icon */
	  background: url('/images/social-30/tik-tok-link.png') no-repeat left center;
	  transition: background-image 0.2s;
	  width: 40px;
	  height: 40px;
	}
	
	.tiktok-link:hover {
	  background-image: url('/images/social-30/tik-tok-hover.png');
	 // background-color: #ebebeb;
	}
	
	.tiktok-link:visited {
	  background-image: url('/images/social-30/tik-tok-visited.png');
	}
	
	.youtube-link {
	  display: inline-block;
	  padding-left: 24px; /* Space for the icon */
	  background: url('/images/social-30/youtube-link.png') no-repeat left center;
	  transition: background-image 0.2s;
	  width: 40px;
	  height: 40px;
	}
	
	.youtube-link:hover {
	  background-image: url('/images/social-30/youtube-hover.png');
	 // background-color: #ebebeb;
	}
	
	.youtube-link:visited {
	  background-image: url('/images/social-30/youtube-visited.png');
	}
	
	.fan-link {
	  display: inline-block;
	  padding-left: 24px; /* Space for the icon */
	  background: url('/images/social-30/face-smile-hearts-link.png') no-repeat left center;
	  transition: background-image 0.2s;
	  width: 40px;
	  height: 40px;
	}
	
	.fan-link:hover {
	  background-image: url('/images/social-30/face-smile-hearts-hover.png');
	 // background-color: #ebebeb;
	}
	
	.fan-link:visited {
	  background-image: url('/images/social-30/face-smile-hearts-visited.png');
	}

	
	/* Keyframes for the first animation */
	@keyframes moveImage {
	  from { transform: translate(80%, 0) scale(50%); }
	  to { transform: translate(70vw, 10vw) scale(100%); }
	}
	
	.move-image-bio {
	  position: relative;
	  top: 0;
	  left: 0;
	  animation: moveImage-1 2s ease forwards; /* First animation */
	  z-index: 2;
	}
	
	/* Keyframes for the first animation */
	@keyframes moveImage-1 {
	  from { transform: translate(80%, 0) scale(50%); }
	  to { transform: translate(78vw, 45vw) scale(100%); }
	}
	
	.hero-image-size{
		width: 100%;
	}
	
	/* Style for the second image that fades in */
	.fade-in-image {
	  position: absolute;
	  top: 0%; /* Adjust as needed */
	  right: 0;
	  opacity: 0;
	  animation: fadeInFromRight 1s ease 2s forwards; /* Second animation with delay */
	  z-index: 1;
	}
	
	/* Keyframes for the second animation */
	@keyframes fadeInFromRight {
	  from {
		transform: translateX(-100%); /* Start off-screen to the right */
		opacity: 0;
	  }
	  to {
		transform: translateX(0); /* Move to the original position */
		opacity: 1;
	  }
	}
	/* end of Hero styles */
	
	main {
		width: 100%;
		
		
	}
	.content{
		height: auto;
		margin: 5vh 5rem;
		padding-top: 1vh;
		
	}
	
	.content div{
		padding-right: 20%;
	}
	
	h1 {
		color: rgb(255,0,0);
	}
	
	.quote-image img{
		width: 50px;
		height: 50px;
		
	}
	
	li {
		margin-bottom: 15px;
	}
	
	.quote-image-right img{
		width: 50px;
		height: 50px;
		text-align: right;
	}
	
	.static{
		position: fixed;
		top: 30px; /* Adjusts overlap above navbar */
		 left: 20px; /* Positions logo in the top-left corner */
		z-index: 0; /* Ensures logo is above other elements */
		  height: 150px; /* Logo height */
		  width: 100%;
	}
	
	.spacer{
		padding-top: 20px;
	}
	
	/* Media */
	audio#myAudio {
	  position: fixed;
	  bottom: 20px; /* Distance from the bottom */
	  left: 20px; /* Distance from the left */
	  z-index: 1000; /* Ensure it's on top of other elements */
	  background-color: #f0f0f0; /* Optional: Add background color */
	  padding: 10px; /* Optional: Add padding */
	  border-radius: 5px; /* Optional: Rounded corners */
	}
	
	.footer{
		background-color: #ebebeb;
		text-align: center;
	}


	.horizontal-list {
		  display: inline-block;
		  list-style-type: none;
		  padding: 0;
		 
		}
		
	.horizontal-list li {
		  display: inline-block;
		  padding: 0 10px;
		}
		

	.horizontal-list a{
		text-decoration: none;
		padding: 5px 5px;
	}

	.horizontal-list a:hover{
			color: rgba(229,229,229,1);
		}

	
	
	li a:hover {
		  background-color: rgba(117, 117, 116, 0.988);
		}

	.links{
		display: inline-block;
		 list-style-type: none;
		 padding: 0;
		background-color: #ebebeb;
		text-align: center;
	}
	
	.links li{
		display: inline-block;
		padding: 0 20px;
	}
	.links a:hover{
		background-color: transparent;
	}
	
	/*colours for links: hover= c90000 , visited= 800D0D; */
	
	
	/* Responsive settings */
	
		
		
		
		@media screen and (min-width: 600px){
			.hero-index{
			height: 500px;
			}
			
			.move-image-size{
				width: 20%;
			}
			
			.content{
				padding-top: 1vh;
		//		padding-top: 100px;
				margin: 7rem 10rem;
			}
		}
		
	
		
		 @media screen and (min-width: 768px){
			.hero-index{
			height: 500px;	
			}
			
			 .move-image-size{
				 width: 15%;
			 }
			 .content{
				 margin: 5vh 10rem;
				 padding-top: 6.5vh;
			 }
		
			.links li{
				padding: 0 10px;
			}
			
		}
			
			@media screen and (min-width: 992px) {
				 
				 .hero-index{
				 height: 550px;	
				 }
				 
				 .move-image-size{
					 width: auto;
				 }
				 .content{
					 padding-top: 10vh;
					 margin: 8rem 10rem;
				 }
				 
			}
				 
			 @media screen and (min-width: 1200px) {
			  
			  .hero-index{
			  height: 700px;	
			  }
			  
			  .move-image-size{
				  width: auto;
			  }
			  .content{
				  padding-top: 15vh;
				  margin: 10vh 10rem;
			  }
			}
			
			@media screen and (min-width: 1500px) {
			  
			  .hero-index{
			  height: 700px;	
			  }
			  
			  .move-image-size{
				  width: auto;
			  }
			  .content{
				  padding-top: 25vh;
				  margin: 20vh 10rem;
			  }
			}
			
			@media screen and (min-width: 1800px) {
			  
			  .hero-index{
			  height: 700px;	
			  }
			  
			  .move-image-size{
				  width: auto;
			  }
			  .content{
				  padding-top: 35vh;
				  margin: 35vh 10rem;
			  }
			}
	/* 
	
	Extra small (xs) devices (portrait phones, less than 576px)
	No media query since this is the default in Bootstrap
	
	Small (sm) devices (landscape phones, 576px and up)
	@media (min-width: 576px) { ... }
	
	Medium (md) devices (tablets, 768px and up)
	@media (min-width: 768px) { ... }
	
	Large (lg) devices (desktops, 992px and up)
	@media (min-width: 992px) { ... }
	
	Extra (xl) large devices (large desktops, 1200px and up)
	@media (min-width: 1200px) { ... }
	*/