@charset "utf-8";

/* 


COLORS

dark purple rgb(90, 99, 156)
lighter purple rgb(155, 134, 189)
blue pruple rgb(102, 123, 198)
almost white purple rgb(245, 239, 255)

*/



@font-face {
    font-family: "pompiere";
    src: url("Pompiere-Regular.ttf") format(truetype);
}

* {
    color: rgb(50, 50, 50);
    font-family: pompiere;
    font-size: 100%;
}

/* html */

html {
    background-image: url("mountainbkg.jpg");
    background-position: 5%;
    background-repeat: initial;
    background-attachment: fixed;
}


/********************** header ***********************/
header,
footer,
nav,
ul, 
li, 
a {
    font-family: "pompiere";
    text-align: center;
    width: 100%;
    font-family: "pompiere", sans-serif;
    font-size: 120%;
}


.logo {
    max-width: 300px;
}


/* Seperate Navs for each page */

nav {
    margin-left: -30px;
}


#contactNav {
    display: flex;
    font-size: 100%;
    align-items: center;
}

#datesNav {
    display: flex;
    font-size: 120%;
    align-items: center;
}


/* End Navs for each page */



/********************** end head ***********************/



/********************** body ***********************/



body {
background:  linear-gradient(90deg, rgb(133, 137, 199) 0%,
rgb(188, 214, 253) 50%, rgb(119, 155, 175) 100%);
    width: 100%;

}

body > header {
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center;   
    padding: 20px;
}

body > main > header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

body > header > nav#indexNav > ul {
    display: flex;
    width: 100%;
}

.nav-icon {
    max-width: 50px;
    margin-top: 20px;
    margin-bottom: -15px;
}

body > main > section {
    margin: 50px;
}

/* ************************** Section ***************************** */

section#indexPictures{
    display: flex;
    justify-content: space-between;
}




/* ************* Pictures ************** */
figure {
    flex: 1; 
    text-align: center;
    margin: 0;
}

figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

figure.bodyPicture1
{
      transform: rotate(-10deg) translate(25px, 20px);
      margin-left: 35px;
      margin-top: 35px;
}

figure.bodyPicture2
{
      transform: rotate(10deg) translate(25px, 20px);
      margin-left: 100px;
      margin-top: 35px;
}

/* ************* End Pictures ************** */


/* Caption */
.caption#live {
    margin-top: 10px;
    max-width: 300px;
}
.caption#album {
    margin-top: 10px;
    max-width: 300px;
}

/* ********************** End Section ******************************* */





/********************** end body ***********************/



/********************** aside & articles ***********************/

aside, article#index {
    background-color: rgb(147, 154, 255);
    padding: 1px; 
	border-radius: 10px;
    box-shadow: 5px 4px 8px black;
    border: 7px solid rgb(150, 175, 255);
    margin: 20px;
}



aside p, article#index > p {
    margin: 7px;
    background: linear-gradient(90deg, rgb(218, 206, 252) 0%,
                 rgb(252, 224, 255) 28%, rgb(205, 219, 252) 69%,
                 rgb(176, 217, 224) 100%);
    color: rgb(59, 67, 68);
    text-align: center;
}

article#video {
    background-color: rgb(147, 154, 255);
    padding: 1px; 
	border-radius: 10px;
    box-shadow: 5px 4px 8px black;

    border: 10px outset rgb(132, 105, 255);
    width: 100%;
    border-collapse: separate;

    margin-top: 5px;
}


article#contact{
    background-color: rgb(185, 190, 255);
    padding: 10px; 
	border-radius: 10px;
    box-shadow: 5px 4px 8px black;
    border: 7px solid rgb(150, 175, 255);
    margin: 20px;
}

/********************** end aside ***********************/



article#index {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

article#contact {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

article > video {
    max-width: 100%;
    margin: 0;
}


div {
    display: block;
    margin-bottom:-36px;
}

/* ****************************Transition**************************** */

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .fade-in {
    animation: fadeIn 2s ease-in forwards;
    opacity: 0;
  }

/* **************************** End Transition**************************** */






/********************** links ***********************/
a:link,
a:visited {
    color: rgb(87, 63, 28);
}

a:active,
a:hover {
    color: rgb(101, 94, 211);
}

figure.bodyPicture1 img:hover,
figure.bodyPicture2 img:hover {
    cursor: pointer;
}
/********************** end links ***********************/


/* ********************** Video CSS ************************* */

/* video {
    width: 640;
    height: 360px;
} */

/* ********************** End Video CSS ************************* */



/********************** footer ***********************/
footer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

footer > table > caption {
    margin: 10px;
}

tfoot {
    text-align: center;
}

caption#indexCaption {
    font-size: 150%;
}

/********************** end footer ***********************/

audio {
    display: block;
    width: 90%;
    border: 10px outset rgb(108, 172, 255);
    border-radius: 0%;
    border-collapse: separate;
    margin: auto;
}