@viewport {
    width: device-width;
    zoom:1;
    } 
  *{ text-decoration: none; font-size:1em;
   color: #FFFFFF; text-shadow: 1px 1px black;
   font-family: Tahoma, ITCConduit,Corbel, Lucida Grande, Lucida Sans Unicode,Lucida Sans,DejaVu Sans,Bitstream Vera Sans,Liberation Sans,Verdana,Verdana Ref,sans-serif;
   }
  body {background-color:#EFE3AF;
   }
  h2 {font-size:1.6em; color: #ff0000; font-weight:normal; text-shadow: 2px 2px black;
   }
  h3 {font-size:1.2em; font-weight: lighter;
   }
  p {hyphens: auto; 
   }
  main {
  margin-top:1em; margin-left:auto; margin-right:auto;
   max-width:45rem; 
  background-color: rgb(70, 105, 41); background-image:url('images/background2.gif');
  min-height: 90%;
  min-height: 85vh;
   }
  #logo{width:8em; height:auto; margin-top:1em; margin-left: auto; margin-right: auto;
    }
  #flexcontainer { 
    display: flex;
      flex-direction: row;
      justify-content: space-between;
  }
  .flexitem {margin-left: 1em; margin-right: 1em;}
  #folder {
    margin-top: 0.5em;
   max-width: 45rem;
   margin-left:auto; margin-right: auto;
  }
  #folder h3 {
    color: #ffffff;
   text-align: center;
   margin: 0;
   width: 47%;
   max-width: 21rem;
   padding: 0.5em;
   display: inline-block;
   background-color:rgb(70, 105, 41); background-image:url('images/background2.gif');
font-size:1.2em;
 }
 #folderleft {float: right;}
 #folderright {float: left;}
 #folder h3:hover, #folder h3:focus {
   color:#a80000;
   background-image:none;
   background-color: #ffffff; 
 }



  @media (max-width: 45em), (orientation: portrait)
  {
    main {
      max-width: 100%;
    }
    #flexcontainer{
      flex-direction: column;
      justify-content: start;
    }
    .flexitem {
      margin-bottom: 1.5em;
    }
    #folder {
      max-width:100%; 
    }
    #folder h3{
      max-width:45%; 
    }
  }