@media screen and (orientation:portrait) {
  
  body {
    position:absolute;
    background-size: 2000px;
    Background-Color:rgba(255, 255, 255, 0.6);
    background-image: url('TEAL\ trans.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
    background-position: top;
   }
   
   h1{
    Color:DodgerBlue;
    text-align:center;
    font-size: 300%;
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  h2{
    Color:darkred;
    text-align:center;
    font-family: Lucida Console, Courier New, monospace;
    font-size: 200%;
  }
  /* Add a black background color to the top navigation */
  .topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: Dodgerblue;
    color: white;
  }

  /* Create a right-aligned (split) link inside the navigation bar */
  .topnav a.split {
    float: right;
    background-color: dodgerblue;
    color: white;
  }

  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .dropdown:hover .dropbtn {
    background-color: Darkred;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .Mercari
  {
    width: 623px;
    height: 148px;
    background: url(mercariContrast.png) no-repeat;
  }
  .Mercari:hover {
          -moz-box-shadow: 0 0 10px #ccc;
          -webkit-box-shadow: 0 0 10px #ccc;
          box-shadow: 0 0 10px #ccc;
          background-color: black;
          opacity: 0.3;
  }

  .Ebay {
      width: 623px;
      height: 249px;
      background: url(EbayLogo.png) no-repeat;
  }
  .Ebay:hover
  {
      -moz-box-shadow: 0 0 10px #ccc;
      -webkit-box-shadow: 0 0 10px #ccc;
      box-shadow: 0 0 10px #ccc;
      background-color: black;
      opacity: 0.3; 
  }
  .Whatnot{
      width: 345px;
      height: 256px;
      background: url(whatnot.png) no-repeat;
  }
  .Whatnot:hover{
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
        background-color: black;
        opacity: 0.3;
  }
  .bottomnav {
    background-color: #333;
    overflow: hidden;
  }
  .bottomnav a.split {
    float: right;
    color: white;
  }



}

@media screen and (orientation:Landscape) {
  body{
        background-size: cover;
        Background-Color:rgba(255, 255, 255, 0.6);
        background-image: url('TEAL\ trans.png');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-blend-mode: lighten;
  }
        
   

  h1{
    Color:DodgerBlue;
    text-align:center;
    font-size: 300%;
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

  h2{
    Color:darkred;
    text-align:center;
    font-family: Lucida Console, Courier New, monospace;
    font-size: 200%;
  }


  /* Add a black background color to the top navigation */
  .topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: Dodgerblue;
    color: white;
  }

  /* Create a right-aligned (split) link inside the navigation bar */
  .topnav a.split {
    float: right;
    background-color: dodgerblue;
    color: white;
  }

  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .dropdown:hover .dropbtn {
    background-color: Darkred;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .Mercari
  {
    width: 623px;
    height: 148px;
    background: url(mercariContrast.png) no-repeat;
  }
  .Mercari:hover {
          -moz-box-shadow: 0 0 10px #ccc;
          -webkit-box-shadow: 0 0 10px #ccc;
          box-shadow: 0 0 10px #ccc;
          background-color: black;
          opacity: 0.3;
  }

  .Ebay {
      width: 623px;
      height: 249px;
      background: url(EbayLogo.png) no-repeat;
  }
  .Ebay:hover
  {
      -moz-box-shadow: 0 0 10px #ccc;
      -webkit-box-shadow: 0 0 10px #ccc;
      box-shadow: 0 0 10px #ccc;
      background-color: black;
      opacity: 0.3; 
  }
  .Whatnot{
      width: 345px;
      height: 256px;
      background: url(whatnot.png) no-repeat;
  }
  .Whatnot:hover{
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
        background-color: black;
        opacity: 0.3;
  }
  .bottomnav {
    background-color: #333;
    overflow: hidden;
  }
  .bottomnav a.split {
    float: right;
    color: white;
  }
}