body {
  background: #ff5ed5;
}

header {
    background-image: linear-gradient(45deg, #4d4249 25%, transparent 25%), linear-gradient(-45deg, #4d4249 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #4d4249 75%), linear-gradient(-45deg, transparent 75%, #4d4249 75%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
   border: 5px solid;
   border-color: white;
   
 }

 header {
  background-image: linear-gradient(45deg, #4d4249 25%, transparent 25%), linear-gradient(-45deg, #4d4249 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #4d4249 75%), linear-gradient(-45deg, transparent 75%, #4d4249 75%);
 background-size: 20px 20px;
 background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 border: 5px solid;
 border-color: white;
}
.header1 {
 font-family: "Trebuchet MS";
 margin: 0px;
 font-weight: 300;
 font-style: normal;
 text-align: center;
 color: white;
 text-shadow: -2px -2px 0 #ff5ed5, 2px -2px 0 #ff5ed5, -2px 2px 0 #ff5ed5, 2px 2px 0 #ff5ed5;
 font-size: 80px;
 padding: 20px;
 margin-top: 10px;
}

.header2 {
 font-family: Verdana, sans-serif;
 margin: 0px;
 font-size: 45px;
 font-weight: bold;
 font-style: italic;
 text-align: center;
 color: #59c9c5;
 text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
 margin-top: 0px;
}

.header3 {
 font-family: Verdana, sans-serif;
 font-size: 40px;
 font-weight: bold;
 font-style: normal;
 text-align: center;
 color: #ff5ed5;
 text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
 margin-top: 10px;
 margin-bottom: 0px;
}

.header4 {
 font-family: Verdana, sans-serif;
 font-size: 35px;
 font-weight: bold;
 font-style: normal;
 text-align: center;
 color: white;
 margin-top: 0px;
 text-shadow: -2px -2px 0 #ff5ed5, 2px -2px 0 #ff5ed5, -2px 2px 0 #ff5ed5, 2px 2px 0 #ff5ed5;
   margin-bottom: 10px;
}

.navbar ul{
 list-style-type: none;
 background-color: #e5007c;
 padding: 0px;
 margin: 0px;
 overflow: hidden;
 border: 5px solid #d1ac60;
 text-align: center;
 font-size: 20px;
 font-family: "Trebuchet MS";
 justify-content: center;
}

.navbar a{
 color: white;
 text-decoration: none;
 padding: 15px;
 display: block;
}
.navbar a:hover{
 background-color: #59c9c5;
}
.navbar li{
 float: left;
}

.bodyHeader1 {
 text-align: center;
 font-family: Verdana, sans-serif;
 font-size: 40px;
 color: #59c9c5;
 font-weight: bold;
 margin-bottom: 10px;
 text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.bodyHeader2 {
 text-align: center;
 font-size: 25px;
 font-family: Verdana, sans-serif;
 margin-top: 0px;
 color: #e5007c;
 text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.font {
 font-family: Verdana, sans-serif;
 letter-spacing: 2px;
 line-height: 25px;
 color: white;
}

.font1 {
 font-family: Verdana, sans-serif;
 letter-spacing: 2px;
 line-height: 25px;
 color: #4d4249;
}

.intro-container {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 flex-direction: row;
 width: 100%;
 margin-bottom: 30px;  
}

.intro {
 font-size: 18px;
 font-family: Verdana, sans-serif;
 padding: 30px;
 background-color: #d1ac60;
 border-radius: 8px;
 border: 8px solid white;
 overflow: hidden;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
 margin: 10px;
 line-height: 40px;
 text-align: center;
}

.video-container {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 flex-direction: row;
 width: 100%;
 margin-bottom: 30px;
}
.video {
 padding: 30px;
 background-color: #59c9c5;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
 margin: 10px;
 border: 8px solid white;
}

.image-container-home {
 align-items: center;
 justify-content: center;
 background-color: #59c9c5;
 padding: 20px;
 border-radius: 20px;
 margin-top: 50px;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.flex-row-container-home {
 display: flex;
 align-items: center;
 justify-content: space-evenly;
}

.image-container-home2 {
align-items: center;
 justify-content: center;
  background-color: #e5007c;
padding: 20px;
 border-radius: 20px;
 margin-top: 50px;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.flex-row-container-home2 {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: row-reverse;
}

.image-container {
 background-color: #59c9c5;
 padding: 20px;
 border-radius: 20px;
 margin-top: 50px;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.flex-row-container {
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
}

.image-container2 {
 background-color: #e5007c;
 padding: 20px;
 border-radius: 20px;
 margin-top: 50px;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.flex-row-container2 {
 display: flex;
 flex-direction: row-reverse;
}

.photo1 {
 width: 100%;
 height: 500px;
 justify-content: right;
}

.image2 {
 background-size: contain; 
 height: 350px;
 border: 8px solid;
 border-color: #d1ac60;
}

.img {
 background-size: contain; 
 height: 350px;
 border: 8px solid;
 border-color: #d1ac60;
}

.pics{
 background-size: contain;
 max-width: 100%; 
 height: 275px;
 border: 8px solid;
 border-color: #d1ac60;
}

.talkShow {
 border: 8px solid;
 border-color: #d1ac60;
}

#hiddenMessage2 {
    display: none; /* Initially hidden */
    background-color: #e5007c;
    font-family: Verdana, sans-serif;
    font-size: 24px;
    color: white;
    text-align: center;
    margin: 10px;
    padding: 50px;
    border-color: white;
    border-radius: 8px;
    border: 2px solid white;
    line-height: 50px;
    letter-spacing: 1px;
}

#hiddenMessage3 {
    display: none; /* Initially hidden */
    background-color: #e5007c;
    font-family: Verdana, sans-serif;
    font-size: 24px;
    color: white;
    text-align: center;
    margin: 10px;
    padding: 50px;
    border-color: white;
    border-radius: 8px;
    border: 2px solid white;
    line-height: 50px;
    letter-spacing: 1px;
}

#hiddenMessage4 {
    display: none; /* Initially hidden */
    background-color: #e5007c;
    font-family: Verdana, sans-serif;
    font-size: 24px;
    color: white;
    text-align: center;
    margin: 10px;
    padding: 50px;
    border-radius: 8px;
    border: 3px solid white;
    line-height: 50px;
    letter-spacing: 1px;
    border-color: #59c9c5;
}

@keyframes slideinleft {
 from {
   transform: translatex(-600px);
 }
 to {
   transform: translatex(0)};
}
 @keyframes slideinright {
 from {
   transform: translatex(600px);
 }
 to {
   transform: translatex(0)};
}
.image2 {
 animation-name: slideinright;
 animation-duration: 2s;
 animation-timing-function: ease-in;
 animation-delay: 1s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: forwards;
}

.pics {
 animation-name: slideinright;
 animation-duration: 2s;
 animation-timing-function: ease-in;
 animation-delay: 1s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: ;
}

.talkShow {
 animation-name: slideinright;
 animation-duration: 2s;
 animation-timing-function: ease-in;
 animation-delay: 1s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: ;
}

.img {
 animation-name: slideinright;
 animation-duration: 2s;
 animation-timing-function: ease-in;
 animation-delay: 1s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: ;
}

figcaption {
 font-family: Verdana, sans-serif;
 text-align: center;
}

button {
 cursor: pointer;
 margin-top: 20px;
 padding: 10px;
 font-family: Verdana, sans-serif;
 font-size: 20px;
 color: white;
 width: 450px;
 background-color: #ff5ed5;
 border-radius: 8px;
 border-color: #4d4249;
 overflow: hidden;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.footer {
 margin-top: 50px;
 background-color: #e5007c;
 font-family: "Trebuchet MS";
 font-size: 30px;
 color: #59c9c5;
 text-align: center;
 padding: 5px;
 border: 3px solid;
 text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}