html {
    background-image: url("lost.webp");
    background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-color: black;
  
  
  
}
#header{
    text-align: center;
    padding: 10px;
    
}
h1{
    text-align: center;
    font-size: 50px;
    color:beige;
}
ul{
    
   color: aliceblue;
   margin: 0;
   padding: 0;
   list-style-type: none;
   display: flex;
   
}
li{
    padding: 2%;
    
}
li:hover{
    background-color: oldlace;
    color: black;
}

img{
    opacity: 0.2;
}
.leftcolumn {   
    float: left;
    width: 70%;
    opacity: 0.2;
    
  }
  .leftcolumn:hover{
    opacity: 1;
  }
  
  /* Right column */
  .rightcolumn {
    float: right;
    width: 20%;
    background-color: black;
    padding-left: 20px;
    opacity: 0.1;
    
  }
  .rightcolumn:hover{
    opacity: 1;
  }
  
  /* Fake image */
  
  
  /* Add a card effect for articles */
  .card {
    background-color: black;
    padding: 20px;
    margin-top: 20px;
  }
  
  /* Clear floats after the columns */
  .row::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Footer */
  .footer {
    padding: 20px;
    text-align: center;
    
    margin-top: 20px;
    opacity: 0.5;
    color: white;


  }
  
  h2{
      color: white;
    }
    h5{
        columns: blue;
    }
    p{
        color: aqua;
        font-size: 20px;
    }
    #pic{
        background-image: url("photo.jpg");
    }
    a:link,a:visited{
        text-decoration: none;
        color: beige;
    }
    
    
    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
  
      }
    }
    
    /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }