/* I decided to make a seperate css sheet for this page, even if it does create extra work. I was just getting too muddled having it all in the same css file as the homepage! This version is much more organized than my prior verson.*/ 

:root {
--main-bg-color:  #f89140;
        --section-bg-color: rgba(255, 214, 143, 0.68);
          --text-color: #600707;
}
        
body {
 font-family:Arial, Helvetica, sans-serif;
 font-size: 1.3em;
 color: #984305;
 background-color: rgba(255, 214, 143, 0.68);  
background-image: radial-gradient(circle, #ffd692, #fcc479, #fab261, #f99e4c, #f78939);
    text-align-last: center;
}
      
.title {
        color: #600707;
        font-family: "Rubik Spray Paint", system-ui;
        font-weight: 400;
        font-style: normal;
        }
        
img {
            border: 1px solid #ae591c;
            border-width: medium;
            border-radius: 3px;
            max-width: 100%;
            height: auto;
            filter: saturate(1.5);  
            
}

/* Javascript show/hide content below*/

#details1 { display: none; }

#moreLess1 {
	      color: #600707;
	      font-weight: bold;
     }
#moreLess1:hover {
			  font-style: italic;
		 }

/* Javascript content end */


header {
    text-align-last: center;
    position: static;
    background-color: #b46227;
    line-height: calc(1);
    padding: 1%;
    overflow-wrap:break-word;
    font-size: 1.5em;
   }

    
 footer {
    border-top: dotted #ae591c 0.3em;
    background-color:rgba(255, 214, 143, 0.68);
    text-align: center;
    font-size: .8em;
    padding: 1%;
}
    h3 {
        color:#600707;
        text-align-last: center;
        padding-left: 8%;
    }
    h2 {
        font-size: 1em;
        color: #600707;
        font-style: italic;}
    h4 {
        text-align-last: center;
    }

    h1 {font-size: 1.7em}
    
    p {
        text-align-last: center;
    }

iframe {
    margin-bottom: 5%
}
   

/* navbar stuff*/

  .nav-flex-container {
      background-color: #b46227;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 1em;
      font-weight:300;
   }
   nav a {
     color: #600707;
      text-decoration: none;
      text-align: center;
      padding: 1em;
   }

  nav a:link {
            color: #600707;
            background-color: transparent;
            text-decoration-line: blink;}
            
   section {
      background-color: #ffc59b;
      padding: 1.5em;
}
/*Museum flexbox stuff*/
    
       .wrapper {  
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         margin: 8%;
           
       }

       .card {  
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 13em;
         flex-grow: 3;
         background-color: var(--section-bg-color);
         margin: 0.4em;
            font-family:Arial, Helvetica, sans-serif;
           font-size: 0.9em; }
     a:link {
            color: #600707;
            background-color: transparent;
            text-decoration-line: blink;
}
    
        a:visited {
            color: #600707;
            background-color: transparent;
            text-decoration: none;
}

    a:hover {
            color: #600707;
            background-color: transparent;
            text-decoration: underline;
}

       img {
         max-width: 90%;
		     border-radius: 3%;
		     margin: 1em;
	     }
       p { padding: 1em;}
      
    @media (min-width: 50.0em)  {
         .card {
           width: 27%;
           flex-grow: 1;
            }
        .navbar {
            width:27%;
            flex-grow: 1;
        }
        }