/* ======================= START BASIC NAVIGATION FUNCTIONALITY =================================== */

nav ul {list-style-type: none;}
/* Hide menu bullets by default */


button {
  padding: 0 !important;
  background-image: url(bgimg/hamburger.svg);
  background-size: contain;
  height: 1rem;
  width: 1rem;
}
/* Remove default browser button styles to properly 
enable text-indent: 100% in .hide-text image replacement */


ul#menu {
 display: none;
}
/* Hide drop down menu by default when page loads */


ul#menu.show-nav {
  display: block !important;
}
/* force the navigation to display on click  */


#menu.show-nav {
	position: absolute;
    /* menu is on a layer, above normal page context: won't disrupt page when it appears */
	z-index: 10;
    /* layer 10: above everything else (random positive number) */

}
/* position the drop down menu when it displays */


#menu.show-nav li {
	margin: 0;
    padding: 0;
}

/* ===== IMPROVED NAVIGATION ===== */

    .primary-navigation {
        display: flex;
        justify-content: end;
        padding: 4px;
    }

     ul#menu.show-nav {
      background-color: white;
      top: 1.5rem;
      width: 100%;
      padding: 1rem;
  }

      #menu svg {
        display: inline-block; /* use "inline-block" to place icon next to text; OR use "block" to place icon above text instead */
        height: 2rem;
        width: 2rem;

        position: relative;  /* relative to the SVG's default position */
        top: 0.7rem;
    }

        button:hover {
        cursor: pointer;
        }

            #menu.show-nav li {
        margin: 0 0 1rem 0;
        padding: 0;
    }

        ul#menu.show-nav {
        background: #ffffff;
        background: url(bgimg/Curtains.svg),radial-gradient(circle, rgb(58, 48, 48) 0%, rgb(81, 77, 77) 50%, rgb(85, 2, 2) 100%);
        background-repeat: no-repeat;
        background-size: 29rem,auto;
        background-position: 49% 50%;
    }

        ul#menu.show-nav {
        top: 1.5rem;
    }



/* ======================= END BASIC NAVIGATION FUNCTIONALITY =================================== */

/* ==== LoVeHa Rule Start ==== */

    #menu a:link {
        color: rgb(255, 255, 255); 
        /* change to suit your design */

        text-decoration: none;  
        /* remove default underline */
    }

    #menu a:visited {
        color: rgb(129, 123, 123);  

        /* less vivid color, must look "less interesting" than the a:link color 
            basically, this style must suggest "been there, seen that" */
    }

    #menu a:hover {
        text-decoration: underline; 
        /* add underline on hover to show it is a link */
    }

    #menu a:active {
        color: rgb(255, 0, 0); 
        /* only shows when clicking the mouse */
    }

        main a:link {
        color: rgb(255, 255, 255);
        text-decoration: none;
    }

    main a:visited {
        color: gray;
    }

    main a:hover {
        text-decoration:none;
    }

    main a:active {
        color: rgb(255, 0, 0);
    }

        footer a:link {
        color: rgb(0, 0, 0);
        text-decoration: none;
    }

    footer a:visited {
        color: rgb(101, 3, 3);
    }

    footer a:hover {
        text-decoration: underline;
    }

    footer a:active {
        color: rgb(255, 0, 0);
    }

/* ======================= START CONTACT PAGE STYLE ==========================*/


    fieldset {
        margin: 1rem;
        border: 4px solid #ffffff;
    }

        input:not(.button), textarea, select {
        display: block;
        margin: 0;
        
        }

            fieldset {
        margin: 1rem;
        border: 10px double #ffffff;
        padding: 1rem;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    }

        input:not(.button),
    textarea,
    select {
        display: block;
        margin: 0;
        width: 100%;
    }

       input[type="text"] {
        margin-bottom: 1rem;
    }

        legend {
        padding: 0 0.5rem;
    }

        label {
        margin-bottom: 0.35rem;
        display: block;
    }      

        .align-right {
        display: flex;

        justify-content: flex-end;
        /* Send buttons to the end of the flex box, ie right */

        margin-right: 1rem;
        /* match the width of the margin of the fieldset so it aligns */
    }        

        .button[type="reset"] {
        margin-right: 1rem;
        background-color: #6b0101;
        color: #ffffff;
    }    

       textarea {
  min-height: 100px;
    }

    .contact {
      background-color: rgb(0, 0, 0);
    }

    .info-box {
      padding-top: 4rem;
       background: #c2c2c2;
        background: url(bgimg/video-player.svg),radial-gradient(circle, rgb(111, 110, 110) 0%, rgb(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-size: 10rem,18rem;
        background-position: 54% -78%,102% 0rem;
        color: rgb(255, 255, 255);
    }

    .help-box {
      padding-top: 4rem;
        background: #c2c2c2;
        background: url(bgimg/film-reel.svg),radial-gradient(circle, rgb(111, 110, 110) 0%, rgb(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-size: 3.5rem,18rem;
        background-position: 49% 17%,102% 0rem;
        color: rgb(255, 255, 255);
    }
       

            .comment-box {
        padding-top: 4rem;
        background: #c2c2c2;
        background:  url(bgimg/knife.svg), radial-gradient(circle, rgb(111, 110, 110) 0%, rgb(0, 0, 0) 100%);
        background-repeat: no-repeat;
        background-size: 5rem, 18rem;
        background-position: 75% 3%,102% 0rem;
        color: rgb(255, 255, 255);
    }

    aside {
        color: #ffffff;
        padding-right: 1rem;
        padding-left: 1rem;
        border: 10px double white;
        padding-top: 1rem;
        padding-bottom: 1rem;
        
    }

    /* ====================== END OF CONTACT PAGE STYLE ======================= */ 

    footer {

        
        border: 4px dashed black;
        padding: 2rem;
        color: #000;
        background-color: white;
        background-image: url(bgimg/film.svg);
        background-repeat: repeat-y;
        background-size: 5rem;
        background-position: 92% 50%;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
        border-radius: 2rem;
        animation-name: myanimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes myanimation {
        from {background-position: 92% 50%;}
        to {background-position: 92% 200%;}
    }


    main {
        margin: 1rem;
    }

    aside {
        margin: 1rem;
    }

    figure {
        margin: 2rem 1rem 3rem 1rem;
    }

/* ==== Font style for all pages ==== */ 

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      label,
      legend {
          font-family: "Limelight", 'Helvetica Neue', Helvetica, Arial, serif;
          font-weight: 400;
          font-style: normal;
          color: white;
      }


      body {
          font-family: "Cinzel", 'Gill Sans', Verdana, Tahoma, sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal; 
          color: white; 
      }

      h1 { font-size: 2.5em; }
      h2 { font-size: 2.1459em; }
      h3 { font-size: 1.842em; }
      h4 { font-size: 1.5811em; }
      h5 { font-size: 1.3572em; }
      h6 { font-size: 1.165em; }
      p { font-size: 1em; }
      small { font-size: .8584em; }

          h1 {
        margin: 1rem;  
        /* top, right, bottom, left */

        line-height: 1; 
        /* titles need less leading than paragraphs, experiment by adding decimal values like 1.25 or 1.11567 */
    }

    h2 {
        margin: 0.5rem;  
        /* Experiment with em vs rem to see the difference, choose your preferred appearance */
    }

    h3 {
        margin: 0.5rem;
    }

    p {
        margin: 0.5rem;
        line-height: 1; 
        /* paragraphs need more leading than titles, experiment with decimal values between 1 and 2 */
    }

/* ==== End of Font Style ==== */ 

/* ==== Home page Start ==== */

  header {
    margin: 0rem;
    padding: 7rem;
    background-color: #ffffff;
    color: #000;
    background-image: url(bgimg/MullenS_Logo\ for\ WEB.svg);
    background-repeat: no-repeat;
     background-size: 99%;
    background-position: 100% 87%;
    filter: invert();
  }


    .card {
        border: 3px dashed #ffffff;
        max-width: 300px;
        margin: 2rem auto;
        padding: 2rem 1rem 2rem 1rem;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
        background-position: 50% -120%;
        background-size: 300px;
        background-repeat: no-repeat;
        }



    .readmore {
        display: block;
        background-color: rgb(135, 0, 0);
        width: fit-content;
        padding: 1rem;
        color: white;
        font-weight: bold;
        margin: 2rem auto 0 auto;
        border-radius: 12px;
        box-shadow: 0px 0px 8px #ffffff;
    }
 
.home {
    background-color: black;
}

/* ==== End of Home Style ==== */

/* ==== Start of History Style ==== */

.history {
    background-color: black;
}

/* ==== End of History Style ==== */

/* ==== Start of Genres Style ==== */

.genres {
    background-color: black;
}

/* ==== End of Genres Style ==== */

/* ==== Start of Conclusion Style ==== */

.conclusion {
    background-color: black;
}

.infographic {
  margin-top: 2rem;
  padding: 8rem;
  background-image: url(bgimg/MullenS_Infographic.svg);
  background-size: 98%;
  background-position: 44% 45%;
  background-repeat: no-repeat;
  border: 3px dashed white;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);

}

/* ==== End of Conclusion Style ==== */

/* ==== Animation stuff ==== */



/*
OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
.HIDE-TEXT FOR IMAGE REPLACEMENTS
SEE: HTTP://WWW.ZELDMAN.COM/2012/03/01/REPLACING-THE-9999PX-HACK-NEW-IMAGE-REPLACEMENT/
*/
.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }