/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

     
    body {
      background: url("../images/ImgWallpaperWWedited.jpg");
      min-height: 100vh;  
      max-width: 900px;
      margin: 0 auto;
      background-attachment: fixed;
      background-repeat: round; /* round or repeat*/
      margin-bottom: 20%;
      word-break: break-word;
         
    }
    
    p {
     line-height: 1em; 
    }
    
    .blurb hr {
     color: #347c90;  
    }
    
    .box hr {
     color: white; 
    }
  
    
      @font-face {
      font-family: SMW;
      src: url(/fonts/Super-Mario-World.ttf);
      /* https://www.dafont.com/super-mario-world.font */
      /* https://www.dafont.com/super-mario-world.font */      
      }
      
    .marioworld {
      position: relative;
      color: white;
      font-family: SMW;
      display: flex;
      flex-direction: row;
      justify-content: space-between; 
      
      /*flex-direction: row makes the elements flow from left -> right, in line. justify-content: flex-start will start the items at the top-left of the flex box (parent). align-items: center will align the items inside of parent-element horizontally. Alternatively, you can use: gap: 1rem (<-- replace your desired gap where 1rem is) to make sure the items have a gap between them. gap does not interfere with padding or margin unless you have a max-height and/or max-width of the parent-element set preventing the parent-element from expanding its size to leave a gap in between the child elements.*/
      /* https://stackoverflow.com/questions/77512372/how-to-display-two-texts-next-to-each-other */

      align-items: center;
      margin: 0 auto;
      padding: 0% 5% 0% 5%;
      /* top right bottom left*/
    }
    
    .counter {
      -webkit-text-stroke: 0.05em #347c90;
      font-size: 200%;
      padding: 5px;
      display: inline-block;     
    }
    
    .location {
      font-size: 100%;
      color: #347c90;
      padding: 1%;
      background-color: white;
     -webkit-text-stroke: 0px black;
      float: right;
    }
    
     /* for combining header and container below it so that they rest below the top of the page and
     have a contiguous dropshadow*/
    .conjoined {
     filter: drop-shadow(#122931 3rem 3rem 20px); 
     margin-top: 10%;
     margin-bottom: 10%;

    }
    
    /* Cyan box with white outline to house both headers, titles, descriptions, lists, and blurbs */    
    .box {
     background-color: #347c90; 
     border: 10px solid white;
     padding: 2.5%;
    /* max-height: 100vh;
      max-width: 100vw; */
     font-family: Trebuchet-MS;
     font-size: 150%;

    }
    
     .box img {
     padding: 2%;
     background-color: white;
     display: block;
     margin-top: 5%;
     margin-bottom: 1rem;
     max-width: 95%;
     margin-left: auto;
     margin-right: auto;
     
    }
    
    .box .imgCaption {
     line-height: 1em;
     color: white;
     text-align: center;
     display: block;
     margin-left: auto;
     margin-right: auto;
     font-size: 75%;
     font-style: italic;
     margin-bottom: 5%;
     
      
    }
        
    .header { /* nested in box */
     font-size: 125%;
     font-weight: bold;
     text-align: center;
     
    }
    
    .header ul {
      list-style-type: none; 
      padding: 0.1em 0;
      color: white;
      /* word-spacing: 2em; */
    }
    
    .header li {
      display: inline-block;
      color: white;
      padding: 0.5em;
    }
    
    .header li a{
      text-decoration: none; 
      color: inherit;
    }
    
    .header li a:hover{
       color: #347c90;
       background-color: white; 
    }
    
    .blurb { /* nested in box */
      color: #347c90;
      background-color: white;
      border: 2.5%, solid, #347c90;
      border-radius: 10px;
      padding: 2%;
      text-align: left;
      font-size: inherit;
      font-family: inherit;
      
    }
    
    .body { /* encloses box and blurb */
     filter: drop-shadow(#122931 3rem 3rem 20px); 
     margin-bottom: 10%;
    }
    
    
    .diagram {
      filter: drop-shadow(black 2rem 2rem 20px); 
      margin-bottom: 10%;
    }
    
    .diagram img {
     padding: 2%;
     background-color: white;
     display: block;
     margin-top: 5%;
     margin-bottom: 0;
     max-width: 85%;
     margin-left: auto;
     margin-right: auto;
    }
    
    .diagram .imgCaption {
     line-height: 1.2em;
     color: #347c90;
     background-color: white;
     text-align: center;
     display: inherit;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 5%;
     max-width: 75%;
     font-size: 125%;
     padding: 1em;
     font-style: italic;
    }
    
  /*  figure {
      background-color: white;
      padding: 10px;
      margin-bottom: 10%;
      display: inline-table;
      justify-content: center;
      
    }
    
    figcaption {
      color: #347c90;
      background-color: white;
      text-align: center;
      caption-side: bottom;
      display: table-caption;
      padding: 1em;
      font-weight: bold;
    } 
    */
    
    .greetingText { /* nested in blurb */
     text-align: center;
    }
    
    .title { /* nested in box */
      color: white;
      text-align: center;
      font-family: inherit;
      font-weight: bold;
      font-size: 200%;
      line-height: 1em;
      overflow-wrap: break-word;
    }
    
    .description { /* nested in box */
      color: white;
      text-align: left;
      font-family: inherit;
      font-size: 100%;
      line-height: 1.3em;
    }
    
    .description a {
     color: white; 
    }
    
    .description a:hover {
     color: #347c90;
     background-color: white; 
     text-decoration: none;
    }
        
    .list ul li {
     color: white; 
    }
    
     .list ul li a {
     line-height: 1.75em;
     color: white;
     text-align: left;
     font-size: 100%;
     font-family: inherit;
     font-weight: bold;
    }
    
    .list ul li a:hover {
     color: #347c90;
     background-color: white; 
     text-decoration: none;
  
    }
    
    .quoteText { /* is its own box, nested in body */
    /* max-height: 75vh;
     max-width: 75vw; */
     filter: drop-shadow(black 3rem 3rem 20px); 
     width: fit-content;
     color: white;
     background-color: black;
     border: 5px solid white;
     border-radius: 10px;
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 10%;
     
    }
    
    .quoteText blockquote {
      white-space: pre-wrap;  
      font-family: monospace;
      font-size: 150%;
    }
    
    .quoteText p {
     text-indent: 10%; 
     font-weight: bold; 
     font-size: 125%;
    }