@charset "utf-8";
@import url("file:///C|/Users/Mercy/Documents/final ID/");
/* CSS Document */
html {
	scroll-padding-top:100%;
	scroll-behavior: smooth;
	
}

html, body {
  width: 100%;
display: block;

}


/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  /* Styles for screens smaller than 600px */
  /* Adjust as needed for different screen sizes */
}

.container {
  max-width: 100%; /* Set maximum width if needed */
  /* Other styles for your container */
}
* {
	padding: 0;	/* box-sizing property is to allow any elements to collapse if the size is greater than the parent element size */
	margin: 0;
	box-sizing: border-box;
}

/* follow this rule to style all elements */

header {
	min-height: 100px;
	background-color: #754434;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	font-family: 'Astone Nouvea', sans-serif;
	color: #FFFFFF;
	font-style: normal;
	font-weight: 200;
	line-height: normal;
	z-index: 10;
	display: flex;
	align-items: center;
}

.logo {
	min-height: 53%;
	min-width: 5%;
	padding: 2% 2%;
	display: block;
}

	@font-face {
		src:url("Astone Nouvea.ttf")
}

@font-face {
	src:url("YoungSerif-Regular.ttf")
}

.navi {
	display:flex;
	list-style: none;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	gap: 10%;
	font-family: 'Astone Nouvea', sans-serif;
	padding-left: 950px;
	font-size: 25px;
}

.navi a:link {
	color: antiquewhite;
	text-decoration: none;
	font-size: 2 em;
	font-family: 'Astone Nouvea', sans-serif;
}

.navi a:hover {
	color:navajowhite;
	border-bottom: 2px solid #c08261;
	padding-bottom: 2%;
	transition: 0.5s ease;
}

.navi a:visited{
	color: #4d2727;
}


section {
	display: grid;
	width: 100%;
	margin: auto;
	
}


.column {
	min-width: 45%;
	min-height: 450px;
	padding-top: 3%;
}

h1 {
	font-size: 3.2em;
	text-align: center;
	text-transform: capitalize;
	padding-top: 3%;
	font-family: 'Astone Nouvea', sans-serif;
	letter-spacing: 1.5px;
	color:antiquewhite;
	font-weight: 350;
}

.rectangle {
	font-weight: 1000;
	font-size: 35px;
	line-weight: normal;
	font-style: normal;
	 margin-bottom: 10px;
	display: block;
}

.rectangle a:link {
	color: saddlebrown;
}

.rectangle a:hover{
	color:#451314;
	transition: 0.5s ease;
}

h2 {
	font-size: 60px;
	text-align: center;
	padding-top: 10%;
	font-family: 'Astone Nouvea', sans-serif;
	letter-spacing: 2px;
	font-weight: 850;
	color:#2C1408;
}


.textbox {
    width:65%;
    background-color: #F4E9DE;
    border-radius: 50px;
    margin: auto;
	font-size:20px;
		font-family: 'Young Serif', serif;
	display: block;
}


.lead{
  color:#aaa;
}

.album-image{
	width: 400px;
		height: 400px;
}

.image-container{
	display:flex;
	flex-wrap:wrap;
	gap: 5px;
}



.wrapper{width:100%}


.card{
  border: none;
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}


h3 {
	font-size: 45px;
	text-align: center;
	letter-spacing: 2px;
	font-weight: 1000;
	color: #2c1408;
}

.footer {
  position: sticky;
  max-width: 100%;
  background: #754434;
  max-height: 500px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;

}

	.social-icon {
		list-style: none;
		display: flex;
		padding-top: 10px;
		
	}
	
	.social-icon_item {
  transition: transform 0.5s; /* Apply transition for the hover effect */
}

.social-icon_link {
  display: flex; /* Make the links inside the list items flex containers */
  align-items: center; /* Center the content vertically */
  text-decoration: none;
  color: #fff;
}

.social-icon_item:hover {
  transform: translateY(-10px);
}
	
	.icon:hover {
  filter: brightness(6.5); /* Example: Increase brightness on hover */
}
	.social-icon,
	.menu {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	
.social-icon_item,
.menu_item {
  list-style: none;
	display: flex;
}	
	
.social-icon_link {
  font-size: 2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}
.social-icon_link:hover {
  transform: translateY(-10px);
}
	
	.menu_link {
  font-size: 25px;
  color: #fff;
  margin: 0 20px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
}

.menu_link:hover {
  opacity: 1;
}

.menu_item {
align: center;
	padding-top: 10px;
}

.typewriter h4 {
  color: #2c1408;
	font-size: 25px;
  font-family: 'Young Serif', Serif;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-center: .10em solid #5D1212; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .10em; /* Adjust as needed */
  animation: typing 4.5s steps(35, end), infinite,
   			 blink-caret 0.5s step-end;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 80% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  70% { border-color: #5D1212 }
}

.text {
	font-family: 'Young Serif', Serif;
	padding-top: 5px;
		margin-top: 5px;
	font-size: 15px;
}