@charset "UTF-8";
/* CSS Document */
    /* {
    outline: 1px solid red; /* This will show all elements' boundaries */
}*/
body {
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        margin: 0;
		margin-bottom: 60px;
        padding: 0;
		padding-bottom: 100px;
        text-align: center; /* Centers block elements inside body */
  		background-color: white; /* Change to your preferred color */
    }
.navbutton {
    font-size: 18px; 
    padding: 10px 20px;
    margin-right: 25px;
    background-color: rgba(165, 73, 60, 1); /* Original color */
    color: white; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition */
}

/* Hover Effect */
.navbutton:hover {
    background-color: rgba(200, 50, 40, 1); /* New color on hover */
    transform: scale(1.05); /* Slight zoom effect */
}
    .container {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding-bottom: 40px;
        max-width: 700px; /* Matches image width */
        margin: 0 auto; /* Centers the block */
		margin-bottom: 50px;
        text-align: left; /* Ensures text is flush left */
    }
    .button_container {
        margin: 0 auto; /* Centers the block */
		position: relative;
		display: flex; 
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: center;
    }
	.container > *:last-child {
    	margin-bottom: 0px; /* Adjust to your desired amount of space */
}    .photo-container {
		  margin: 0 auto;
          position: relative;
		  max-height: 400px;
        }
	.staroverlay {
		position: relative;
		top: -500px;
		left: -330px;
	}
	.signature {
		font-family: "Mr Dafoe", serif;
		font-weight: 400;
		font-style: normal;
            position: relative;
            bottom: 150px; /* Adjust as needed */
            left: 600px; /* Adjust as needed */
            font-size: 36px;
            color: white;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
            transform: rotate(-10deg);
            opacity: 0.9; /* Slight transparency */
	}

 	.clipLink {
		font-size: 24px;
		border-width: 2px;
		border-style: solid;
		border-color: black;
		border-radius: 5px;
		margin:5px;
		padding: 4px;
		text-decoration: none;
		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetica, Arial, "sans-serif";
		text-align: left;
		width: 50%;
		background-color: #A10E14;
		color: white;
	    
	}
   img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 20px auto; /* Centers images */
		
    }
	.italiana-regular {
  		font-family: "Italiana", serif;
  		font-weight: 400;
  		font-style: normal;
	}
	.headline {
    	font-size: 40px;
    	font-weight: bold;
    	font-family: "Italiana", serif;
    	margin: 20px 0;
    	text-align: center;
	}
 	.headline2 {
    	font-size: 40px;
		font-weight: bold;
		font-family: "Playfair Display", serif; /* Change to your chosen font */
		margin: 20px 0;
		text-align: center;
	}
    .blurb {
		  font-family: "Quattrocento Sans", serif;
		  font-weight: 400;
		  font-style: normal;
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 15px;
    }
       

    .dust-container {
		position: absolute;
		background-color: rgba(165, 73, 60, 1);
		width: 100vw;
		height: 456px;
		top: 60px;
		left: 0;
		z-index: -1;
		pointer-events: none;
	}

	.dust {
		position: absolute;
		width: 4px;
		height: 4px;

		background-color: rgba(255, 255, 255, 0.6); /* Light dust effect */
		border-radius: 50%;
		animation: float linear infinite;
	}

   @keyframes float {
		from {
			transform: translate(0, 100vh);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		to {
			transform: translate(50vw, -10vh); /* Move up and to the right */
			opacity: 0;
		}
	}
	@media (max-width: 768px) {
 		.dust-container {
        	height: 300px; /* Reduce height for smaller screens */
    	}
		.headline {
			font-size: 1.5rem;
		}

		.blurb {
			font-size: 1rem;
			padding: 10px;
		}

		.photo-container {
			position: relative;
		}

		.signature {
			font-size: 1.2rem;
		}

		.staroverlay img {
			display: none;
			width: 120px; /* Scale down star overlay */
			height: auto;
		}
	}

	@media (max-width: 480px) {
 		.dust-container {
        	height: 200px; /* Reduce height for smaller screens */
    	}
		.headline {
			font-size: 1.2rem;
		}

		.navbutton {
			font-size: 0.9rem;
			padding: 8px 12px;
		}
	}