@charset "UTF-8";

/* https://coolors.co/f5e6e8-d5c6e0-aaa1c8-967aa1-192a51*/

.bodyme {
  background-color: #ece0d1;
  margin: 0;  
  padding: 0;
}

/*help with mrs.Tarrico for alot*/
.width{
    width:43%;	
}

.widthh{
	width:95%;
}

.margind{
	margin:auto 0;
}

.marginr{
	margin-right:2%;
}

.dif{
	display:block;
}

.center{
	text-align:center;
}

.mb{
	margin-bottom:15px;
}

h1 {
	text-align: center;
	background-color:#38220f;
	font-size: 5em;
	border: 15px double #dbc1ac;
	padding:1% 7%;
	color: #dbc1ac;
	width: fit-content;
	margin:0% auto;
	overflow: hidden;
	
}

 h2 {
  text-align: center;
  background-color: #38220f;
  font-size: 2em;
  border: 15px double #dbc1ac;
  padding: 1% 7%;
  color: #dbc1ac;
  width:fit-content;
  margin-right:auto;
  margin-left:auto;       
  margin-top: 0%;
}
 	

.widthSm {
	width: 23%;
}

body {
	background-color: #ece0d1 ;
}

.floatright {
	float: right; 
}

.floatleft {
	float: left; 
}

.clearfix{
	overflow: auto;
}



.textcontainer-left{
	border: 15px double #634832;
	padding:1.6%;
	background-color:#dbc1ac;
	color: #38220f;
}

.textcontainer-right{
	float: right;
	border: 15px double #634832;
	background-color:#dbc1ac;
	padding:1.6%;
	color: #38220f;
	width:38%; 
}

.textcontainer-rightVolunteer{
	text-align:left;
	float: right;
	border: 15px double #634832;
	background-color:#dbc1ac;
	padding:1.6%;
	color: #38220f;
	width:55%; 
}

.textcontainer-leftOH{
	text-align:left;
	width:47%; 
	border: 15px double #634832;
	background-color:#dbc1ac;
	padding:1.6%;
}

.textcontainer-rightmusic{
	text-align:left;
	float: right;
	border: 15px double #634832;
	background-color:#dbc1ac;
	padding:1.6%;
	color: #38220f;
	width:40%; 
}

.positionimg{
	margin-right: 5%;
	
}

ul{
	list-style-type: none; 
	background-color: #38220f;
	margin:0%; 
	overflow:hidden;
 	background-color: #38220f;
  	margin: 0;  
  	padding: 0;  
  	display: flex;
  	width: 100%;
}

/*https://www.w3schools.com/css/css3_flexbox.asp*/
ul li {
	margin:0;
	padding: 0;
	text-align: left;
	/*float:center;*/
}

/*https://www.w3schools.com/css/css_navbar_horizontal.asp*/
ul li a{
	list-style-type: none;
	background-color: #38220f;
	overflow: hidden;
	color:#ece0d1; 
	text-decoration: none; 
	display: block; 
	padding: 14px 13px; 
	font-size: 1.3em;
}

	
ul li a:hover{
	background-color: #967259 ; /*https://htmlcolorcodes.com/colors/shades-of-gray/*/
}


.widthme{
	width:38%;
	float:right;
}

.favposition{
	width:70%;
 	display: block;     
  	margin: 0 auto;     
}

/*https://www.w3schools.com/css/css_inline-block.asp*/
h3 {
  text-align: center;
  background-color: #38220f;
  font-size: 2em;
  border: 15px double #dbc1ac;
  padding: 1% 7%;
  color: #dbc1ac;
  display: inline-block;  
  margin-right:auto;
  margin-left:auto;       
  margin-top: 0%;
}

/* https://www.w3schools.com/w3css/w3css_containers.asp#:~:text=The%20w3%2Dcontainer%20class%20adds,%2C%20and%20more.*/
.textcontainerme{
	text-align:center;
	width:fit-content;
	border: 15px double #634832;
	background-color:#dbc1ac;
	padding:1.6%;
	color: #38220f;
	width:87%; 
}

.positiond{
	width: 23%; 
	height: 8%;
}

.divd{
	display: inline;
}


.positionv{
	width: 23%; 
	height: 10%;
}

.margin{
	float:right;
	width:33%;
}

.positionm{
	width: 27%; 
	height: 13%;
}


/*gallery made with help of W3 schools and naisha and svasti*/
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 8px; 
  padding: 8px;
  margin: 5px;  
}

.gallery img {
  max-width: 90%;  
  height: 100%; 
  object-fit: cover;
  border-radius: 10px; 
  border: 1px solid black; 
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr; 
  }
}

/*trouble shooting with my dad*/

.positioned-HOSA {
  width: 53%;
  max-width: 400px; 
  float:right;
}

.textcontainer-leftHOSA {
	border: 15px double #634832;
	background-color:#dbc1ac;
	padding:1.6%;
	color: #38220f;
	width:38%; 
}