body {
  background-color: #fbf9f6;
}

#container {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 11px;
  background-color: #000;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#itemcontainer {
  border-radius: 15px;
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
  margin-bottom: 12px;
  background-color: #d9d6cc;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Styles for the Youtube container */
        #ytcontainer {
           position: relative;
           width: 90%;
           max-width: 900px; /* Set a maximum width if needed */
           margin: auto; /* Center the container horizontally */
           padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100%) */
           overflow: hidden; /* Hide any overflowing content */
        }

        /* Styles for the iframe */
        #ytcontainer iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
	}

  /* Styles for the video container */
        #video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100%) */
        }

        /* Styles for the iframe */
        #video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }


/* Styles for the playlist */
        #playlist {
            margin-top: 20px;
        }

/* Styles for the playlist items */
        #playlist ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #playlist li {
            margin-bottom: 10px;
        }
        
        #playlist li a {
            color: #000;
            text-decoration: none;
        }

#header {
  text-align: center;
}

#mainbody {
  text-align:center;
  margin: auto;
  min-height:200px;
}

#flexbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#footer {
  height: 102%;
  background-color: #d9d6cc;
  display: flex;
  flex-wrap: wrap;
}

#footercontact {
  height: 30px;
  background-color: #d9d6cc;
  text-align: left;
  width: auto;
  margin: auto;
  padding: 10px;
}

#footersocials {
  height: auto;
  background-color: #d9d6cc;
  text-align: center;
  padding: 5px 11px;
}

.heading {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: #e73439;
  padding-top:20px;
  text-decoration: none;
  
}
.text {
	font-family: sans-serif;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.8;
	color: #d5c9b6;
  text-align: left;
}

a.text:link {
	font-family: sans-serif;
	font-size: 15px;
	color: #d5c9b6;
	text-decoration: none;
}

a.text:visited {
	font-family: sans-serif;
	font-size: 15px;
	color: #d5c9b6;
	text-decoration: none;
}
a.text:active {
	font-family: sans-serif;
	font-size: 15px;
	color: #d5c9b6;
	text-decoration: none;
}
a.text:hover {
	font-family: sans-serif;
	font-size: 16px;
	color: #e73439;
	text-decoration: underline;
}

.textdark {
	font-family: sans-serif;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.8;
	color: #3d3d3d;
  text-align: left;
}

a.textdark:link {
	font-family: sans-serif;
	font-size: 15px;
	color: #3d3d3d;
	text-decoration: none;
}

a.textdark:visited {
	font-family: sans-serif;
	font-size: 15px;
	color: #3d3d3d;
	text-decoration: none;
}
a.textdark:active {
	font-family: sans-serif;
	font-size: 15px;
	color: #3d3d3d;
	text-decoration: none;
}
a.textdark:hover {
	font-family: sans-serif;
	font-size: 16px;
	color: #e73439;
	text-decoration: underline;
}

.sub {
	font-family: sans-serif;
	font-size: 12px;
  font-style: italic;
	line-height: 18px;
	color: #d9d6cc;
	text-align: right;
  margin-right: 15px;
}

a.sub:link {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #d9d6cc;
  text-decoration: none;
}

a.sub:visited {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #d9d6cc;
  text-decoration: none;
}

a.sub:active {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #d9d6cc;
  text-decoration: none;
}

a.sub:hover {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #fff;
	text-decoration: underline;
}

.agenda {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #3d3d3d;
  text-decoration: none;
  text-align: center;
padding: 20px;
}

a.agenda:visited {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #3d3d3d;
  text-decoration: none;
}

a.agenda:active {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #3d3d3d;
  text-decoration: none;
}

a.agenda:hover {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: #e73439;
	text-decoration: underline;
}

.agendainfo {
	font-family: sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.8;
	color: #3d3d3d;
  text-align: center;
padding: 20px;
}

a.agendainfo:link {
	font-family: sans-serif;
	font-size: 14px;
	color: #3d3d3d;
	text-decoration: none;
}

a.agendainfo:visited {
	font-family: sans-serif;
	font-size: 14px;
	color: #3d3d3d;
	text-decoration: none;
}
a.agendainfo:active {
	font-family: sans-serif;
	font-size: 14px;
	color: #3d3d3d;
	text-decoration: none;
}
a.agendainfo:hover {
	font-family: sans-serif;
	font-size: 15px;
	color: #e73439;
	text-decoration: underline;
}

.contact {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #3d3d3d;
  text-decoration: none;
}

a.contact:visited {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  color: #3d3d3d;
  text-decoration: none;
}

a.contact:active {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  color: #3d3d3d;
  text-decoration: none;
}

a.contact:hover {
  font-family: 'Lexend Tera', sans-serif;
  font-weight: 400;
  color: #e73439;
	text-decoration: underline;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}