* {
	margin:0;
	padding:0;
}

html {
	height:100vh;
}

 body {
  margin:0px;
}
 
h1 {
 font-family:'Alegreya';
 font-size:200%;
 font-weight:bold;
 color:#FFF;
}




h2 {
 font-family:'Alegreya';
 font-size:40px;
 font-weight:bold;
 color:#010203;
 text-align:center;

}

h3 {
font-family:'Alegreya';
}

h4 {
font-family:'Alegreya';
font-weight:bold;
font-size:21px;

}

h5 {
font-family:'Alegreya';
}

h6 {
font-family:'Alegreya';
}

p {
font-family:'Alegreya';
font-size:21px; 
font-weight:bold;
text-align:left;
letter-spacing:0px;
height:auto;
padding:7px;
width:100%;     
	
}

p::first-letter {
  font-size: 200%;
  font-weight: bold;
  color: #D32F2F;
  font-family:'Alegreya';
}

img {
border-radius:50%;
height:auto;
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
   
}

a:link  {
 color:#F2AF13;
 text-decoration:none;
 font-size:16px;
 font-family:'Alegreya';
 font-weight:bold;
}

a:visited {
  color: #F2AF13;
  text-decoration:none;
  font-size:16px;
  font-family:'Alegreya';
  font-weight:bold;
}

a:hover {
 color: #F2AF13;
 text-decoration:underline;
 font-size:16px;
 font-family:'Alegreya';
 font-weight:bold;
}

a:active {
 color: #F2AF13;
 text-decoration:underline;
 font-size:16px;
 font-family:'Alegreya';
 font-weight:bold;
}

a:focus {
  color: #F2AF13;
 font-size:16px;
 font-family:'Alegreya';
 font-weight:bold;

}

ul {
list-style-type: none;
  margin: 0;
  padding: 0;
  float:center;
	
}

div:has(> blockquote) {
  background-color:#ECEDDC;
  margin: 0px auto;
  padding: 5px;
  border-radius: 0px;
  font-family:'Alegreya';
  font-weight:bold;
}


blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote + p {
  text-align: right;
}


.rochester-regular {
  font-family: "Rochester", cursive;
  font-weight: 400;
  font-style: normal;
}





.container {
  margin-right: auto;
  margin-left: auto;
  width:100%;
  height:100%;
}


#wrapper {
  background-color:#ffff00;
  width:100%;
 

  }

#navigation {
	background-color:#FFFFFF;
	width:100%;
	height:60px;
	padding:20px;
	border-top:2px solid #e5e5e5;
	border-bottom:2px solid #e5e5e5;
	font-family: 'Alegreya';
	font-size:21px;
}

#header {
  background-color:#D32F2F;
  width:100%;
  height:30px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

#slider {
  background-color: #FFFFFF;
  width:100%;
  height:100%;
  font-family:'Alegreya';
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-bottom:2px solid #e5e5e5;
  
}


  

#content {
  background-color:#ECEDDC;
  margin:0px auto;
  width:100%;
  height:100%;  
  font-family:'Alegreya';
  font-size:17px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  
}

#quotes {
  background-color:#ECEDDC;
  margin:0px auto;
  width:100%;
  height:100%; 
  font-family:'Alegreya';
  font-size:41px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding:0px;
  font-weight:bold;
  position: relative;
}

#footer {
  background-color:#D32F2F;
  width:100%;
  height:30px;
  font-family:'Alegreya';
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  
}

footer { 
	background-color:#000000;
	width:100%;
	height:auto;
	color:#FFFFFF;
	font-family:'Alergya';   
	padding:20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  
}

footer a:link  {
 color:#F2AF13;
 text-decoration:none;
 font-size:19px;
 font-family:'Alegreya';

}

footer a:visited {
  color:#F2AF13;
  text-decoration:none;
  font-size:19px;
  font-family:'Alegreya';

}

footer a:hover {
 color:#F2AF13;
 text-decoration:underline;
 font-size:19px;
 font-family:'Alegreya';

}

footer a:active {
 color:#F2AF13;
 text-decoration:underline;
 font-size:19px;
 font-family:'Alegreya';

}

footer a:focus {
  color:#F2AF13;
 font-size:19px;
 font-family:'Alegreya';

}

footer h1 {
font-family: "Rochester", cursive;
  font-weight: 400;
  font-style: normal;
}



/* media queries for small medium large devices */

/* Portrait tablet to Landscape and Desktop */
@media (min-width:768px) and (max-width:991px) {    
       .container {
		   width:800px; 
	   }
	   
/* Desktop and Laptops */ 
@media (min-width:992px) and (max-width:1200px) {
	 .container {
		 width:980px;
	 }
/* Large screens */
@media (min-width:1201px) and (max-width:2200px) {
	.container {
		width:1180px;
	}
}