/* REQUIRED CSS File - 1 APR 2024 */

/* Font face declaration for custom font */
@font-face {
   font-family: Mynerve;
   src: url(fonts/Mynerve-Regular.woff) format('woff'),
      url(fonts/Mynerve-Regular.ttf) format('ttf');
}

/* Keyframe animations */
@keyframes loopDeLoop_In {
   0% {
   transform: translateX(-100%) rotateZ(0deg);
   }
   100% {
   transform: translateX(0%) rotateZ(360deg);
   }
}

@keyframes loopDeLoop_Out {
   0% {
      transform: translateX(0%) rotateZ(0deg);
   }
   100% {
      transform: translateX(100%) rotateZ(360deg);
   }
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.15);
   }
   100% {
      transform: scale(1);
   }
}

/* Global styling for HTML element */
/* REQUIRED: Background within site - 06 APR 2024 */
html {
   background-color: rgb(191, 143, 132);
   font-family: Verdana, Geneva, Arial, sans-serif; 	
}

/* Global styling for the body element */
body {
   background: linear-gradient(to right,#C0AEA4 22%, #525973 23%, #525973 45%, #736E73 46%);  
   margin-left: auto;
   margin-right: auto;
   max-width: 960px;
   min-width: 480px;
   width: 95%;
   border-radius: 25px;
   /* REQUIRED: Border - 06 APR 2024 */
   border: 1.5px solid rgb(49, 66, 89);
   box-shadow: 25px 0 25px rgba(49, 66, 89, 0.6), -25px 0 25px rgba(49, 66, 89, 0.6);
   /* Page opening animation */
   animation: loopDeLoop_In 1s ease-in-out;
}

/* Page exiting animation */
body.loop-out {
   animation: loopDeLoop_Out 1s ease-in-out;
}

/* Styling for the header image */
body > header > img {
   display: block;
   width: 100%;
   border-radius: 25px 25px 0 0;
}

/* Styling for social media icons */
/* REQUIRED: Advance CSS for image - 26 APR 2024 */
.socialContainer {
   position: absolute;
   top: 15px;
   left: 50%;
   transform: translateX(-50%);
}

.socialContainer img {
   border-radius: 200px;
   border: 1px solid rgb(255, 255, 255);
   box-shadow: 1px 0 7px rgba(255, 255, 255, 0.9), -1px 0 7px rgba(255, 255, 255, 0.9);
   background-color: rgb(255, 255, 255);
}

/* Styling for audio controls */
.audioContainer {
   display: none;
}

/* Styling for horizontal navigation */
nav.headerNav {
   background-color: rgb(49, 66, 89);
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   position: relative;
}

nav.headerNav img {
   height: 50px;
   padding-right: 1px;
}

nav.headerNav ul {
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
   flex-grow: 1;
}

nav.headerNav li {
   flex-grow: 1;
}

nav.headerNav a {
   display: block;
   font-family: Mynerve, cursive;
   font-size: 1.75em;
   line-height: 1.25em;
   text-align: center;
   color: rgb(255, 255, 255);
   text-decoration: none;
   flex-grow: 1;
}

/* REQUIRED: Dynamic styling of the navigation - 06 APR 2024 */
nav.headerNav a:hover,
nav.headerNav a:active {
   background-color: rgb(191, 143, 132);
   border-radius: 10px;
}

/* Grayscale button cursor */
#btnGray {
   cursor: pointer;
}

/* Grayscale button stylings */
.btnGrayStyle {
   border-radius: 200px;
   padding: 3px;
   box-shadow: 1px 0 5px rgba(255, 255, 255, 0.6), -1px 0 5px rgba(255, 255, 255, 0.6);
   /* Animation */
   animation: pulse 5s infinite;
}

/* Hamburger button hidding (until @Media) */
#hamburgerBtn {
   display: none;
}

/* Hamburger button stylings */
.hamburgerStyle {
   border-radius: 10px;
   padding: 3px;
   box-shadow: 1px 0 5px rgba(255, 255, 255, 0.6), -1px 0 5px rgba(255, 255, 255, 0.6);
   /* Animation */
   animation: pulse 5s infinite;
}

/* Override font stylings */
/* Styling for accent text */
.accentFont {
   font-family: Mynerve, cursive;
   font-size: 1.3em;
}

/* Styling for Right Special Justified */
.accentRight {
   font-family: Mynerve, cursive;
   text-align: right;
   margin-right: 20px;
   color: rgb(255, 255, 255);
}

/* Styling for titles */
.textTitle {
   font-family: Mynerve, cursive;
   font-size: 3em;
   line-height: 1.25em;
   text-align: center;
   color: rgb(255, 255, 255);
   text-shadow: 4px 4px 3px rgb(49, 66, 89);
}

/* Styling for subtitles and dates */
.textSubtitle {
   font-family: Mynerve, cursive;
   font-size: 1.5em;
   margin-left: 5%;
   line-height: 1.25em;
   text-align: right;
   color: rgb(49, 66, 89);
   text-shadow: 4px 4px 3px rgb(191, 143, 132); 
}

/* Styling for trade style text */
.textTrade {
   font-size: .8em;
   line-height: 1.25em;
   text-align: center;
   padding: 10px 0;
   text-decoration: none;
}

/* Styling for addition link text */
.textLink {
   text-decoration: none;
   color: rgb(242, 215, 182);
}

/* Styling for additional link hover text */
.textLink:hover,
.textLink:active {
   color: rgb(191, 143, 132);
}

/* Styling for additional link text within ul/ol */
.textListLink {
   font-family: Mynerve, cursive;
   font-size: 1.25em;
   font-weight: bold;
   color: rgb(49, 66, 89);
}

/* REQUIRED: pseudo element - 23 APR 2024 */
/* Styles the first letter of a paragraph */
.firstLetter::first-letter {
   font-size: 250%;
   font-family: MyNerve;
   font-weight: bolder;
   color: rgb(49, 66, 89);
}

/* Pitcure Caption Stlyings */
.imgCaption {
   position: relative;
}

.imgCaption img {
   display: block;
   border-radius: 10px;
}

figcaption {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   background-color: rgba(242, 215, 182, 0.75);
   color: black;
   font-family: Mynerve, sans-serif;
   text-align: center;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   padding: 7px 10px;
   font-weight: bold;
}

/* Footer Styles */
/* footer flex stylings */
.footerBox-1,
.footerBox-2,
.footerBox-3 {
   flex: 1;
   padding: 15px;
   margin-top: auto;
   margin-bottom: auto;
}

.footerBox-3 {
   display: flex;
   flex-direction: column;
   flex: 4;
}

footer {
   background-color: rgb(49, 66, 89);
   clear: left;
   padding-top: .1em;
   border-radius: 0 0 25px 25px;
}

body > footer {
   font-size: 0.9em;
   color: rgb(255, 255, 255);
}

/* Footer ghost image stylings */
.ghost-image {
   width: 150px; /* Adjust size as needed */
   height: 150px; /* Adjust size as needed */
   border-radius: 50%;
   opacity: 0.4; /* Adjust opacity as needed */
   filter: grayscale(25%); /* Convert image to grayscale */
   margin: 10px 0 0 10px;
   border: 3px solid rgb(191, 143, 132);
   box-shadow: 0 0 10px rgba(242, 215, 182, 0.9);
}

/* Vertical navigation styles */
nav.footerNav ul {
   margin-left: 1em;
   line-height: 1.5em;
}

nav.footerNav a:link, 
nav.footerNav a:visited {
   color: rgb(242, 215, 182);
}

nav.footerNav a:hover, 
nav.footerNav a:active {
   text-decoration: underline;
}

address {
   text-align: center;
   font-size: smaller;
   padding-top: 10px;
}

address a {
   color: rgb(191, 143, 132);
   text-decoration: none;
}

/* CSS for form fields and buttons */
input[type="text"],
input[type="email"],
select,
textarea,
input[type="submit"],
input[type="reset"] {
   border: 1px solid rgb(242, 215, 182);
   border-radius: 20px;
   box-shadow: 0 0 5px rgba(242, 215, 182, 0.9);
   padding: 10px;
   width: calc(100% - 25px);
}

label,
legend {
   font-family: Mynerve, cursive;
   font-size: 1.2em;
}

label {
   display: block;
   margin-bottom: 5px;
}

fieldset {
   border-radius: 20px;
   box-shadow: 0 0 10px rgba(242, 215, 182, 0.9);

}

input[type="submit"],
input[type="reset"] {
   background-color: rgb(191, 143, 132);
   color: white;
   border: none;
   border-radius: 20px;
   box-shadow: 0 0 10px rgba(242, 215, 182, 0.9);
   cursor: pointer;
   font-family: Mynerve, cursive;
   width: calc(50% - 25px);
   padding: 10px;
   margin: 10px;
   font-size: 1.2em;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
   background-color: rgb(242, 215, 182);
   color: rgb(49, 66, 89);
}

/* Highlight field in blue */
label:hover,
input:focus,
textarea:focus,
select:focus {
   outline: none;
   border: 2px solid rgb(49, 66, 89);
}

/* Highlight fields in red if requirement not met */
input:invalid,
textarea:invalid,
select:invalid {
   border: 3px solid rgb(191, 143, 132);
}

/* Form Div Styles */
fieldset div {
   padding: 6px 0;
}

select {
   width: 100%;
}

/* Media query for responsive design on screens wider than 768px */
/* REQUIRED: Media Query 1 of 3 - 06 APR 2024 */
/* Styling for Main Section found on page specific CSS files */
@media(min-width:769px) {
   .footerFlex {
      display: flex;
      width: auto;
   }

   .formBox-1,
   .formBox-2,
   .formBox-3 {
      padding: 1px 5px;
   }

   .formFlex-1 {
      display: flex;
   }

   .formFlex-2 {
      flex: 1;
      margin-left: 10px;
   }

   .hideImg769 {
      display: none;
   }
}

/* media query for responsive design on screens 768px or smaller */
/* REQUIRED: Media Query 2 of 3 - 06 APR 2024 */
/* Styling for Main Section found on page specific CSS files */
@media only screen and (max-width: 768px) {
   /* Header navigation styling for >769px screens */
   nav.headerNav {
      position: relative;
   }

   nav.headerNav ul {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 50px;
      left: 0;
      width: 100%;
      background-color: rgb(242, 215, 182);
      padding: 10px;
      z-index: 999;
   }

   nav.headerNav a {
      color: rgb(0, 0, 0);
      margin: 5px 0;
   }

   nav.headerNav ul.show {
      display: flex;
   }

   nav.headerNav li {
      margin-right: 0;
      width: 100%;
      text-align: center;
   }

   /* Styling for hamburger navigation >769px screens */
   #hamburgerBtn {
      display: block;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 40px;
      margin-right: 10px;
   }

   /* Caption Styling for >769px screens */
   .imgCaption figcaption {
      width: calc(100% - 40px);
   }

   /* Styling for Footer for >769px screens */
   .footerBox-1 {
      margin: 0 auto;
      text-align: center;
      float: left;
      width: calc(50%);
   }

   .footerBox-2 {
      margin: 20px auto;
      text-align: center;
      float: right;
      width: calc(50%);
   }

   .footerBox-3 {
      clear: both;
      margin: 0 auto;
      width: 70%;
      text-align: center;
      padding-bottom: 25px;
   }
   
   .formFlex-2 {
      flex-direction: column;
   }

   .formBox-2,
   .formBox-3 {
         padding: 0;
         margin: 0 10px;
   }
   
   .hideImg768 {
      display: none;
   }
}

/* Media query for responsive design on screens 480px or smaller */
/* REQUIRED: Media Query 3 of 3 - 06 APR 2024 */
/* Styling for Main Section found on page specific CSS files */
@media only screen and (max-width: 480px) {
   /* CSS for social media icons for >769px screens */
   .socialContainer {
      left: 30%;
   }

   .socialContainer img {
      max-width: 25%;
      margin: 0 0 0 10px;
   }

   /* Remove body animations for >481px screens */
   body {
      animation: none;
   }
   
   body.loop-out {
      animation: none;
   }

   /* Styling for Footer for >481px screens  */
   .footerBox-1 {
      float: none;
      margin: 0 auto;
      text-align: center;
   }
      
   .footerBox-2 {
      display:none;
   }

   .footerBox-3 {
      padding-bottom: 25px;
   }
}