#myFakeElement {/*no one knows why this is necessary, but it works! */}

@media screen and (max-width:481px)
{
  .menu, .main, .right {width:100%;}
}

body {
  margin:100;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: #999999;
  background-color:#000000;
}

/* This isn't working... */
.about body{
     background-image: url(all.jpg);
     background-repeat: repeat-x;
     background-position: 20px 40px;
}

.topnav {
    display: flex;
    flex-wrap: wrap;
}

.topnav a{
  float: none;
  color: #999999;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  /*background-color: #FFD700; don't like this effect */
  font-size: 20px;
  cursor: pointer;
  color: #000099;
}

.topnav a:active{
  /*background-color: #FD700; */
  color: #000099;
}

.topnav a:focus{
   color: #000099;
}

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 50%;
  padding: 10px;    
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

h1{
    color: gold;
    font-family: Fantasy, serif;
}

h4{
    color:red;
    font-family: Fantasy, serif;
    font-size: 20px;
}

li{
    color:white;
    font-family: Arial;
    font-size: 16px;
}

#latest{
    display: flex;    
}

#s1, #s2{
    display: inline;
    padding: 30px, 30px;
    border: 10px solid rgb(0,0,0);
}


 /* style for video page and poster page */

#myFloat{
    display: flex;
    flex-wrap: wrap;
}

.poster, .photo{
   padding: 10px, 10px;
   border: 5px solid rgb(0,0,0);
}

#d1, #d2, #d3, #d4, #d5, #d6, #d7{
   display: inline;
}

figcaption{
  font-size: 20px;
  font-family: Fantasy, serif;
  color: red;
}