@charset "UTF-8";
/* This site was made with the help of https://www.w3schools.com/ and Mrs. Taricco */


/* The text-shadow tag is taken from https://www.w3schools.com/css/css3_shadows.asp */
h1 {
	height: 100%; 
	text-align: center; 
	color: #01161e;
	background-color: #72A0C1; 
	font-size:8em;
	text-shadow: 2px 2px White;
}

h,h2 {
	height: 100%; 
	text-align: center; 
	color: Black;
	background-color: LightGray; 
	font-size: 3em;
}
.width {
	width: 50%;
}

p {
	text-shadow: 1px 1px DarkGray
}
.doubleborder {
	border-style: double;
	border-width: 6px;
	border-color: Black;
	border-radius: 5px;
	
}

/* background gradient for my body was made with the help of https://www.w3schools.com/css/css_background.asp */

body {
		background-image:
		linear-gradient(to top, #d3e5f8, #dfdfdf, White);
}

.widthsm {
	width:650px;
}

.contentstyle {
	text-align: center; 
	color: Black;
	background-color: #72A0C1; 
	font-size:1.5em;
	line-height: 40px;
	font-family: Garamond; 
	padding: 10px;
}

.content1 {
	text-align: center; 
	color: Black;
	background-color: #72A0C1; 
	font-size:2em;
	line-height: 40px;
	font-family: Garamond; 
	padding: 10px;
	
}



.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.clearfix {
	overflow: auto;
	

}

.footer {
   background-color: #598392;
  padding: 310px;
  text-align: center;
  color: white;
}

ul {
	list-style-type: none; /* removes the default bullet*/
	margin: 0px;
	padding: 0px;
	background-color: LightGray;
	overflow: hidden;

}

ul li {
	float: left;
}

ul li a {
	color: Black;
	text-decoration: none;
	display: block;
	padding: 0px 16px;
	font-size: 35px;
	text-align: center;
	font-family: Garamond; 
}

ul li a:hover {
	background-color: DarkGray
}

.align {
	align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.margin {
	margin: 30px;
}

.space {
	height: 60px;
}

.link {
	color: black;
}

/* The width:--vw tag was made with the help of Parnitha */

.phone {
	width:40vw;
}

.carousel {
	width: 100%; /* full width of the container */
	max-width: 1200px; /* optional max-width */
	overflow: hidden; /* hides overflowing slides */
	margin: auto; /* center carousel and keep aspect ration  of the pictures */
	position: relative; /* element in normal flow of document */
	width: 100vw;
	
}
/*display tag take from https://www.w3schools.com/css/css_display_visibility.asp */
/* slides container (flex row of images) */
.slides {
	display: flex;
	transition: transform 0.5s ease; /* smooth sliding animation over 0.5s */
	height: 600px;
}
	/* The object-fit tag is from https://www.w3schools.com/css/css3_object-fit.asp */
	/* The box-sizing tag is from https://www.w3schools.com/css/css3_box-sizing.asp */
.slides img {
	width:100%;
	height: auto;
	flex-shrink: 0; /* Prevent images from shrinking */
	box-sizing: border-box;
	object-fit: contain;
	

}
 /* The tag below is taken from https://www.tutorialrepublic.com/faq/how-to-remove-border-from-iframe-in-html.php */
 
iframe { border: none; }

.music {
	width:30%; 
    height:352px;
    
}

/* flex-wrap tag take from https://www.w3schools.com/css/css3_flexbox_container.asp */
/* gap tag take from https://www.w3schools.com/css/css_grid.asp */

.playlist {
  display: flex;
  flex-wrap: wrap;       
  justify-content: center; 
  gap: 20px; 
}