body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: goldenrod;
    font-family: 'Cinzel', serif;
    font-size: 2.5vh;

}

a.text:link {
  text-decoration: none;
     color: goldenrod;
    font-family: 'Cinzel', serif;
}
a.text:visited {
  text-decoration: none;
}
a.text:hover {
  text-decoration: underline;
}
a.text:active {
  text-decoration: none;
}

.container {
    width: 25.0%; /* One-third of the page width */
    margin-bottom: 0px;
}

.container img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
}
.name-text {
    font-family: 'Cinzel', serif;
    color: goldenrod;
    font-size: 7vh;
    margin-bottom: 0px;
    margin-top: 0px;
}
.date-text {
    font-family: 'Cinzel', serif;
    color: goldenrod;
    font-size: 4vh;
    margin-bottom: 0px;
    margin-top: 0px;
}

.countdown {
    font-family: 'Cinzel', serif;
    color: goldenrod;
    font-size: 1.5em;
} 


img.menu{
    transition: transform .2s;
    height:6.2vh;
    max-width: 9vw;
    margin:0 auto;
    margin-bottom: 0px;
    margin-top: 0px;
}
img.menu:hover{
    transform:scale(1.1);
}

.contact-line {
            border: none;
            height: 2px;
            background-color: white;
            width: 100%;
        }
.contact-info {
    text-align: center; /* Center align text */
    padding: 10px 0; /* Padding for spacing */
    font-size: 16px; /* Adjust font size */
    
}


// global colors for candle
$candle_background: black;
$flame: #ffad00;
$flame-shadow: #ffad00;
$wax: #ffffff;
$wax-shadow: #d8deed;
$wick: #ad87a9;
$stand: #1c233e;



.candle {
	display: flex;
	flex-direction: column;
	align-items: center;

	&-flame {
		width: 15px;
		height: 30px;
		background: $flame;
		border-radius: 8px 8px 8px 8px / 20px 20px 8px 8px;
		box-shadow: 0px 0px 20px 0px $flame-shadow;
		animation: flame-twirl 15s ease infinite, glow 2s ease infinite;
	}

	&-wick {
		height: 10px;
		width: 3px;
		background: $wick;
	}

	&-wax {
		width: 40px;
		height: 110px;
		background: $wax;
		border-radius: 6px;
		box-shadow: inset -15px 0px 0px -10px $wax-shadow;
	}

	&-stand {
		width: 100px;
		height: 8px;
		background: $stand;
		border-radius: 3px;
	}
}

// animations

@keyframes flame-twirl {
	0%,
	22%,
	49%,
	62%,
	81%,
	100% {
		border-radius: 2px 14px 8px 8px / 20px 20px 8px 8px;
	}
	14%,
	32%,
	56%,
	70%,
	89% {
		border-radius: 14px 2px 8px 8px / 20px 20px 8px 8px;
	}
}

@keyframes glow {
	0%,
	30%,
	60%,
	80%,
	100% {
		box-shadow: 0 0 20px 0 #ffad00;
	}
	20%,
	50%,
	70% {
		box-shadow: 0 0 22px 0 #ffad00;
	}
}